初识AngularJS

刚开始学习Angularjs，以前也没有写过博客啥的，这次就在这里记录下自己的学习过程，看看学习效果会不会更好，希望自己能坚持写下去。

一、介绍Angular

angularjs是谷歌推出的一个基于MVC的前端框架，利用双向数据绑定可以减少代码量，快速展示页面的变化。新手也还处于懵逼的阶段，就不啰啰嗦嗦了，总之谷歌出品，必然强大。
Angularjs官网 （小心城墙太高）。

二、第一个Hello World程序

作为一个程序员，第一个程序当然要从Hello World开始啦！下面就开始上代码：

 
 
 
 
 
 
 
 {{"Hello World"}}
 
 
 
 

1. 在这个小程序中，我们引入了1.4.0-rc.2版本的angular
2. 在html标签中,添加了一个ng-app
   ng-app表示angularjs的程序入口，angular在ng-app标签范围内执行，也就是说在此程序中angular可以在整个html标签范围内执行。以此类推，若ng-app添加在body中或者某个div中，则angular只能在body或此div中执行，范围以外的地方即使写了angular语法也不起作用。
3. 在body中有一个{{"Hello World"}}
   angularjs中使用两个大括号 {{ 表达式 }} 执行数据绑定，此处的表达式可以是字面量、angular变量、运算表达式，此处的表达式是一个字符串字面量“Hello World”

结果图

三、添加一个控制器

angular既然是MVC模型，那自然是离不开controller的了，controller是model和view之间的桥梁，控制数据在应用程序中的传递以及程序的逻辑。angular控制器采用ng-controller指令定义，每个控制器接受$scope参数。

 
 
 
 　
 　
 
 
 　{{"Hello World"}}
 　

 　　{{say}}
 　
 
 
 
 
 

这段代码和上面代码有几处不同：

1. 在底部添加了一行var hello=angular.module("HelloWorld",[]);
   此句话的意思是定义一个模块，注意模块的名字并不是hello，而是HelloWorld，module函数的第一个参数，第二个参数是一个数组，里面用于定义这个模块的依赖项
2. hello.controller()就是定义一个名为HelloController的控制器，请注意这个控制器是属于模块hello的，第二个参数也是一个数组，里面的函数就是控制器的主体，参数必须是$scope。其实第二个参数也可以只写一个函数：
   hello.controller("HelloController",function($scope){
　　　　　　　　 $scope.say="Hello,welcome to Angular world";
　　　　　　　　　 });

   但是这样写有一个问题，由于$scope并不是我们定义的，它是angular内置，利用依赖注入作用于控制器内，所以当用这种方法书写时，js经过压缩后就不认识$scope了，致使程序出错，关于依赖注入现在也不理解，慢慢学吧。
   总之，我们就采用代码块中的方法定义控制器就最好了，标准不会出问题
3. ng-app=“HelloWorld”、ng-controller="HelloController",{{say}}
   定义好了module、controller当然就要去使用，ng-app是angular程序的开始，也就是一个模块，此处表示我们要用名为HelloWorld的模块，其实我们可以在一个页面内写多个ng-app这里之前搞错了，在一个页面如果用了多个ng-app，只有第一个会起作用，其他的必须要手动，手动启动可自行百度。然后在ng-app标签内部我们就可以使用属于那个模块的控制器，这里我们在一个div上使用了HelloController 。最后在这个控制器内部我们便可以使用控制器中的数据了，即model，此处是绑定的{{say}}，我们之前在控制器内部定义了：
   $scope.say="Hello,welcome to Angular world";
   主意绑定用的是say，而不是$scope.say
   其实一个控制器就相当于定义了一个作用域，在这个作用域内可以使用控制器中的变量、函数，而在控制器外部自然是不能使用，关于作用域没有什么好说的，但是作用域链也很重要，不理解的可以参考下这篇博客：
   理解JavaScript中的作用域链

结果图

四、主意

网上angular的学习资料，好多一开始教程是这样的：

控制器声明错误

一开始我这样写总是报错，纠结了半天，最后才发现这是angular 1.3.0-beta.9及之前的写法，从1.3.0-rc.0开始控制器不能直接写成一个函数的方式，必须利用模块生成，也就是上面的写法。

五、总结

总之，写一个最简单的angular程序，我们要：

1. 引入angular
2. 定义模块
3. 定义控制器
4. 在html中使用ng-app、ng-controller

第一次写博客，有些啰嗦，也没啥重点，下一篇文章我将写一个仿购物车功能。
代码地址 https://github.com/wangqingqiang/Angularjs