angularjs总结整理

一、angular介绍

1、angular是Google公司提供的一套基于MVC结构的js开发工具，其核心功能就是对现有html编码以指令方式进行扩展，并使其通过使用元素声明的方式来构建动态内容。
2、为实现上述目的，angular利用 了两项技术点：双向绑定和依赖注入

二、适用范围

angular是构建一个MVC类结构的js库，建议在构建CRUD应用时使用它。对于图形编辑、游戏开发不建议使用。

三、控制器

1、控制器功能是管理页面的逻辑代码。任务就是操作$scope对象。
2、当ng-controller指令被添加到dom页面上时，angular通过构造函数生成实体对象时，$scope注入其中，$scope与页面元素进行数据绑定，实现数据从控制器到视图层。
3、控制器是纯 Javascript 构造函数，所以应该用首字母大写的驼峰命名法（HomePageCtrl, ShoppingCartCtrl, AdminPanelCtrl, 等等）。
4、使用 数组定义语法声明控制器，如下

function MyCtrl($scope) {}
var myModule = angular.module('myModule',[])
myModule.controller('MyCtrl',['$scope',MyCtrl])

5、使用 controller as 语法:

   {{ main.title }}

app.controller('MainCtrl', MainCtrl);
function MainCtrl () {
  this.title = 'Some title';
}

使用 controller as 主要的优点是:

• 创建了一个“独立”的组件——绑定的属性不属于 $scope 原型链。
• Scope值的改变会在你不注意的地方有影响。
• 难以重构。
• 语法上更接近于普通的 JavaScript 构造函数。
  请看: digging-into-angulars-controller-as-syntax
  6、不要在控制器中写业务逻辑，业务逻辑交给模型层的服务。
  // 这是把业务逻辑放在控制器的常见做法

angular.module('Store', [])
.controller('OrderCtrl', function ($scope) {
  $scope.items = [];
  $scope.addToOrder = function (item) {
    $scope.items.push(item);//-->控制器中的业务逻辑
  };
  $scope.removeFromOrder = function (item) {
    $scope.items.splice($scope.items.indexOf(item), 1);//-->控制器中的业务逻辑
  };
  $scope.totalPrice = function () {
    return $scope.items.reduce(function (memo, item) {
      return memo + (item.qty * item.price);//-->控制器中的业务逻辑
    }, 0);
  };
});

当你把业务逻辑交给模型层的服务，控制器看起来就会想这样：（关于 service-model 的实现，参看 'use services as your Model'）:
// Order 在此作为一个 'model'

angular.module('Store', [])
.controller('OrderCtrl', function (Order) {
  $scope.items = Order.items;
  $scope.addToOrder = function (item) {
    Order.addToOrder(item);
  };
  $scope.removeFromOrder = function (item) {
    Order.removeFromOrder(item);
  };
  $scope.totalPrice = function () {
    return Order.total();
  };
});

为什么控制器不应该包含业务逻辑和应用状态？
①控制器会在每个视图中被实例化，在视图被销毁时也要同时销毁
②控制器是不可重用的——它与视图有耦合
③Controllers are not meant to be injected
7、有内嵌的控制器时使用 "内嵌作用域" ( controllerAs 语法)：

app.js
module.config(function ($routeProvider) {
  $routeProvider
    .when('/route', {
      templateUrl: 'partials/template.html',
      controller: 'HomeCtrl',
      controllerAs: 'home'
    });
});
HomeCtrl
function HomeCtrl() {
  this.bindingValue = 42;
}
template.html

四 模板

1、避免在模板中使用复杂的表达式。
2、当需要动态设置 的 src 时使用ng-src而非 src中嵌套 {{}} 的模板。href同理。
3、通过 ng-style 指令配合对象式参数和scope变量来动态设置元素样式，而不是将 scope变量作为字符串通过 {{ }} 用于 style 属性。

hello world
;

4、添加元素样式

$scope.a=true;
$scope.b=false;

$scope.blnfocus=true;

列表中还有ng-class-odd 和 ng-class-even
简单例子：

    {{stu.name}}
    {{$first?'是':'否'}}
    {{$last?'是':'否'}}

$scope.li_click = function (i) {
    $scope.focus = i;
}

css中需要加入.odd .even .focus
5、元素显示隐藏ng-show ng-hide ng-switch(ng-switch-when ng-switch-default)

五 过滤器

1、orderby

按分数降序排列，只显示3条
2、匹配方式过滤filter
{{数据|filter:匹配项}}
匹配项可以是字符串、对象和函数

$scope.findscore = function (ｅ)｛
　　return e.score>85 && e.score<90;
｝

3、在需要格式化数据时将格式化逻辑封装成 过滤器 并将其声明为依赖
自定义过滤器

module.filter('young',function(){
    return function (e,type) {
        var _out = [];
        var _sex = type ? "男":"女";
        for (var i = 0;i 22 && e[i].age<28 && e[i].sex == _sex)
    _out.push(e[i]);    
        }
        return _out;
    }
})

在controller中注入自定义的filter

function MyCtrl($scope, young){
}
module.controller('MyCtrl', MyCtrl);

4、重要应用
①表头排序

    姓名
    分数


    {{stu.name}}
    {{stu.score}}

$score.title = 'name'
$score.desc = 0

②字符查找

    {{stu.name}}
    {{stu.score}}

六 作用域

作用域是控制器与视图的桥梁，也是指令与视图的桥梁
1、提供$watch方面监听数据模型变化(ng-model双向绑定)

$scope.$watch('key',function(){
    //...
})

2、子级可继承父级作用域全部属性和方法
同级不可以相互访问属性和方法
3、两种方式实现作用域通信
①在作用域间创建一个单例的服务
②事件:只能父子相传，同级接受不到

$broadcasted(eventname,data) 父到子
$emitted(eventname,data) 子到父
$on(eventname,function(event,data)){
//
}

在作用域监听传播来的事件并获取相应的数据

七 依赖注入

1、当在代码中声明了依赖关系后，Angular通过injector注入器将所依赖的对象进行"注入"操作
2、config函数为定义的模板对象注入依赖的各种服务，除了用于注册控制器的controllerProvider服务外，还有provide服务，它包含了几个重要方法provider,factory,service,value
3、依赖注入标记
①标记式注入
调用$injector属性来完成，字符型数组，一定要按注入方式的顺序来

var MyCtrl = function($scope,$window,$show);
MyCtrl.$inject=[$scope,$window,$show]

②行内式注入
将一个字符型数组作为对象参数，最后一个是函数体，其余是注入对象中的服务名，它们顺序与函数体参数一一对应

module.controller('MyCtrl',[$scope,$window,function($scope,$window){
    // ...
}])

4、依赖注入应用场景
①构建控制器:上述标记式注入
②工厂方法：类似'config','factory','directive','filter'等构造性质的方法

八 angular服务

1、内置服务：$scope,$http,$window,$location
2、创建angular服务，除了调用$provide服务，还可以直接调用模块中的factory、service、constant和value等方法来创建。
3、把业务逻辑封装到服务中，把业务逻辑抽象为服务作为你的model。例如：

//Order is the 'model'
angular.module('Store')
.factory('Order', function () {
    var add = function (item) {
      this.items.push (item);
    };
    var remove = function (item) {
      if (this.items.indexOf(item) > -1) {
        this.items.splice(this.items.indexOf(item), 1);
      }
    };
    var total = function () {
      return this.items.reduce(function (memo, item) {
        return memo + (item.qty * item.price);
      }, 0);
    };
    return {
      items: [],
      addToOrder: add,
      removeFromOrder: remove,
      totalPrice: total
    };
});

如果需要例子展现如何在控制器中使用服务，请参考 'Avoid writing business logic inside controllers'。

九 使用promise而非回调

1、处理异步编程的模式，可以有效解决回调的繁琐，以一种同步的方式去处理业务逻辑。
2、想要在angular中创建promise对象，必须在模板中注入$q服务，并先调用defer方法创建一个延期对象。

var defer = $q.defer()

defer是一个延期对象，它包含3个方法notify、resolve、reject和promise对象
promise对象有一个then方法

promise.then(successCallback,errorCallback,notifyCallback)

3、实例

module.factory("async",function($q,$http){
    var defer = $q.defer();
    $http.get('data/asycn')
    .success(function(data){
        defer.resolve(data);
    })
    .error(function(reason){
        defer.reject(reason) ; 
   })
    return defer.promise;
})
.controller("MyCtrl",function($scope,async){
    var promise = async;
    promise.then(function(resp){
        $scope.result = "成功"+resp;
    },function(n){
        $scope.result = "失败"+n;
   })
})

十 注意事项

1、调用element方法控制dom元素

angular.element(document.getElementById("control")).append(newhtml)

2、setTimeout无效，调用$timeout服务
在angular中，大部分操作之后的效果都是由$apply方法自动在页面完成，若调用非angular中方法，系统不会调用$apply方法在页面中同步操作结果
3、{{}}闪烁问题
使用ng-bind ng-cloak

{{message}}

4、使用track by排序ng-repeat中的数据
5、释放多余的$watch检测函数，再次调用$watch就可释放它的检测功能

$scope.stopWatch = function() {
    contentWatch();
}
var contentWatch = $scope.$watch('content',function(newVal,oldVal){
    if(newVal===oldVal){return;}
   $scope.count++;
})

6、ng-if中ng-model值无效

参考：https://github.com/mgechev/angularjs-style-guide/blob/master/README-zh-cn.md
angularjs实战