使用Angular.js开发的注意事项


Posted in Javascript onOctober 19, 2016

前言

近期一直在玩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 循环

总结

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

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
javascript常用代码段搜集
Dec 04 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
js表单登陆验证示例
Oct 19 #Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 #Javascript
Angular和百度地图的结合实例代码
Oct 19 #Javascript
Bootstrap Table使用方法解析
Oct 19 #Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 #Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 #Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 #Javascript
You might like
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
理解javascript正则表达式
2016/03/08 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
js表单登陆验证示例
2016/10/19 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
使用Python读取大文件的方法
2018/02/11 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
python实现祝福弹窗效果
2019/04/07 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
国际残疾人日广播稿范文
2014/10/09 职场文书
史上最牛辞职信
2015/05/13 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
Java实现房屋出租系统详解
2021/10/05 Java/Android
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript