前端讲义58_5分钟精通AngularJS的MVC基本概念

最新推荐文章于 2019-06-09 10:52:55 发布

木生火

最新推荐文章于 2019-06-09 10:52:55 发布

阅读量130

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/msh2016/article/details/90616750

版权

Angular 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>

效果如下：

木生火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端讲义58_5分钟精通AngularJS的MVC基本概念

Angular的MVC基本概念模型(model) ：应用的所需数据--- angular变量($scope.XX)控制器(controller)：应用的行为(业务控制逻辑)--- -angular函数(function)视图(view)：应用的界面(显示给用户看到的) ---Html+Angular指令双向绑定：控制器是Javascript代码设计的，视图模板是用HTML代码设计的，...
复制链接

扫一扫