angular使用总结
一．是否有必要加入模块化框架
1.Reqruiejs seajs的主要作用
（1）模块化，让代码易于维护。
- angular本身就是mvc，模块化很清晰，所以这点用不到requirejs
（2）可以按需、并行、延时载入js库
- 当js文件比较多时，angular会一次请求所有的js文件，浪费流量，此时模块化框架就很有必要了。
2.http://www.cnblogs.com/kenkofox/p/4643760.html（浅谈HTML5单页面架构（一）——requirejs + angular + angular-route
二．是否有必要加入jquery
1.dom操作：angular推荐dom操作在自定义指令里面，在controller里面操作dom对性能有影响，angular自带jqlite对一般的dom操作足够用。
2.Bootstrap依赖jquery：可以用Bootstrap的css功能加angular-ui的js组件。
3.http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background（介绍为什么angular不需要引入jquery）
三．性能优化
1.dom操作，尽量不要在controller里操作都没，有dom操作的尽量在自定义指令的link函数中。
2.$scope.$apply()vs$scope.$apply(function(){})
DOM事件、setTimeout、XHR时必须需要调用。
function$apply(expr) {
try {
return$eval(expr);
} catch(e) {
$exceptionHandler(e);
} finally {
$root.$digest();
}
}
复制代码它会捕获所有的异常并且不会再抛出来，最后都会调用$digest()方法。
总之尽量使用$scope.$apply(function(){})
3.ng-show vs ng-if
Ng-show 单纯的隐藏dom元素 ng-if清楚dom元素，ng-if性能要好一些。
4.ng-repeat
Error: [ngRepeat:dupes]
.当数组中有两个以上数字重复时会报这个错，可以通过item in items track by $index解决
当数组部分数据发生变化时，如果没有track by，angular会刷新和此数据有关的所有dom元素，而加了track by后angular只会刷新数据有变化的dom元素，减少不必要渲染。
5.减少不必要的双向绑定，最好不要超过2000个数据双向绑定。{{:: mes}}
6.减少事件广播，使用双向数据绑定或共享service等方法来代替。
7.http://ourjs.com/detail/54a0b5cd71caa3b40a000001（angular在AngularJS在大型单页面应用中的性能优化）
四．遇到的坑
1.路由
虚拟路由a下子路由b的变化不能控制和a一级的ui-view中的内容。
2.点击某个标签控制路由跳转有两种方式如下
（1）通过a标签的href属性跳转 <a href="#cart">购物车</a>
（2）通过ui-router的方式跳转 <a ui-sref="cart">购物车</a>
两种在router.js做如下编码都可以跳转
$stateProvider
.state("cart", {
url: "/cart",
templateUrl: "template/cart.html",
})；
但是当改变router.js中url为“/cart1”时第一种跳转方式失效，第二种依然可以跳转。原因是第一种只能对应固定的url。第二种是对象cart这个状态。所以在实际应用中不要使用第一种跳转方式。
3.controller中的代码执行两遍，原因是在模板和路由中同时设定了controller，如下。
//cart.html <div ng-controller="cartCtr">我是购物车模板文件</div>
//router.js
$stateProvider
.state("cart", {
url: "/cart",
templateUrl: "template/cart.html",
controller:"cartCtr"
})；
4.开发环境vs生产环境
（1）.开发环境下如果使用压缩版的angular如果某个js文件报错很难找到，所有开发环境下务必使用未压缩版本。
（2）.上线应该用gulp对代码进行压缩混淆合并等处理，减小文件体积，减少跟服务器请求资源的次数。
未完待续
自定义鼠标右键指令
//指令里面
angular.directive('myRightClick', function($parse) { return function(scope, element, attrs) { element.bind('mousedown', function(event) { if(event.button==2){ scope.$eval(attrs.myRightClick); } }); }; });
//html
<div my-right-click="fn()"></div>
//controller
$scope.fn=function(){
console.log(111);
}
5.$state 传参
//路由配置时加上params参数
$stateProvider.state('login', {
url: '/login',
params:{'isScanning':false},
views: {
'webIndexView': {
templateUrl: 'pages/login.view.html',
controller: 'loginController'
}
}
})
//跳转路由时
$state.go('login',{'isScanning':true});
//controller中注入$stateParams
console.log($stateParams.isScanning);
