AngularJS入门
## AngularJS是什么？ ##
AngularJS是一个前端JavaScript框架，背后有Google支持。这个框架最早是09年发布的，随后发展迅速，尤其是最近，流行度很高。和其他框架不同，AngularJS有很多独特的特性，使得其非常与众不同。考虑到本人的文章多写的逻辑混乱，如果你对AngularJS不了解，推荐你先去其[官网](http://www.angularjs.org)看看。对于我来说，最吸引我的两个特性是双向绑定以及依赖注入。前者免去了开发时显示的刷新DOM，能让开发者更专注在逻辑上，而后者则使得测试以及集成变得非常方便。
### Hello，World ###
先来看一个经典的Hello World。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script>
function HelloController($scope) {
$scope.person = {
name: "World"
} $scope.sayHelloWorld = function() {
alert($scope.person.name);
}
</script>
</head>
<body ng-app>
<div ng-controller="HelloController">
<input type="text" ng-model="person.name" />
<button ng-click="sayHelloWorld()"></button>
</div>
</body>
</html>
### Controller ###
在Angular中，Controller主要负责初始化scope，包括数据以及所需要的函数。上面的HelloController就是个典型的Controller，另外一种更加强大的定义方式允许你声明所依赖的模块。
var controllers = angular.module('demo.controllers');
controllers.controller("demoController", ['$scope', '$http', function($scope, $http) {
$scope.test_data = {
value: 'test data'
};
$scope.test_function = function() {
alert("test function");
};
}]);
Controller比较直观，需要注意的有两个地方，一是使用$watch关注某个表达式的值，当发生变化时做相应操作，二是使用外部库操作数据，需要使用apply通知angular，不然的话很有可能外部库更新了数据，但angular却没有做相应更新。
### Directive ###
在前端开发中，经常需要操作DOM，而且有时候需要使用一大堆HTML来构建一个常用的组件，例如Google+信息流中的一条信息，在Angular中这都属于Directive的作用，这也就意味着在Controller中操作DOM是个错误的做法。
通常情况下，Directive定义时采用CamelCase规则进行命名，而在使用时则使用横线进行分隔。
Directive的定义
var directives = angular.module('demo.directives', []);
directives.directive('customDirective', function() {
return {
restrict: 'ECMA',
template: '<nav></nav>',
templateUrl: 'directive.html',
replace: false,
priority: 0,
transclude: false,
scope: false,
terminal: false,
require: false,
controller: function(scope, element, attrs, transclude, otherInjectables {},
compile: function(element, attrs, transclude) {
return {
pre: function preLink(scope, element, attrs, controller) {},
post: function postLink(scope, element, attrs, controller) {}
};
},
link: function(scope, element, attrs) {
}
};
});
restrict: 指定了directive的使用形式，共有四种：
1. Element（restrict定义时的E）
2. Attribute（restrict定义时的A）
3. Class（restrict定义时的C）
4. Comment（restrict定义时的M）
compile：在directive中如果需要对DOM元素进行处理，基本都是在这个函数中进行。仔细看这个函数，compile并不能访问scope，
link：此函数的主要作用就是对DOM和scope做数据绑定。和compile不同，在这个函数中，已经可以访问scope了。
template和templateUrl：用于指定directive对应的模板，前者直接使用字符串定义模板，而后者则通过url链接外部模板文件。在模板中可以使用对应controller或者rootScope中的scope，当然也有例外，具体请看关于scope的解释。
replace：指定是否使用模板替换directive作用的DOM元素。
priority：指定优先级，angular在处理directive时，会将页面出现的所有directive按优先级排序，一般这个数值都是不指定的。
controller：directive对应的controller，通常用于directive之间的通信。在这个函数中，所有绑定到this上的变量，其他的directive都能通过使用require来进行访问。
require：通过指定某个directive的名字，来访问其对应的controller。其中以？作为前缀时，如果找不到此directive将报错，而以^为前缀，将会在父元素进行递归查找，可以使用数组来引入多个directive，如['directive1','directive2','directive3']
scope：用于指定当前directive所对应的scope，不同的取值之间的影响非常大。
1. false：此时directive与父元素共享scope
2. true：此时directive有自己的scope，该scope继承父元素所对应的scope
3. isolate：directive有自己的scope，该scope不会继承自父元素对应的scope，但是仍然可以通过scope.$parent访问父节点的scope。这不是一个推荐的做法，因为这样就对父元素进行了限制，影响了directive的使用范围。如果想在父子元素之间共享数据，可以明确指定那些元素需要父子之间共享。方法共有三种：
使用@将父级scope中的属性绑定到本地scope中，单向绑定，这个值总是字符串，在template中需要使用{{}}
使用=同上，只不过这里是双向绑定，在template中可以直接给出父级scope的属性名称
使用&用于倒入函数或者表达式
transclude：用于控制是否要将该directive的子元素添加到模板中ng-tranclude指定的元素之下
### Service ###
在Angular中，Service是一些提供常见功能的单例对象。诸如上面出现$http等，其使用也是比较简单的，只要在使用时声明这个依赖就可以了，例如上面的demoController。其定义方式主要有一下几种：
1. service只是简单的数值可以使用constant（name，value）进行注册，如果时已经存在的对象，可以使用value（name，value）进行注册
var services = angular.moudle('demo.services', []);
services.constant('number', 42);
services.constant('string', 'string');
var existingService = {
notify: function(msg) {
alert(msg);
}
};
services.value('notify', existingService);
2. 注册一个service构造函数
services.service('demoService2', function() {
this.func = function() {
};
});
3. 注册一个工厂函数用于创建service实例，这种方式可以在创建服务实例之前做些处理
services.factory('demoService1', function(msg) {
// some processing code
return {
func: function() {
}
};
});
4. 使用provider，使用这种方式，复杂一点，但是好处是可以对service进行配置。
services.provider('demoService3', function() {
this.value = "string";
this.$get = function() {
var value = this.value;
return {
print: function() {
console.log(value);
}
}
}
this.setValue = function(value) {
this.value = value;
}
});
// 使用config可以对provider进行配置
services.config(function(demoService3Provider) {
demoServiceProder.setValue('hello');
});
当然，创建服务也是可以声明依赖的，具体格式和controller类似，不再罗嗦。
Angular还所有很多概念，包括router和filter等，我很少用到，没有细研究过。
AngularJS入门的更多相关文章
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- AngularJS入门心得3——HTML的左右手指令
在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- （一）Angularjs - 入门
AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手 ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分 ng-model: 这个指定定义并绑定Ang ...
- AngularJS入门教程：日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- 《AngularJS入门与进阶》图书简介
一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】
事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...
随机推荐
- 几篇关于VisualStudio的调试工具文章
现代的软件变得日益复杂,强大的调试功能也变得日益重要起来.在VisualStudio的最近几个版本中,在调试工具方面也是增强了不少的,本文转录了几个微软官方介绍的一些新增的调试功能的文章,如果能很好的 ...
- markdown 的基本操作
文档 http://mux.alimama.com/posts/620?spm=0.0.0.0.4VVnvp http://www.jianshu.com/p/1e402922ee32/ MdChar ...
- 样式link属性media用法--媒体类型查询
引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...
- 编程范式 episode 6 实现stack 栈功能_ to do
//既然在这里开始,那就在这里结束. 实现stack 功能 ____coding _using subfunction to focus on the main aim of current func ...
- bs4的学习
soup = BeautifulSoup(html,'html.parser') #'html.parser'是html解析器必须有soup.find_all("a") #等价于 ...
- sendEmail的使用
坑!坑!坑!今天又弄了一天如何发送邮件,首先用sendmail,postfix.....等,都试过了,各种报错,然后就从早上弄到现在,在群里问问题的时候,一位好心的大哥说了他用的是sendEmail, ...
- linux系统man命令用法和安装方法
Linux提供了丰富的帮助手册,当你需要查看某个命令的参数时不必到处上网查找,只要man一下即可. Linux的man手册共有以下几个章节: 代號 代表內容 1 使用者在shell中可以操作的指令或可 ...
- [整理]PCB阻抗控制
之前一直听说PCB设计中信号完整性及阻抗方面的要求,但是本人对此还是有很多的不了解,每次和别人讨论到这里后就不知道该怎么继续就这个问题交谈下去.正巧最近手头有一点工作有这方面的一些需求,就拿来花了一点 ...
- 奇怪的margin，padding，table
为什么有的时候margin,padding不管用?写了float以后就管用了? 为什么table 不给width,就默认是100%,里面的td会平均分配teble的宽度,若你想给其中一些td宽度,剩下 ...
- Activity生命周期（二）
------siwuxie95 在项目 ActivityLifeCircle 的 MainActivity.java 中添加方法: onCreate() onStart() onResume() ...