如何在AngularJS中使用插件

baoxl 发布于2019-08-22 10:41 / 839人阅读

摘要：开发我认为在中使用其他插件的最好方法是使用指令的形式在项目中引入，这样做有许多好处，其中最明显的好处便是当项目中需要引入多种插件时可以使用各种不同的指令将他们分离并且还具有一次开发各处使用的组件化特点。

在实习期间，由于项目的需求，我第一次系统的使用了angular这一优秀的js框架，其所拥有的许多优秀特性极大的方便了项目的开发，然而在开发中也遇到过不少的问题，现在趁自己被抓回学校无所事事的这段时间将自己的开发经历分享给第一次接触angularjs的开发人员用以参考。（这里将会使用angularjs1结合百度的图表插件echart作为例子用以演示）

1.准备

首先我们要做的是在我们的项目中引入我们所需要的依赖，假设你已经在你的电脑上已经安装好了node与cnpm只需要利用控制台在你的项目目录下使用如下命令

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

在安装完毕后你将会得到一个命名为node_modules的文件夹，而我们需要的东西都在里面，当一切准备完毕后我们就可以开始我们的开发了。

2.开发

我认为在angular中使用其他插件的最好方法是使用指令的形式在项目中引入，这样做有许多好处，其中最明显的好处便是当项目中需要引入多种插件时可以使用各种不同的指令将他们分离并且还具有一次开发各处使用的组件化特点。
首先我创建了如下目录的angular的项目
s
其中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的项目中进行操作了。

GPU云服务器云服务器 webrtc如何在web中使用在php中如何使用n 在js中怎样编写插件在php中使用组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91057.html

搜索时自动排除angularjs

摘要：不过互联网嘛，资源丰富，找找肯定有相关功能的，果然，我发现了这个想得真周到，还会在完成搜索以后自动隐藏，体验又上一个台阶，果然自己不光能力不够，境界也不够。这样一点计算机基础都没用的人也同样可以排除自己不想看到的东西。由于历史原因在搜索angular的文章时老是有一大堆的angularjs的文章在其中 showImg(https://segmentfault.com/img/bVbr...

张金宝 2019-08-23 17:09 评论0 收藏0
Day 17: 使用 JBoss Forge 和 OpenShift 构建部署 JAVA EE 6

摘要：会警告该插件未签名。以上命令告诉创建一个名为的项目，使用包。的工具使从部署应用非常方便。域名构成了分配给应用的的一部分。这将为我们创建一个应用容器，自动配置和。同时将创建一个私有的仓库并克隆到本地。编者注：我们发现了有趣的系列文章《30天学习30种新技术》，正在翻译，一天一篇更新，年终礼包。下面是第 17 天的内容。今天的30天学习30种新技术挑战，我决定学习一下JBoss ...

YacaToy 2019-08-14 11:36 评论0 收藏0
总结的AngularJS1版本的一些面试问题

摘要：综上所述两者是出于不同的目的被创建的，解决的也是不同的问题。检测模型变化的过程称为循环。由指令注册的事件处理函数执行。该回调函数会更新插值表达式所在的属性。模块主要关系脚本加载问题。 AngularJS面试题 1.与jQuery的比较 jQuery js函数库封装简化dom操作使用jquery的思想是：我拥有一个DOM元素并且想让它去做某件事。也就是命令式编程思想。 angula...

defcon 2019-08-21 16:18 评论0 收藏0
【译】《精通使用AngularJS开发Web App》（一） --- 相关背景、社区、工具介绍

摘要：下一篇译精通使用开发二原版书名第一章之道这一章主要是介绍，包括这个框架以及它背后的项目。幸运的是，拥有一个活跃的，支持度高的社区。另外，社区还为已经存在的工具箱里贡献了许多有意思的工具。下一篇：【译】《精通使用AngularJS开发Web App》（二）原版书名：Mastering Web Application Development with AngularJS Ch...

ddongjian0000 2019-08-19 14:26 评论0 收藏0
angular1.x和angular2+并行，angular1.x 升级 angular2+方案

摘要：可以在不必打断其它业务的前提下，升级应用程序，因为这项工作可以多人协作完成，在一段时间内逐渐铺开，下面就方案展开说明主要依赖提供模块。在混合式应用中，我们同时运行了两个版本的。这意味着我们至少需要和各提供一个模块。 angular1.x 升级 angular2+ 方案我给大家提供的是angular1.x和angular5并行，增量式升级方案，这样大家可以循序渐进升级自己的应用，不想看...

Olivia 2019-08-26 11:36 评论0 收藏0