Angular概述

2016-03-30 本文已影响265人 Addy_Zhou

一．angularJs

AngularJS简化应用开发的一个重要方法是，将一个些通用的低级开发操作包装起来提供给开发者。AngularJS会自动处理好这些低级操作。它们包括：
1.DOM操作
2.设置事件的监听
3.输入验证，因为AngularJS会处理大部分这些操作，所以开发者就能更多的专注在应用的业务逻辑上，更少地编写那些重复性的、易错的、低级的代码。

二. angularJs依赖注入机制

服务的声明方式factory、 service 和 provider

$provide.provide(‘name’,function());
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
2.factory(‘name’,function);
```
   mainApp.factory('MathService', function() {   
   var factory = {}; 
   factory.multiply = function(a, b) {
      return a * b; 
      }
     return factory;
   }); 
```

3.service(‘name’,function);
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});

provider 的特殊之处就是可以在 module 启动时进行配置(config方法)，从而达到特殊的用途，比如在上面的 provider 中可以添加一个init方法，可以在启动时调用这个方法，进行一些额外的初始化工作

控制器controller的定义

4.controller(‘name’,function);

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
     $scope.number = defaultInput;
     $scope.result = CalcService.square($scope.number);

     $scope.square = function() {
     $scope.result = CalcService.square($scope.number);
   }
 });

图1. AngularJs的api模型

QQ图片20160330172034.png

(1) 为什么需要依赖注入？

Class  A{
   Public void work_a(){
  }
}
Class  B{
  Private A a=new A();
  Public void work_b(){
       a.work_a();
 }
}

当修改A，比如修改A的类名，会要修改B;违背两个独立的单元，高内聚低耦合的原则；
B中的new A 是主要原因；
通过工厂来new A;
通过容器来存放管理A的示例；
通过注入来组合关联每个单元；

(2) Angular的依赖注入机制

图2. angularJs的内存模型

QQ图片20160330121527.png

三. angularJs写法建议

一个最简单的模块由两类代码块集合组成的：

配置代码块 - 在注入提供者注入和配置阶段执行。只有注入提供者和常量可以被注入到配置块中。这是为了防止服务在被配置好之前就被提前初始化。

运行代码块 - 在注入器被创建后执行，被用来启动应用的。只有实例和常量能被注入到运行块中。这是为了防止在运行后还出现对系统的配置。

代码实现：

 angular.module('myModule', []).  
 config(function(injectables) { // provider-injector 配置代码块
       // This is an example of config block.
       // You can have as many of these as you want.
       // You can only inject Providers (not instances)
       // into the config blocks.
  }). run(function(injectables) { // instance-injector 运行代码块
        // This is an example of a run block.
        // You can have as many of these as you want.
        // You can only inject instances (not Providers)
        // into the run blocks
  });

模块还有一些配置的简便方法，使用它们的效果等同于使用代码块。举个例子：

  angular.module('myModule', []).
  value('a', 123).
  factory('a', function() { return 123; }).
  directive('directiveName', ...).
  filter('filterName', ...);
  // is same as
 angular.module('myModule', []).
 config(function($provide, $compileProvider, $filterProvider) {
      $provide.value('a', 123)
      $provide.factory('a', function() { return 123; })
      $compileProvider.directive('directiveName', ...).
      $filterProvider.register('filterName', ...);
 });

配置块会按照$provide, $compileProvider, $filterProvider，注册的顺序，依次被应用。唯一的例外是对常量的定义，它们应该始终放在配置块的开始处。

 <!doctype html>
 <html ng-app="xmpl">
 <head>
     <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
     <script src="script.js"></script>
 </head>
 <body>
     <div ng-controller="XmplController">
           {{ greeting }}!
     </div>
 </body>
 </html>

 script.js:
 angular.module('xmpl.service', []).   //服务模块
 value('greeter', {    //自定义greeter对象
    salutation: 'Hello',
    localize: function(localization) {
    this.salutation = localization.salutation;
 },
 greet: function(name) {
    return this.salutation + ' ' + name + '!';
 }
}).
 value('user', {   //自定义user对象
    load: function(name) {
    this.name = name;
    }
 });
 angular.module('xmpl.directive', []);  //指令模块
 angular.module('xmpl.filter', []);   //过滤器模块
 angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).  //模块xmpl依赖于数组中的模块
 run(function(greeter, user) {
     // 初始化代码，应用启动时，会自动执行
  greeter.localize({
       salutation: 'Bonjour'
  });
  user.load('World');
 })
 // A Controller for your app
 var XmplController = function($scope, greeter, user) {
      $scope.greeting = greeter.greet(user.name);
  }

Angular start项目

https://github.com/unnKoel/angular-background-start
我制作的基于Angular开发后台管理系统的start项目;
可以作为后台管理系统模板来使用，也可以作为Angular的例子来参考;

四.参考

https://angularjs.org/ AngularJS官网

理解AngularJs参考
http://www.zhihu.com/question/22284218 AngularJs在实践中的优缺点
http://www.jb51.net/article/60505.htm AngularJS中的模块详解
http://blog.csdn.net/renfufei/article/details/19038123 AngularJS中的依赖注入
http://ju.outofmemory.cn/entry/121904 AngularJS 中的 factory、 service 和 provider

应用实践AngularJs参考
http://www.angularjs.cn/tag/AngularJS AngularJs入门教程
http://www.runoob.com/angularjs/angularjs-tutorial.html AngularJs简单教程