AngularJS-MVC之Controller

前言：

　　编程是一个很苦恼的工作，因为需要我们不断的去学习，不断的去专研，我本身就不是一个很喜欢学习的孩子，要不然从小到大也没有成绩好过，但是，我从来没有缺少过勤奋，还是让我们言归正传来说下 我们这段时间学的东西吧，看着别人能够运转自如，自己连基础的都不知道是不是特傻。

1，hello world

            
                <!
                doctype html
                >
                <
                html 
                ng-app
                ="HelloAngular"
                >
                <
                head
                >
                <
                meta 
                charset
                ="utf-8"
                >
                </
                head
                >
                <
                body
                >
                <
                div 
                ng-controller
                ="HelloAngularCtl"
                >
                <
                p
                >{{greeting.text}},world</p></div></body><script src="js/angular-1.3.0.js"></script><script src="HelloAngular_MVC.js"></script></html>
        

先看看这段代码，如果从来没有接触过angular的同学们，会觉得代码还可以这么写？

让我们看看在这段代码中我们遇到的新的写法有哪些？

　　1，ng-app="HelloAngular"，这个是程序的入口（c#中的main()方法），如果在html里面有这个话，就表明，在这个dome元素范围内归angular.js来管理，是不是很奇妙，当然，我们可以把这个放到 body标签内也可以，值得注意的是一个程序中只有一个 ng-app，后面的 HelloAngular是后面的模块名称，可以不写这个东西。

    2，ng-controller="HelloAngularCtl",这个是本章讲的重点，也就是MVC中的C(controller),顾名思义就是控制器的意思，那么到底控制什么？根据我的理解，是控制下面的元素依据什么来显示，这里的什么等下后面会讲到。

    3，{{greeting.text}}，如果会Php或则使用html模板的同学应该知道，这两个大花括号呢，是表示程序里面的变量或则属性，在此可以直接引用，这个很有意思啊，因为我们知道如果要给一个dome赋值，首先要根据 JS获得这个dome的对象，然后再通过value属性给其赋值，那是何其麻烦，但是在这里却这么简单。

好了，看完html代码，我们再看看js的吧，我们先引入 angularJS的库文件，否则上面的都不会生效。再引入我们自己的逻辑代码HelloAngular_MVC.js

            
                //
                 定义一个模块
                var HelloAngularModule = angular.module("HelloAngular",[]);

// 模块中定一个控制器
HelloAngularModule.controller("HelloAngularCtl",function($scope){
        $scope.greeting={
            text:‘Hello‘
        }
})
        

就像上面代码注释的一样，我们先用angular的语法，定义一个模块（注意：我们现在所有的代码都要模块化，不然MVC的就变得毫无用处，不然我们是用MVC也好还是MVVM也好，最终的目的是代码复用和模块化）,然后呢，根据这个模块我们来定义一个 controller。

在此有些心细的同学看出来了，我们模块定的名称（HelloAngular）和Controller定义的名称（HelloAngularCtl）刚好是我们前面讲过的html代码中写的ng-app和ng-controller的名称一样的。没错，我们就是通过这个来指定angular的运行环境的。如果你写错了一个字母，可能整个程序就不能执行了。

在此，我们再来讲一个比较重要的属性，那就是 控制器中 $scope，我们称之为作用域。这个$scope是很神奇的东西，可以说是整个angularjs的运行都是在这个上面的，是angularjs实现数据模型的方式，我们可以看到前面（html代码）中{{}}引用数据，就是$scope对象的属性。

好了，最后给展示下运行的效果：

最后补充下，我们的$scope的作用域是在 controller的范围下的，也就是说，如果我们html代码中controller1调用了controller2中的$scope对象的属性和方法是取不到值的，那么有人会说了，如果两个非要用到一个东西怎么办呢？别着急我们后面会讲到，我看别人的都是写一个公用的controller把1和2给放进去，其实这是一个错误的方法，我们要建立一个service，后面再说。

原文：http://www.cnblogs.com/zhiyuan-2011/p/4237685.html