分类 | 用途 |
---|---|
Model | 模型表示数据的部分 |
View | 视图这是用户看到并与之交互的界面 |
Controller | 控制器是应用程序中处理用户交互的部分,通常控制器负责从视图读取数据,控制用户的输入,并向模型发送数据 |
用户输入——>Controller(控制器,接受用户请求并且把数据传递给业务模型)——>Model(模型,业务处理,从数据库中读取数据)——>View(视图,选择视图呈现给用户)——>用户输入
<html ng-app="zzmod">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<zfrom>zfrom>
body>
<script src="js/angular.js">script>
<script type="text/javascript">
angular.module('zzmod',[]).directive('zfrom',function(){
//要用这个dom内容添加到原来指令的内部
return {
template:''
}
}).directive('red',function(){
return {
//scope作用域,当前元素本身
link:function(scope,element){
element.css('color','red');
element.css('border','1px solid red');
}
}
});
script>
html>
装饰形
<html ng-app="zzz">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div red>
zzzzz
div>
<span red>enenne span>
body>
<script src="js/angular.js">script>
<script type="text/javascript">
//定义一个指令(指令的名字,指令的定义
angular.module('zzz',[]).directive('red',function(){
return {
//scope作用域,当前元素本身
link:function(scope,element){
element.css('color','red');
element.css('border','1px solid red');
}
}
})
script>
html>
依赖注入
只需要声明要使用的对象,就可以自动得到,不需要自己创建
单项数据绑定
双向数据绑定
- 当view中有任何数据发生了变化,那么这个变化也会自动的反馈到scope的数据上,scope模型会自动的更新
- 当scope模型发生变化时,view中的数据也会更新到最新值
<html ng-app>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
{{name}}
<input type="text" ng-model="name"/>
body>
<script src="js/angular.js">script>
<script type="text/javascript">
//找到ng-app之后,会生成一个$rootScope
script>
html>
过滤器
过滤器 | 作用 |
---|---|
lowercase | 转小写 |
uppercase | 转大写 |
为什么需要mvc
核心目标是模块化和复用
共享同一个数据
<html ng-app="z">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div ng-controller="z1">
{{Service.count}}
<input type="button" value="加一" ng-click="add()"/>
div>
<div ng-controller="z2">
{{Service.count}}
<input type="button" value="加一" ng-click="add()"/>
div>
body>
<script src="js/angular.js">script>
<script type="text/javascript">
angular.module('z',[]).controller('z1',function($scope,Service){
$scope.Service=Service;
$scope.add=function(){
Service.add();
}
}).controller('z2',function($scope,Service){
$scope.Service=Service;
$scope.add=function(){
Service.add();
}
console.log(Service);
console.log($scope.count);
}).factory('Service',function(){
return {
count :0,
add:function(){
this.count++;
}
}
})
script>
html>
Model模型的使用
向上向下传递
<html ng-app="zz">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div ng-controller="ParentCtrl">
parent:{{count}}
<div ng-controller="sonCtrl">
<input type="text" ng-model='num'/>
<input type="button" ng-click="$emit('add',num)" value="向上发射"/>
<input type="button" ng-click="$broadcast('add',num)" value="向下发射" />
son:{{count}}
<div ng-controller="grandCtrl">
grandson:{{count}}
div>
div>
div>
body>
<script src="js/angular.js">script>
<script type="text/javascript">
angular.module('zz',[]).controller('ParentCtrl',function($scope){
$scope.count=0;
$scope.$on('add',function(eve,num){
$scope.count+=num;
});
}).controller('sonCtrl',function($scope){
$scope.count=0;
$scope.$on('add',function(eve,num){
$scope.count+=num;
});
}).controller('grandCtrl',function($scope){
$scope.count=0;
$scope.$on('add',function(eve,num){
$scope.count+=num;
});
});
script>
html>