Angular的MVC基本概念
模型(model) :应用的所需数据--- angular变量($scope.XX)
控制器(controller):应用的行为(业务控制逻辑)--- -angular函数(function)
视图(view):应用的界面(显示给用户看到的) ---Html+Angular指令
双向绑定:控制器是Javascript代码设计的,视图模板是用HTML代码设计的,控制器和视图之间不会直接进行调用,而是通过控制器中的作用域($scope)对象实现数据与视图的双向绑定,达到解耦的目的。
原理简单
1)控制器(controller)--- Angular的应用程序模块
angular的module()方法 声明一个应用程序模块(模块名称EmpInfo)
比如,var app=angular.module('EmpInfo',[]);
angular的controller()方法 给模块创建一个Controller(控制器名称ShowEmpInfo)
比如:
//规范写法:创建控制器及定义其处理函数
app. controller('ModifyEmp',initEmp);
function initEmp ($scope){
$scope.empid = "C10094207";
}
2)模型(model)----> 控制器(controller)
ng-model:该指令把元素值(比如输入框的值)绑定到应用程序模块的数据中(angular变量)
比如:<div>请输入工号:<input ng-model="empid"></div>
3)控制器(controller) ---->视图(view)
ng-bind:该指令是把应用程序模块的数据绑定到html视图模板中
<span ng-bind="'工号:' + empid "> </span>
4)HTML识别angularJs指令
ng-app 当该指令出现HTML页面中某个DOM元素上时,AngularJS会自动创建一个根作用域对象$rootScope。比如:
<div ng-app="EmpInfo">
//初始化控制器1
</div>
接着使用ng-controller指令实例化控制器对象时(将一个控制器对象附加到DOM元素),AngularJS框架会自动创建一个子作用域$scope。比如
<div ng-controller="ModifyEmp">
<div>请输入工号:<input type="text" ng-model="empid"></div>
<span ng-bind="'工号:' + empid "> </span>
</div>
提示:作用域$scope对象的主要功能是存放数据模型。
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="EmpInfo">
<div ng-controller="ModifyEmp">
<div>请输入工号:<input type="text" ng-model="empid"></div>
<span ng-bind="'工号:' + empid "> </span>
</div>
</div>
</body>
<script>
//声明一个应用程序模块(模块名称EmpInfo)
var app=angular.module('EmpInfo',[]);
//给模块创建一个Controller(控制器名称ModifyEmp)
app.controller('ModifyEmp',initEmp);
function initEmp ($scope){
$scope.empid = "C10094207";
};
</script>
</html>
效果如下: