如安在AngularJS中运用插件

在练习时期,因为项目的需求,我第一次体系的运用了angular这一优异的js框架,其所具有的很多优异特征极大的方便了项目的开辟,然而在开辟中也遇到过不少的题目,如今趁本身被抓回学校无所作为的这段时刻将本身的开辟阅历分享给第一次打仗angularjs的开辟人员用以参考。(这里将会运用angularjs1连系百度的图表插件echart作为例子用以演示)

1.预备

起首我们要做的是在我们的项目中引入我们所须要的依靠,假定你已在你的电脑上已装置好了node与cnpm只须要应用掌握台在你的项目目次下运用以下敕令

 1. cnpm install angular --save
 2. cnpm install echarts --save

在装置终了后你将会获得一个命名为node_modules的文件夹,而我们须要的东西都在内里,当统统预备终了后我们就能够最先我们的开辟了。

2.开辟

我以为在angular中运用其他插件的最好要领是运用指令的情势在项目中引入,如许做有很多优点,个中最显著的优点就是当项目中须要引入多种插件时能够运用种种差别的指令将他们星散而且还具有一次开辟遍地运用的组件化特性。
起首我建立了以下目次的angular的项目
s
《如安在AngularJS中运用插件》个中index.html作为重要页面我们须要在个中应用script标签引入一切会被用到的依靠,然则过量script标签会拖累全部页面的加载速率,须要优化的话能够运用webpack对他们举行打包,这个感兴趣的能够下去自行相识。关于angular来讲其项目会自动天生一个作用域,当你想要在angular项目中运用其他自力的插件时一般我们做的第一件事是将这个插件引入到angular的作用域中,因此在项目中我建立了一个factory用于将echart传入到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的项目中举行操作了。

《如安在AngularJS中运用插件》

    原文作者:iwsr
    原文地址: https://segmentfault.com/a/1190000007264187
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞