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中注入$stateParamsconsole.log($stateParams.isScanning);