一.整体感知
- 首先去官网下载下来 在html中导入angular.js文件即可
1.AngularJS框架
描述：AngularJS框架诞生于2009年，由google公司提出
特点：AngularJS的核心特点是MVW的设计模式，支持模块化和双向数据绑定
以及依赖注入。
由来：AngularJS框架时为了克服html语言在构建App上天生的不足而设计的
2.AngularJS整体感知
描述：AngularJS框架的内容非常庞大，涉及到WEB应用架构的各个方面
我们在这里学习AngularJS的1.0版本目的主要是为了改变我们的思想
例子：快速实现mvc设计模式(数据模块与页面与用户之间的沟通)
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./angular.js"></script> -->
</head>
<body>
<!-- 原始的方式: -->
<!-- 手机号:<input type="text" >
<h3></h3> -->
<!-- mvc -->
手机号:<input type="text" ng-model='msg' placeholder="请输入内容:">
<h3>{{msg}}</h3>
</body>
<script src="./angular.js"></script>
<script>
//鼠标移走在可以触发
// document.querySelector('input').onchange = function(){
// document.querySelector('h3').innerHTML = this.value;
// }
//键盘一直按着 输出是不变的
// document.querySelector('input').onkeyup = function(){
// document.querySelector('h3').innerHTML = this.value;
// }
</script>
</html>
mvc
二.指令(可理解为属性)
1.边界指令ng-app
描述：AngularJS框架在使用的时候除了需要引入框架文件之外，还需要为框架指明一个边界
告知框架在哪个范围内生效。如果不使用边界指令进行声明，则AngularJS框架引入失败。
习惯上写在html标签之内，表示在当前页面中angularJS都能正常使用
语法：<html ng-app></html>
注意：边界指令是使用NG框架必须使用的一个指令，不写一定使用错误
2.呈现指令{{}}
描述：NG框架规定{{}}嵌套双花括号用来表示【内容呈现】功能
在{{}}中可以书写NG语法规则下的变量、字符串甚至表达式
说明：在上面例子中{{msg}}，
就是使用了呈现指令，将NG变量msg中的内容呈现出来
强调：呈现指令内只能书写合乎NG语法规则的内容，
任何不符合的输入都不能保证最终的呈现结果
这种写法坚决禁止：{{var num = 1;}}
3.信息指令ng-model
描述：NG框架规定ng-model用来对input或textarea这类
用于收集用户信息的标签进行数据绑定
ng-model所赋的值，即为【保存有用户输入内容的NG变量】
语法：<textarea ... ng-model='userInfo'></textarea>
4.绑定指令ng-bind
描述：NG框架中提供了一个用于对非输入性的标签使用的
类似于{{}}呈现指令的辅助指令
即为ng-bind
作用是能够将NG变量绑定到想要显示的标签之上，
并且在NG框架加载失败的时候，也不会直接将语法错误暴露出来
语法：<span ng-bind='message'><span>
5.初始化指令ng-init
描述：NG框架中规定使用本指令来对边界内部的数据模型(NG变量们)进行初始化操作
ng-init并没有规定具体的必须摆放位置，但习惯上放在body上
会在页面加载后，自动对内部规定的数据模型进行初始化操作
语法：<body ng-init='message="hello AngularJS"'></body>
-
没有加边界指令ng-app 会暴露在html中 =>ng-bind
-
加上ng-bind
-
加上 ng-app
-
ng-init
三、控制器
1.angular.module()方法
描述：本方法是NG框架中提供，用来生成【页面数据模型】的方法
语法：var 模型名称 = angular.module('边界名称', [注入信息])
说明：因为现在还没有涉及到注入内容，因此暂时空置即可
例子：var myApp_module = angular.module('app', []);
var myApp_module = angular.module('app', []);
console.log(myApp_module);
为什么要加控制器？为什么要在控制器中加脚本？ 控制器：给控制器内所有的ng变量添加一些变量赋值 添加点击事件 添加回调函数
$scope 全局变量
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller='mainController'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Document</title> -->
<title ng-bind="pageTitle"></title>
<script src="./angular_1.5.js"></script>
</head>
<body>
<h2>{{msg}}</h2><br>
<span ng-bind='msg'></span>
</body>
<script>
var myApp_module = angular.module('app', []);
// console.log(myApp_module);
myApp_module.controller('mainController',['$scope',function($scope){
$scope.pageTitle = '我是主题';
$scope.msg = '哈哈哈哈哈哈我是卖报的小行家！！！'
}]);
</script>
</html>
扩展ng-repeat
2.声明控制器指令ng-controller
描述：本指令用来在页面中声明哪一个元素为控制器
控制器，就是用来操作数据和视图的部件。
语法：<html ng-controller='mainController'>...</html>
注意：只要声明一个标签拥有控制器，这个控制器在脚本中就必须写出！！
3.实现控制器方法*.controller()
描述：本方法是NG框架在script脚本中提供，用来生成【页面控制器】的方法
语法：页面数据模型名称.controller('控制器名称'，['$scope', function ($scope){...}]);
例子：app.controller('mainController', ['$scope', function ($scope){...}]);
4.遍历指令ng-repeat
描述：本指令用来遍历NG变量，并根据其进行构建页面html元素
语法：<E ng-repeat='任意变量名 in NG变量 track by $index'>{{任意变量名}}</E>
说明：track by $index 表示允许有重复内容存在，如果不写出现重复内容会报错
例子：<li ng-repeat='pname in names track by $index'>{{pname}}</li>
补充：ng-repeat指令必须在controller中对NG变量赋值之后才会生效
单独的ng-repeat毫无用处，因为NG变量不存在，没法赋值。
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller='mainController'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Document</title> -->
<title ng-bind="pageTitle"></title>
<script src="./angular_1.5.js"></script>
</head>
<body>
<h2>{{msg}}</h2><br>
<span ng-bind='msg'></span>
<!-- //重复创建li -->
<ul>
<!-- track by $index 允许有重复的 -->
<li ng-repeat = 'pname in names track by $index'>{{pname}}</li>
</ul>
<div ng-repeat ='info in books track by $index'>
<p>书名：{{info.name}}</p>
<p>作者：{{info.author}}</p>
</div>
</body>
<script>
var myApp_module = angular.module('app', []);
// console.log(myApp_module);
myApp_module.controller('mainController',['$scope',function($scope){
$scope.pageTitle = '我是主题';
$scope.msg = '哈哈哈哈哈哈我是卖报的小行家！！！';
$scope.names = ['lulu','gege','mingqi','lisi','lulu','lulu'];
$scope.books=[
{'name':'js入门','author':'lili'},
{'name':'js入门','author':'lili'},
{'name':'js入门','author':'lili'},
]
}]);
</script>
</html>
事件监听
描述：NG框架中通过对元素标签添加【ng-事件名】指令，来对元素添加事件监听
而事件监听的回调函数需要在controller中，通过$scope来实现
说明：整个过程类似html事件
语法：<E ng-事件名称='回调函数名(NG变量)'></E>
...
$scope.回调函数名 = function (形参){
//在函数中形参就是传入的NG变量的值
};
...
例子：
<button ng-click='func()'>点我调用controller中的函数</button>
app.controller('mainController', ['$scope', function ($scope){
$scope.mainTitle = 'lesson4_事件监听';
$scope.func = function (){
console.log('here is a func');
};
}]);
<!DOCTYPE html>
<html lang="en" ng-app ='my_app' ng-controller="my_controller">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./angular_1.5.js"></script>
</head>
<body>
<!-- <h2>{{msg}}</h2> -->
<!--1. 需求：点击列表中的那个 就输出的它的下标值 -->
<ul>
<li ng-repeat = 'one in list track by $index' ng-click ='fun($index)'>{{one}}</li>
</ul>
<!-- 2.需求：点击测试按钮 把内容显示出来 再点击一下就隐藏 -->
<h3 ng-show = "isShow">{{info}}</h3>
<button ng-click = 'handleClick()'>隐藏或者显示</button>
<!-- //自定义点击事件 回调函数加（） -->
<!-- ng-click 是固定的点击事件？ 是的 -->
<!-- <button ng-dian = 'handleClick()'>隐藏或者显示</button> -->
</body>
<script>
var app = angular.module('my_app',[]);
app.controller('my_controller',['$scope',function($scope){
// $scope.msg = '我睡觉了哦！';
$scope.list = [
'稻香',
'超人不会飞',
'听妈妈的话吧',
'枫'
];
$scope.fun =function(index){
console.log('您点击的是：'+$scope.list[index]);
};
//在没有点击之前就要isshow 为true
$scope.isShow = true;
$scope.info = '我喜欢编程，我要拿高薪'
// ps：function() 记得传值$scope 有时候是$index （拿下标）
//这里是不用传值的 上面没有写实参进来
$scope.handleClick =function(){
console.log('点击了测试按钮！');
$scope.isShow = !$scope.isShow;
}
}])
</script>
</html>
```
