刚开始学习Angularjs，以前也没有写过博客啥的，这次就在这里记录下自己的学习过程，看看学习效果会不会更好，希望自己能坚持写下去。
一、介绍Angular
angularjs是谷歌推出的一个基于MVC的前端框架，利用双向数据绑定可以减少代码量，快速展示页面的变化。新手也还处于懵逼的阶段，就不啰啰嗦嗦了，总之谷歌出品，必然强大。
Angularjs官网 （小心城墙太高）。
二、第一个Hello World程序
作为一个程序员，第一个程序当然要从Hello World开始啦！下面就开始上代码：
<pre>
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body >
{{"Hello World"}}
<script src="../scripts/angular-1.4.0-rc.2/angular.min.js"></script>
</body>
</html>
</pre>
- 在这个小程序中，我们引入了1.4.0-rc.2版本的angular
- 在html标签中,添加了一个ng-app
ng-app表示angularjs的程序入口，angular在ng-app标签范围内执行，也就是说在此程序中angular可以在整个html标签范围内执行。以此类推，若ng-app添加在body中或者某个div中，则angular只能在body或此div中执行，范围以外的地方即使写了angular语法也不起作用。 - 在body中有一个{{"Hello World"}}
angularjs中使用两个大括号 {{ <small>表达式</small> }} 执行数据绑定，此处的表达式可以是字面量、angular变量、运算表达式，此处的表达式是一个字符串字面量“Hello World”
结果图
三、添加一个控制器
angular既然是MVC模型，那自然是离不开controller的了，controller是model和view之间的桥梁，控制数据在应用程序中的传递以及程序的逻辑。angular控制器采用ng-controller指令定义，每个控制器接受$scope参数。
<pre>
<!DOCTYPE html>
<html lang="en" ng-app="HelloWorld">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
{{"Hello World"}}
<div ng-controller="HelloController">
{{say}}
</div>
<script src="../scripts/angular-1.4.0-rc.2/angular.min.js"></script>
<script >
var hello=angular.module("HelloWorld",[]);
hello.controller("HelloController",["$scope",function($scope){
$scope.say="Hello,welcome to Angular world";
}]);
</script>
</body>
</html>
</pre>
这段代码和上面代码有几处不同：
- 在底部添加了一行var hello=angular.module("HelloWorld",[]);
此句话的意思是定义一个模块，注意模块的名字并不是hello，而是HelloWorld，module函数的第一个参数，第二个参数是一个数组，里面用于定义这个模块的依赖项 - hello.controller()就是定义一个名为HelloController的控制器，请注意这个控制器是属于模块hello的，第二个参数也是一个数组，里面的函数就是控制器的主体，参数必须是$scope。其实第二个参数也可以只写一个函数：
<code>hello.controller("HelloController",function($scope){
$scope.say="Hello,welcome to Angular world";
});
</code>
但是这样写有一个问题，由于$scope并不是我们定义的，它是angular内置，利用依赖注入作用于控制器内，所以当用这种方法书写时，js经过压缩后就不认识$scope了，致使程序出错，关于依赖注入现在也不理解，慢慢学吧。
总之，我们就采用代码块中的方法定义控制器就最好了，标准不会出问题 - ng-app=“HelloWorld”、ng-controller="HelloController",{{say}}
定义好了module、controller当然就要去使用，ng-app是angular程序的开始，也就是一个模块，此处表示我们要用名为HelloWorld的模块，其实我们可以在一个页面内写多个ng-app这里之前搞错了，在一个页面如果用了多个ng-app，只有第一个会起作用，其他的必须要手动，手动启动可自行百度。然后在ng-app标签内部我们就可以使用属于那个模块的控制器，这里我们在一个div上使用了HelloController 。最后在这个控制器内部我们便可以使用控制器中的数据了，即model，此处是绑定的{{say}}，我们之前在控制器内部定义了：
<code>$scope.say="Hello,welcome to Angular world";</code>
主意绑定用的是say，而不是$scope.say
其实一个控制器就相当于定义了一个作用域，在这个作用域内可以使用控制器中的变量、函数，而在控制器外部自然是不能使用，关于作用域没有什么好说的，但是作用域链也很重要，不理解的可以参考下这篇博客：
理解JavaScript中的作用域链
结果图
四、主意
网上angular的学习资料，好多一开始教程是这样的：
控制器声明错误
一开始我这样写总是报错，纠结了半天，最后才发现这是angular 1.3.0-beta.9及之前的写法，从1.3.0-rc.0开始控制器不能直接写成一个函数的方式，必须利用模块生成，也就是上面的写法。
五、总结
总之，写一个最简单的angular程序，我们要：
- 引入angular
- 定义模块
- 定义控制器
- 在html中使用ng-app、ng-controller
第一次写博客，有些啰嗦，也没啥重点，下一篇文章我将写一个仿购物车功能。
代码地址 https://github.com/wangqingqiang/Angularjs
网友评论