使用Angular.js开发的注意事项  更新时间:2016年10月19日 14:50:44   投稿:daisy   这篇文章主要记录了一些在学习和使用angular.js踩到的坑和需要注意的点,方便以后自己查阅,也给同样遇到这些问题的朋友们一些帮助,有需要的朋友们下面来一起看看吧。 前言 近期一直在玩Angularjs,不得不说,相对于Knockout,Angularjs这一MVVM框架更强大,也更复杂,各种教程网上到处都是,不过真正用到项目的时候会遇到各种坑。 一、ng-repeat ng-repeat 用于标识某个 elem 需要重复输出,同时重复输出的内容需为唯一 ng-repeat: {{ content }} 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 不会同步更新,这时我们需要自己主动触发更新 HTML {{ foo }} go 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 循环 总结 以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。 您可能感兴趣的文章: 学习Angular中作用域需要注意的坑 Angular.js与Bootstrap相结合实现表格分页代码 浅谈angular.js中实现双向绑定的方法$watch $digest $apply Angular.js如何从PHP读取后台数据 总结十个Angular.js由浅入深的面试问题 Angular.js回顾ng-app和ng-model使用技巧 Angular.js与Bootstrap相结合实现手风琴菜单代码 Angular.js 实现数字转换汉字实例代码 angular.js之路由的选择方法 angular.js分页代码的实例 angular.js 开发 相关文章 AngularJS使用ocLazyLoad实现js延迟加载 这篇文章主要介绍了AngularJS使用ocLazyLoad实现js延迟加载的相关资料,需要的朋友可以参考下 2017-07-07 详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0 本篇文章主要介绍了详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0,具有一定的参考价值,有兴趣的可以了解一下 2017-05-05 Angular 5.0 来了! 有这些大变化 Angular 5.0 来了! 有这些重大变化,这篇文章就为大家介绍了Angular 5.0大变化,感兴趣的小伙伴们可以参考一下 2017-11-11 AngularJS入门教程之学习环境搭建 这篇文章主要介绍了AngularJS入门教程之学习环境搭建,本教程将指导您完成一个简单的应用程序创建过程,包括编写和运行单元测试、不断地测试应用,需要的朋友可以参考下 2014-12-12 AngularJS学习笔记之TodoMVC的分析 这篇文章主要介绍了AngularJS学习笔记之TodoMVC的分析的相关资料,需要的朋友可以参考下 2015-02-02 Angular中响应式表单的三种更新值方法详析 这篇文章主要给大家详细解析了关于Angular中响应式表单的三种更新值方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。 2017-08-08 浅谈Angular 观察者模式理解 这篇文章主要介绍了浅谈Angular 观察者模式理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-11-11 angularjs实现柱状图动态加载的示例 本篇文章主要介绍了angularjs实现柱状图动态加载的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-12-12 angular的输入和输出的使用方法 这篇文章主要介绍了angular的输入和输出的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-09-09 详解Angular路由之子路由 本文将介绍Angular子路由的用法,对此感兴趣的同学,可以参考下 2021-05-05 最新评论

前言

近期一直在玩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 不会同步更新,这时我们需要自己主动触发更新

HTML

<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 循环

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

您可能感兴趣的文章:

  • 学习Angular中作用域需要注意的坑
  • Angular.js与Bootstrap相结合实现表格分页代码
  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply
  • Angular.js如何从PHP读取后台数据
  • 总结十个Angular.js由浅入深的面试问题
  • Angular.js回顾ng-app和ng-model使用技巧
  • Angular.js与Bootstrap相结合实现手风琴菜单代码
  • Angular.js 实现数字转换汉字实例代码
  • angular.js之路由的选择方法
  • angular.js分页代码的实例
张贴在3