一、AngularJS中的MVC
目前普遍认为AngularJS是一款MVW(Model-View-Whatever)框架，这个是因为AngularJS早期比较接近于MVC，随着新版本代码的重构与API的改进，$scope对象可以认为是由一个方法(Controller)包装后的ViewModel，看上去更接近于MVVM，那么到底是MVC还是MVVM呢？怎么样都行(whatever)，这就是MVW的由来
AngularJS中的MVC：
Model
：作用域对象中的属性
View
：DOM元素，即HTML页面
Controller
：用户自定义的构造方法，作用域中的模型数据可以通过依赖注入的方
式注入控制器中
1.控制器的定义
AngularJS的控制器是一个构造方法，可以使用模块实例的
controller(name,func)
方法来声明一个控制器，该方法接收两个参数，第一个参数是控制器名字，第二个参数是控制器的
构造函数
--------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
var app=
angular.module("app",[])
;
app.
controller
("LoginController",function(
$scope
,
$log
){
$scope.name="admin";
$scope.pword="123456";
});
</script>
--------------------------------------------------------------------------------------------------------------------
AngularJS框架会在window对象中增加了一个全局的angular对象，可以通过调用
angular
对象的
module("app",[])
方法来得到一个模块实例(此处的"app"参数是在页面中
ng-model
指令的值)，然后再调用模块实例的
controller(name,func)
方法
$scope
与
$log
：
$scope
是作用域对象，是控制器与视图之间传递信息的载体；
$log
为AngularJS框架内置的日志服务对象，用于向控制台输入日志信息，当为控制器构造方法指定这两个参数后，控制器实例化时会把这两个对象注入控制器中
2.控制器对象的实例化
ng-controller
指令的使用方法与
ng-app
指令类似，也是作为标签的扩展属性使用
AngularJS框架遇到
ng-controller
指令时会根据
ng-controller
指令指定的控制器名称查找控制器构造方法，然后使用对应的构造方法实例化控制器对象，并将控制器依赖的对象注入控制器对象中
ng-controller
指令支持通过
as
语法指定控制器对象的名称，需要注意的是，当指令控制器名称并通过该名称来调用方法时，所调用的方法是控制器对象本身的方法而不是
$scope
作用域的方法，需要在控制器构造函数中通过
this
来定义
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html
ng-app
="app">
<head>
<meta charset="utf-8">
<title>angularjs</title>
<script type="text/javascript" src="./angular.min.js"></script>
</head>
<body
ng-controller
="CalcController
as
calc">
<div>单价：<input type="number"
ng-model
="price"/></div></br>
<div>数量：<input type="number"
ng-model
="num"/></div></br>
<div>总价：{{calc.totalPrice()}}</div>
<script type="text/javascript">
function CalcController(
$scope
){
$scope.price=10;
$scope.num=1;
this
.totalPrice=function(){
return $scope.price*$scope.num;
}
}
var app=angular.
module
('app', [])
app.
controller
("CalcController",CalcController);
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
控制器对象实例化时，AngularJS会创建一个新的作用域对象
$scope
，然后会把
$scope
注入到控制器对象中
通过
ng-model
指令，在
$scope
和input之间建立数据绑定
三、控制器的作用域范围
一个页面可以使用多个
ng-controller
指令来实例化不同的控制器对象，但是每个控制器对应的作用域对象只能与
ng-controller
指令所在的标签的开始标签与结束标签之间的DOM元素建立数据绑定
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html
ng-app
="app">
<head>
<meta charset="utf-8">
<title>angularjs</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div
ng-controller
="UserController" style="border:#ccc solid 1px;">
用户名：<input type="text"
ng-model
="name" placeholder="用户名"/>
密码：<input type="password"
ng-model
="pword" placeholder="密码"/>
<button>提交</button>
<p>您输入的用户名：{{name}}</p>
<p>您输入的密码：{{pword}}</p>
</div>
<div
ng-controller
="InfoController" style="border:#ccc solid 1px;">
个人爱好：<input type="text"
ng-model
="love" placeholder="个人爱好"/>
<p>您输入的个人爱好：{{love}}</p>
</div>
<script type="text/javascript">
function UserController(
$scope
,
$log
){
$scope.name="admin";
$scope.pword="1";
$log.info("UserController->name:"+$scope.name);
$log.info("UserController->pword:"+$scope.pword);
}
function InfoController(
$scope
,
$log
){
$scope.love="足球";
$log.info("InfoController->name:"+$scope.name);
$log.info("InfoController->pword:"+$scope.pword);
$log.info("InfoController->love:"+$scope.love);
}
var app=angular.
module
("app",[]);
app.
controller
("UserController",UserController);
app.
controller
("InfoController",InfoController);
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
四、控制器中处理DOM事件
AngularJS提供了一系列的事件绑定指令，这些指令是在原生的JavaScript事件名称前增加"
ng-
"前缀，如：
ng-click
、
ng-keyup
等
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html
ng-app
="app">
<head>
<meta charset="utf-8">
<title>angularjs</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div
ng-controller
="UserController" style="border:#ccc solid 1px;">
用户名：<input type="text"
ng-model
="name" placeholder="用户名"/>
密码：<input type="password"
ng-model
="pword" placeholder="密码"/>
<button
ng-click
="login()">提交</button>
<script type="text/javascript">
function UserController(
$scope
){
$scope
.login=function(){
if(
$scope.name
=="admin"&&
$scope.pword
=="admin"){
alert("登陆完成");
}else{
alert("登录失败：请输入正确账户密码");
}
}
}
var app=angular.
module
("app",[]);
app.
controller
("UserController",UserController);
</script>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------