2014-04-21
angularjs学习笔记01
1.调用
为了使用angularjs，必须进行下面两件事
- 1.加载angularjs库
- 2.使用
ng-app告诉Angular应该管理的dom区域
第一点显而易见，不做评论，可以直接去网上下载一个。 第二点一般是直接声明在html标签上面，如下
<html ng-app>
…
</html>
但是由于页面上有别的库之类的写法，也可以写在某区域内，如
<html>
…
<div ng-app></div>
…
</html>
视图模块化
虽然可以直接用ng-app简单的声明Angular管理的区域，但是更加建议模块化处理，如新建一个叫myApp的模块，如下
<script>
var myAppModule = angular.module('myApp', []);
</script>
那么这样在声明ng-app的时候就可以这样写：
<html ng-app = 'myApp'>
…
</html>
2.MVC
看一个例子，如下
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
</head>
<body >
<div ng-controller = "textController" >
<p></p>
</div>
</body>
<script>
var myAppModule = angular.module('myApp', []);
myAppModule.controller('textController',function($scope) {
$scope.message = {someText:"Here is the text"};
});
</script>
</html>
页面声明整个HTML为一个myApp模块。
div中添加了属性ng-controller表示这个区域内使用的控制器（controller）。
脚本里面声明了textController方法，回调函数返回了一个变量$scope,$scope表示了整个ui层面的对象，比如在上面
中的就指向了$scope.message.someText。Angular中一个比较重要的特性就是页面上绑定的属性，都可用
$scope操作并且是双向绑定的。
这样在属性改变的时候可以直接反映到视图上面，而普通的页面要完成这种交互，通常要做许多操作。
看下下面的例子：
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
</head>
<body >
<div ng-controller = "textController" >
<input type="text" ng-model="message.someText" />
<p></p>
</div>
</body>
<script>
var myAppModule = angular.module('myApp', []);
myAppModule.controller('textController',function($scope) {
$scope.message = {someText:"Here is the text"};
});
</script>
</html>
上面的例子中，input上一个属性ng-model指向的就是下面p标签里面的值，当他发生改变时候，下面的p标签里面的文本也会相应改变，controller里面的$scope.message.someText也会随着改变。
在这里建议页面上可以多个controller，不同的交互新建多个不同的controller，更有可读性，并拥有不同的命名空间。
3.数据绑定和事件绑定
普通的文本绑定有两种方式
1.<p></p>
2.<p ng-bind = "message.someText"></p>
两者各有优势，第一个显而易懂，让人一看就明白，代码可读性好。但是当脚本加载慢的时候，用户可能会看到我们不期望他看到的（FOUC）。第二种方式反之。个人推荐第二种。
标签input
<input type = '' ng-model="message.someText" />
不同的type有不同的用法，普通的text就不说了，当type="checkbox"等类型的时候，ng-model绑定的值为true或者false的时候可以直接让他选中或者不选中。
事件绑定也可以直接写在标签上面，类似原生的事件，对于onclick，可以使用ng-click，对于ondblclick，可以使用ng-dblclick等等。如
<div ng-click = 'clickme()'></div>
当然，要在controller里面声明一下点击事件
$scope.clickme = function(){
alert('Dont click me !');
}
特别要注意的是src和href属性
当在 img 或者 a 标签进行数据绑定的时候，由于浏览器的优先使用并行方式加载图片能工作机制，Angular无法拦截这些动作，在这两类标签的绑定时候应该这么写
<img ng-src="/images/" />
<a ng-href="/caregory/" >点我</a>
4.循环
ng-repeat应该是Angular里面最有用的指令了，可以循环遍历生成html，如
<html>
...
<div ng-repeat="student in stuedents">
<p ng-bind="student.name"></p>
<p ng-bind="student.id"></p>
</div>
...
</html>
脚本的$scope需要写一下students
myAppModule.controller('textController',function($scope) {
$scope.stuedents = [{
name: 'Tom',
id: 1
},{
name: 'Leo',
id: 2
},{
name: 'Jim',
id: 3
}];
});
ng-repeat会生成标签内部所有html的一份拷贝。
除了这个之外，np-repeat指令还可以通过$index获取当前引用的元素的序号，还有布尔值 $first,$last,$middle告诉你元素是不是集合中的第一个元素、中间元素或者最后一个元素
施桢屹 2014.04.21
-->