一.angularJs的特性
1>MVC模式
2>模块系统
3>指令系统
4>依赖注入
5>双向数据绑定
二.angularJs的MVC方式
数据的挂载
ng-controller
双大括号表达式
MVC实例
实例说明:
这个例子演示的就是MVC模式(M:模型-数据;V:视图-html显示;C:controller)
Aaa()函数名:是实际要显示的数据,写到一个函数里;通过控制器调用函数名,显示内容;
{{}}:一个表达式,里面写入要显示的内容属性;直接写属性名,会显示对应的数据;
如果需要显示字符串,可以加引号来显示;如:'name'这样显示的就是字符串
ng-controller:控制器,控制显示的内容;
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>1ng</title>
<script src="../../js/angular.min.js"></script>
</head>
<script>
function Aaa($scope){//这个函数中的数据就是M
$scope.name = "hello world";
$scope.age = 20;
}
</script>
<body>
<div ng-controller="Aaa"><!--这里就是C-->
<p>{{name}}</p><!--这里的显示数据就是V-->
<p>{{age}}</p>
</div>
</body>
</html>
三.angularJs的作用域
1>$scope&$rootScope
$scope:局部作用域,只作用在当前函数中;
$rootScope:全局作用域,作用在整个html页面中;
作用域查找过程:与js中的变量作用域相似,先在当前局部作用域查找,没找到时,再向全局作用域中查找;
2>依赖注入
首先说明一点,$scope,$rootScope这两个形参是不可修改的。
当形参写$scope时,说明注入了$scope这个局部的对象;
当形参写$rootScope时,说明注入了$rootScope这个全局的对象;
3>服务的概念
像$scope,$rootScope这种以$开头的名称,代表一种服务,相当于一种功能;
四.angularJs的指令系统
指令概念:以ng-开头的属性,在angular中称为指令;
ng-controller:控制器;主要用于连接视图与数据;
ng-app:初始化指令;表示要开始使用angular,可以是全局的,也可以是局部的,具体要看指令写在什么地方;
五.angularJs的双向数据绑定
双向数据绑定:是一种MVVM的模式;
MVVM特点:当M发生改变,V会自动跟着改变;反之,当V发生改变,M会自动跟着改变;
双向数据绑定实例1:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>ng作用域</title>
<script src="../../js/angular.min.js"></script>
</head>
<script>
function Aaa($scope,$timeout){
$scope.name = "hello world";
//在数据中,加定时器,使数据在2秒后改变;同时观察页面显示,也会跟着改变
$timeout(function(){//这里演示改变M,影响V
$scope.name = "hello!!!";
},2000);
//注意:angular的定时器,要使用自带的定时器服务;所以需要在形参中,注入自带的$timeout;
$scope.show = function(){//这里演示改变V,影响M
$scope.name = "hello!!!";
};
/*
说明:$scope也可以绑定一个函数。视图中,可以使用ng-click指令,通过引号中输入"show()"的方式来调用;
其中,ng-click是点击的指令,用法与原生一样;
*/
}
</script>
<body>
<div ng-controller="Aaa" ng-click="show()"><!--ng-click,第一种写法-->
<div ng-controller="Aaa" ng-click="name='hello!!!'"><!--ng-click,第二种写法;name必须是M中的name,改变的数据必须写在引号中-->
<p>{{name}}</p>
</div>
</body>
</html>
实例2:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>ng作用域</title>
<script src="../../js/angular.min.js"></script>
</head>
<script>
function Aaa($scope,$timeout){
$scope.name = "hello world";
}
/*实例说明:本例子演示了改变M影响V*/
</script>
<body>
<div ng-controller="Aaa">
<input type="text" ng-model="name">
<!--ng-model:表示将M中要改变的属性,添加到input输入框中-->
<p>{{name}}</p>
</div>
</body>
</html>
实例2页面显示效果: