Angular学习笔记之一
一.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页面显示效果：
