如何在AngularJS中使用插件
在实习期间,由于项目的需求,我第一次系统的使用了angular这一优秀的js框架,其所拥有的许多优秀特性极大的方便了项目的开发,然而在开发中也遇到过不少的问题,现在趁自己被抓回学校无所事事的这段时间将自己的开发经历分享给第一次接触angularjs的开发人员用以参考。(这里将会使用angularjs1结合百度的图表插件echart作为例子用以演示) 1.准备首先我们要做的是在我们的项目中引入我们所需要的依赖,假设你已经在你的电脑上已经安装好了node与cnpm只需要利用控制台在你的项目目录下使用如下命令 1. cnpm install angular --save 2. cnpm install echarts --save 在安装完毕后你将会得到一个命名为node_modules的文件夹,而我们需要的东西都在里面,当一切准备完毕后我们就可以开始我们的开发了。 2.开发我认为在angular中使用其他插件的最好方法是使用指令的形式在项目中引入,这样做有许多好处,其中最明显的好处便是当项目中需要引入多种插件时可以使用各种不同的指令将他们分离并且还具有一次开发各处使用的组件化特点。 .factory('echarts',function(){ return echarts; }); 这时只需要在创建的指令中直接引用之前创建的名为echarts的factory我们就可以在指令内直接使用echarts的这一插件了。 .directive('paintDirective',['echarts',function(echarts){ console.log(echarts); return { restrict:'E',controller: ['$scope','$rootScope',function($scope,$rootScope){ console.log('123'); }],templateUrl:'../scripts/template/paintTemplate.html',} }]); 从控制台中的输出我们很容易的就可以看到echarts被引入到了指令内,这个时候我们就可以利用echarts在angular的项目中进行操作了。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |