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

Zhenyi's blog