angular使用总结

一．是否有必要加入模块化框架

1.Reqruiejs seajs的主要作用

（1）模块化，让代码易于维护。

1. angular本身就是mvc，模块化很清晰，所以这点用不到requirejs

（2）可以按需、并行、延时载入js库

1. 当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);