一．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简单教程
网友评论