angular上手实例

        前几天我在慕课网上看到大漠穷秋的视频，然后我整理出了他的视频部分内容，先晒晒入手博客啊，之后我会定期的陆续在我的博客中更新。如果有些人觉得看视频时间太长的话，希望我的博客对你有用。

        下面直接进入正文了。

一、首先我们要知道angular的一些基本特性。

1、MVC

       我相信大家都知道MVC这个模式。

         M(model)：数据模型层 V(view)：视图层，负责展示 C(controller)：业务和控制逻辑层。

         这个模式有什么好处呢？

         接下来上例子让大家直观感受一下：

         html代码：

         

         HelloAngular代码：

         

        我们可以来找一下这个例子中的MVC都是什么东西。

          a.首先我们看一下引入的script ：导入了一个angular的源文件（angular-1.3.0）和一个HelloAngular_MVC.js的js文件。

          b.我们找一下这个实例中的MVC究竟是哪些东西：

                (1)从这段代码上看我们看到body里有个ng-controller,很明显，这个是个控制器，然后代码中把ng-controller 赋值成了HelloAngular。那我们再看一下这个HelloAngular是什么东西。在引入的HelloAngular_MVC.js代码中可以看到，HelloAngular是一个函数（这个函数中有个$scope的参数，并且定义了greeting对象text的属性。）所以很显然，这里的控制器被HelloAngular这个函数充当了。

                     (2)视图在哪里呢？视图很显然是p标签充当的。

                     (3)那么数据模型层在哪里呢？我们可以看到p标签中，有个双花括号中有greeting.text来取值,我前面说了HelloAngular中这个函数中定义了greeting.text这个值。这里就是数据的传递的模型。

           例子的展现结果：

            

2、模块化

         上面的例子当中，我们可以发现，这个HelloAngular函数是个全局函数。我们知道全局函数对我们的代码是不易管理的，我们通常是不建议定义全局的东西在代码中。那么为了下面我们就可以用模块化的管理方式，去管理我们上面的代码。

           然后看下面的这个代码。

          

         这里我们定义了一个module叫做HelloAngular，然后在这个模块上我们调用了一个controller方法去生成一个控制器（很显然控制器的名字：helloAngular），然后将我们之前的函数HelloAngular写在这个module的controller方法里（这里的$scope是告诉angular要注入一个scope即依赖注入，下面的函数的参数有个$scope需要用）。这里其实就实现了我们angular的模块化管理。

3、指令系统

            html代码：

            

            HelloAngular_Directive.js代码：

             

            angular的指令用处非常大，比如上面的代码中的，hello指令 我们可以看到，我们这个hello被template模板所代替，并且在页面中出现了Hi everyone的字样。

            

又比如在html中的ng-app，其实这也是angular的一个指令。这个指令相当于c语言中的main方法，告诉angular从这里开始执行，就是程序的入口。

4、双向数据绑定

          我先解释一下单向数据绑定：所谓单向数据绑定就是当我们写好定义好的template和从后端或者服务端等途径取好的数据Model在同一时间merge到视图view中。那么这样会让我们觉得，当模板和数据都取好后，去渲染页面的话，都是一次性的。那么angular觉得这种做法不是那么的elegant，所以它引入了双向数据绑定。

          双向数据绑定又是怎么样elegant的呢？它是视图view和模型model一一对应的，当视图发生变化的时候，模型对应会发生变化，当模型发生改变的时候，视图会自动更新。

           那么这样会为什么样的场景带来好处呢？我们知道在html中的什么样的视图会发生变化呢？当然，莫过于我们的表单（比如收集用户的输入信息），那么这时，我们知道用户的输入信息是多变的，我们的angular就可以通过事件机制去同步这些信息到数据模型当中去，这样就相当方便了。

             下面上个例子，让大家理解一下。

              

           在这个例子中，我们就是在输入框里绑定了一个ng-model，然后p标签里获取这个greeting.text值。我们可以看到效果就是ng-model发生改变的时候，greeting.text的值也会发生更新。

              上面的例子展示的结果是：

               

               入手博客先更新到这里，接下来的博客我会具体写angular的四个特性在实例中的应用。如果有什么不对的地方，希望大家给我指出来。