使用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 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
js中typeof的用法汇总
Dec 12 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
面包屑导航详解
Dec 07 Javascript
vue实现微信分享功能
Nov 28 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 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增删改查示例自己写的demo
2013/09/04 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
Prototype Template对象 学习
2009/07/19 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
python字符类型的一些方法小结
2016/05/16 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
python爬虫---requests库的用法详解
2020/09/28 Python
Python字典实现伪切片功能
2020/10/28 Python
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
执行力心得体会
2013/12/31 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
军训教官感言
2014/03/02 职场文书
党员公开承诺事项
2014/03/25 职场文书
运动会方阵口号
2014/06/07 职场文书
python数字类型和占位符详情
2022/03/13 Python
TV动画《间谍过家家》公开PV
2022/03/20 日漫
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang