一.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页面显示效果: