这里有新鲜出炉的 AngularJS 开发指南,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章主要记录了一些在学习和使用 angular.js 踩到的坑和需要注意的点,方便以后自己查阅,也给同样遇到这些问题的朋友们一些帮助,有需要的朋友们下面来一起看看吧。
前言
近期一直在玩 Angularjs,不得不说,相对于 Knockout,Angularjs 这一 MVVM 框架更强大,也更复杂,各种教程网上到处都是,不过真正用到项目的时候会遇到各种坑。
一、ng-repeat
ng-repeat 用于标识某个 elem 需要重复输出,同时重复输出的内容需为唯一
- <div ng-app="app" ng-controller="control">
- <h3 ng-repeat="content in repeatContent">
- ng-repeat: {{ content }}
- </h3>
- </div>
- let app = angular.module("app", []);
- app.controller("control", ($scope) => {
- // 输出李滨泓
- $scope.repeatContent = ["李", "滨", "泓"];
- // 下面存在两个"泓",会报错
- // $scope.repeatContent = ["李", "滨", "泓", "泓"];
- })
二、provider, service, factory 之间的关系
factory
factory 很像 service,不同之处在于,service 在 Angular 中是一个单例对象,即当需要使用 service 时,使用 new 关键字来创建一个(也仅此一个)service。而 factory 则是一个普通的函数,当需要用时,他也仅仅是一个普通函数的调用方式,它可以返回各种形式的数据,例如通过返回一个功能函数的集合对象来将供与使用。
定义:
- let app = angular.module("app", []);
- // 这里可以注入 $http 等 Provider
- app.factory("Today", () => {
- let date = new Date();
- return {
- year: date.getFullYear(),
- month: date.getMonth() + 1,
- day: date.getDate()
- };
- });
使用注入:
- app.controller("control", (Today) => {
- console.log(Today.year);
- console.log(Today.month);
- console.log(Today.day);
- });
service
service 在使用时是一个单例对象,同时也是一个 constructor,它的特点让它可以不返回任何东西,因为它使用 new 关键字新建,同时它可以用在 controller 之间的通讯与数据交互,因为 controller 在无用时其作用域链会被销毁(例如使用路由跳转到另一个页面,同时使用了另一个 controller)
定义:
- let app = angular.module("app", []);
- // 这里可以注入 $http 等 Provider
- // 注意这里不可以使用 arrow function
- // arrow function 不能作为 constructor
- app.service("Today",
- function() {
- let date = new Date();
- this.year = date.getFullYear();
- this.month = date.getMonth() + 1;
- this.day = date.getDate();
- });
使用注入:
- app.controller("control", (Today) => {
- console.log(Today.year);
- console.log(Today.month);
- console.log(Today.day);
- });
provider
provider 是 service 的底层创建方式,可以理解 provider 是一个可配置版的 service,我们可以在正式注入 provider 前对 provider 进行一些参数的配置。
定义:
- let app = angular.module("app", []);
- // 这里可以注入 $http 等 Provider
- // 注意这里不可以使用 arrow function
- // arrow function 不能作为 constructor
- app.provider("Today",
- function() {
- this.date = new Date();
- let self = this;
- this.setDate = (year, month, day) = >{
- this.date = new Date(year, month - 1, day);
- }
- this.$get = () = >{
- return {
- year: this.date.getFullYear(),
- month: this.date.getMonth() + 1,
- day: this.date.getDate()
- };
- };
- });
使用注入:
- // 这里重新配置了今天的日期是 2015年2月15日
- // 注意这里注入的是 TodayProvider,使用驼峰命名来注入正确的需要配置的 provider
- app.config((TodayProvider) => {
- TodayProvider.setDate(2015, 2, 15);
- });
- app.controller("control", (Today) => {
- console.log(Today.year);
- console.log(Today.month);
- console.log(Today.day);
- });
三、handlebars 与 angular 符号解析冲突
场景:
当我使用 node.js 作为服务端,而其中使用了 handlebars 作为模板引擎,当 node.js 对某 URL 进行相应并 render,由于其模板使用 {{}} 作为变量解析符号。同样地,angular 也使用 {{}} 作为变量解析符号,所以当 node.js 进行 render 页面后,如果 {{}} 内的变量不存在,则该个区域会被清空,而我的原意是这个作为 angular 的解析所用,而不是 handlebars 使用,同时我也想继续使用 handlebars,那么此时就需要将 angular 默认的 {{}} 解析符号重新定义。即使用依赖注入 $interpolateProvider 进行定义,如下示例:
- app.config($interpolateProvider => {
- $interpolateProvider.startSymbol('{[{');
- $interpolateProvider.endSymbol('}]}');
- });
四、ng-annotate-loader
ng-annotate-loader 应用于 webpack + angular 的开发场景,是用于解决 angular 在进行 JS 压缩后导致依赖注入失效并出现错误的解决方法
安装
- $ npm install ng-annotate-loader --save-dev
配置
- // webpack.config.js
- {
- test: /\.js?$/,
- exclude: /(node_modules|bower_components)/,
- loader: 'ng-annotate!babel?presets=es2015'
- },
五、双向数据绑定
当我们使用非 Angular 自带的事件时,$scope 里的数据改变并不会引起 $digest 的 dirty-checking 循环,这将导致当 model 改变时,view 不会同步更新,这时我们需要自己主动触发更新
- <div>
- {{ foo }}
- </div>
- <button id="addBtn">
- go
- </button>
JavaScript
- app.controller("control", ($scope) = >{
- $scope.foo = 0;
- document.getElementById("addBtn").addEventListener("click", () = >{
- $scope.foo++;
- },
- false);
- })
很明显,示例的意图是当点击 button 时,foo 自增长并更新 View,但是实际上,$scope.foo 是改变了,但是 View 并不会刷新,这是因为 foo 并没有一个 $watch 检测变化后 $apply,最终引起 $digest,所以我们需要自己触发 $apply 或者创建一个 $watch 来触发或检测数据变化
JavaScript(使用 $apply)
- app.controller("control", ($scope) = >{
- $scope.foo = 0;
- document.getElementById("addBtn").addEventListener("click", () = >{
- $scope.$apply(function() {
- $scope.foo++;
- });
- },
- false);
- })
JavaScript(使用 $watch & $digest)
- app.controller("control", ($scope) = >{
- $scope.foo = 0;
- $scope.flag = 0;
- $scope.$watch("flag", (newValue, oldValue) = >{
- // 当 $digest 循环检测 flag 时,如果新旧值不一致将调用该函数
- $scope.foo = $scope.flag;
- });
- document.getElementById("addBtn").addEventListener("click", () = >{
- $scope.flag++;
- // 主动触发 $digest 循环
- $scope.$digest();
- },
- false);
- })
六、$watch(watchExpression, listener, [objectEquality])
注册一个 listener 回调函数,在每次 watchExpression 的值发生改变时调用
watchExpression 在每次 $digest 执行时被调用,并返回要被检测的值(当多次输入同样的值时,watchExpression 不应该改变其自身的值,否则可能会引起多次的 $digest 循环,watchExpression 应该幂等)
listener 将在当前 watchExpression 返回值和上次的 watchExpression 返回值不一致时被调用(使用 !== 来严格地判断不一致性,而不是使用 == 来判断,不过 objectEquality == true 除外)
objectEquality 为 boolean 值,当为 true 时,将使用 angular.equals 来判断一致性,并使用 angular.copy 来保存此次的 Object 拷贝副本供给下一次的比较,这意味着复杂的对象检测将会有性能和内存上的问题
七、$apply([exp])
$apply 是 $scope 的一个函数,用于触发 $digest 循环
$apply 伪代码
- function $apply(expr) {
- try {
- return $eval(expr);
- } catch (e) {
- $exceptionHandler(e);
- } finally {
- $root.$digest();
- }
- }
使用 $eval(expr) 执行 expr 表达式
如果在执行过程中跑出 exception,那么执行 $exceptionHandler(e)
最后无论结果,都会执行一次 $digest 循环
总结
以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0503/331060.html