01. angular的创建步骤：
- 0.先导入angular.js框架
- 1.创建模块
- 2.创建控制器
- 3.绑定模块
- 4.绑定控制器
- 5.展示数据
module：模块
Controller：控制器
scope：范围
app:应用
示例：
0.先导入angular.js框架
<script src="angular.js"></script>
1.创建模块。 创建完成后，返回的是一个对象。
var app = angular.module('app',[]);
2.创建控制器 xmgController就是创建的控制器 $scope就是模型
app.controller('xmgController',['$scope',function($scope){
$scope.name = 'xmg';
}]);
3.绑定模块
一个页面可以绑定多个模块，但是模块之间是不能嵌套的。
通常一个html里面只应对一个模块。 app.
<body ng-app="app">//绑定模块
4.绑定控制器 一个模块可以绑定多个控制器
<ul ng-controller="xmgController">//绑定数据
5.展示数据
<li>{{name}}</li>
</ul>
<ul ng-controller="xmgController2">
<li>{{name}}</li>
</ul>
02. 创建模块详解
course：课程，过程
students：学生
repeat：重复
图解
<script>
1.创建模块
AngularJS提供了一个全局对象angular，在此全局对象下存在若干的方法，其中angular.module()方法就是用来定义一个模块。
第一个参数：模块名称
第二个参数：依赖模块的名称
var app = angular.module('app',[]);
2.创建控制器
控制器（controller）作为连接模型（Model）和视图（View）的桥梁存在，所以当我们定义好了控制器以后也就定义好了模型和视图。
第一个参数：控制器的名称
第二个参数：依赖的服务 app.controller('名称'['$scope',function($scope){ }]);
app.controlle('xmgController',['scope',function($scope){
$scope.name = "xmg";
$scope.age = 10;
$scope.course = ['html','css','js'];
$scope.students = [
{name:'张三',age:18},
{name:'李四',age:28}
];
}]);
3.绑定模块
<body ng-app="app">
4.绑定控制器
<ul ng-controller="xmgController">
<li>{{name}}</li>
<li>{{age}}</li>
<br>
<li ng-repeat="(key,value) in course">{{key}} {{value}}</li>
<li ng-repeat="value in students">{{value.name}} {{value.age}}</li>
</ul>
</body>
03.内置指令
HTML在构建应用（App）时存在诸多不足之处，AngularJS通过扩展
一系列的HTML属性或者标签来弥补这些缺陷，所谓指令就是AngularJS
自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如：ng-app
ng-controller,ng-repeat等。
app:应用
controller：控制器
show：显示
hide：隐藏
href：超链接
include：包括，包含
disabled：禁用
readonly：只读
checked：选中的
selected：选择（挑选出来的）
active：活跃的
path：路径
ng-app 指定医用根元素，至少有一个元素指定了此属性。
ng-controller指定控制器
ng-show 控制元素是否显示，true为显示，false则为不显示。
ng-hide 控制元素是否隐藏，true为隐藏，false则为不隐藏（显示）。
ng-if 控制元素是否"存在"，true为存在，false为不存在。
ng-src 增强图片路径
ng-href 增强地址
ng-class 控制类名
ng-include 引入模板
ng-disabled 表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected 下拉框表单选中
<body ng-app="app" ng-controller="xmgController">
<script>
// 内置指令：angular开始为html内置好的一些特定功能的属性标签
// 当解析到ng代码时，会回到html当中解析自己的指令
var app = angular.module('app',[]);
app.controller('xmgController',['$scope',function($scope){
// 在模型上绑定数据
$scope.isShow = 1;
$scope.path = "image/03.jpg";
$scope.name = "xmg";
$scope.active = false;
$scope.sty = {
'font-size':'30px'
};
}]);
</script>
<body ng-app="app" ng-controller="xmgController"></body>
//它的做法，其他就是把样式display:none;
<p ng-show="isShow">ng-show 控制标签是否显示</p>
ng-hide 控制标签是否隐藏， 取值为bool （true/false/1/0）
<p ng-hide="false">ng-hide控制标签是否隐藏 取值为bool（true/false/1/0）</p>
ng-if 控制标签是否存在 取值为boll（true/false/1/0）
<p ng-if="false">ng-if控制标签是否存在，取值为bool（true/false/1/0）</p>
使用ng-src加载图片
使用ng-src跳转
<a ng-href="#"></a>
ng-class指令，控制是否添加某个类，如果是true为添加，为false是不添加
<p ng-class="{red:active,font:true}">ng-class指令，控制是否添加某个类</p>
给当前标签手动添加样式
<p ng-style="sty">ng-style 控制样式</p>
</body>
04. ng-include：（包括，包含）
ng-include:包括 包含
在我们开发过程中有时候需要把一个模块单独写到一个页面当中
以便复用，使用原生html是没有办法达到这种要求，一般都是通过
服务器来完成此功能。
我可以使用angular当中的指令ng-include来完成。
ng-include 他的本质是发送了一个Ajax请求，把请求的结果
放入对应标签里边。
<body ng-app="app">
ng-include 他的本质是发送了一个Ajax请求，把请求的结果
放入对应的标签里边
<div ng-include="'./head.html'"></div>
<div ng-include="'./body.html'"></div>
<div ng-include="'./foot.html'"></div>
head.html
body.html
foot.html
为三个不同的文件
</body>
05.表单指令
disabled：禁用
readonly：只读的
checkbox：复选框
checked：选中的
控制表单是否可用 值为bool（布尔）类型
<input type="text" ng-disabled="true">
控制表单为只读属性
<input type="text" value="ng-readonly" ng-readonly="true">
设置复选框为选中状态
<input type="checkbox" ng-checked="true">
06.ng-switch指令
switch:开关，转换
when：当
course：课程，过程
repeat：重复
进行ng-switch指令为条件筛选指令。
格式为：
ng-switch="筛选对象"
ng-switch-when="筛选对象的值。如果筛选对象的值与该值相同
那么该值所在的标签就显示，否则就隐藏"
<script>
var app = angular.module('app',[]);
app.controller('xmgController',['$scope',function ($scope) {
$scope.course = ['html','js','css'];
}]);
</script>
<body ng-app="app"></body>
<ul ng-controller="xmgController">
<li ng-repeat="value in course" ng-switch="value">
对{{value}} 进行判断，when就是条件，满足条件就显示出来，否则就隐藏
<p ng-switch-when="css">{{value}}</p>
</li>
</ul>
07.数据单向绑定
-
数据单向绑定：把模型的数据展示到视图当中绑定方式有三种
-
1.使用插值语法：{{模型属性}} 加载时，-->会造成闪烁， 可以使用ng-cloak来避免闪烁。
-
2.使用ng-bind:ng-bind="模型属性" -->不会造成闪烁， 但只能绑定一个属性
-
3.使用ng-bind-template="{{模型属性}}，{{模型属性}}"可以绑定多个值，且不会闪烁
-
cloak:斗篷（遮掩，避免）
bind：绑定
template：模板，样板
<script>
var app = angular.module('app',[]);
app.controller('xmgController',['$scope',function ($scope) {
// 数据单向绑定：把模型的数据展示到视图当中
$scope.name = "xmg";
$scope.age = 18;
}]);
</script>
<body ng-app="app">
<ul ng-controller="xmgController">
使用{{}}可以把模型的数据绑定到视图当中,但加载时会造成闪烁。
<li>{{name}}{{age}}</li>
<li ng-cloak>{{name}}{{age}}</li>
数据绑定，不会造成闪烁，没有办法绑定多个属性
<li ng-bind="name"></li>
可以绑定多个数据，不会造成闪烁
<li ng-bind-template="{{name}}{{age}}"></li>
</ul>
08.数据双向绑定
-
数据双向绑定：视图的数据可以绑定到模型当中，模型的数据可以绑定到视图当中。
-
想要实现视图的数据绑定到模型当中，必须得要借助表单才行。
-
在表单当中使用ng-model指令，在input标签当中绑定属性。
bind:绑定
userName：用户名
password：密码
login：登录
<body ng-app="app" ng-controller="xmgController"></body>
模型的数据绑定到视图当中，使用ng-bind指令
<h1 ng-bind="name"></h1>
数据的双向绑定必须得要借助表单才行。
视图的数据绑定到模型当中，使用ng-model
<input type="text" ng-model="userName">
<input type="password" ng-model="pwd">
监听按钮的点击，使用方法ng-click="事件名称（）"
<button ng-click="login()">登录</button>
<script>
var app = angular.module('app',[]);
app.controller('xmgController',['$scope',function($scope){
在模型当中定义name属性
$scope.name = "登录";
事件的实现
$scope.login = function () {
点击时可以直接打印视图绑定到模型当中的数据
alert($scope.userName+$scope.pwd);
};
}]);
</script>
09.事件处理
可以使用angular来进行事件处理
使用方法为：ng-事件名称 = "事件响应方法名称（参数）"
参数可以自己指定，也可以传入事件对象$event
使用$scope来实现事件定义的方法
$scopr.事件名称 = function（参数）{ }
dblclick:双击，鼠标双击
mouseenter：鼠标移入
<body ng-app="app" ng-controller="xmgController"></body>
单击事件ng-click="click($event,'p')"
<p ng-click="click($event,'p')">单击我</p>
双击事件ng-dblclick="dblclick('db1')"
<p ng-dblclick="dblclick('db1')">双击我</p>
鼠标移入移出事件
<li ng-mouseenter="mouserEnter()">鼠标移入</li>
<script>
var app = angular.module('app',[]);
app.controller('xmgController',['$scope',function ($scope) {
$scope.name = "xmg";
定义事件方法实现
$scope.click = function (e,arg) {
alert($scope.name);
这里的this就是$scope
alert(this.name);
};
定义的时间方法实现
$scope.dblclick = function () {
alert('双击');
};
定义事件方法实现
$scope.mouserEnter = function () {
console.log('mouserEnter');
};
}]);
</script>
10.使用angular实现tab切换功能
type:类型
mouseenter：鼠标移入
content：内容
switch：开关，转换
when：当
-
给每一个li添加鼠标移入事件，移入时，把对应的type值传入。
-
给每个li添加ng-class指令，如果模型当中的type等于指定的值，就添加cur的类，否则不添加。
<ul>
<li ng-class="{cur:type == 'html'}" ng-mouseenter="mouseLeave('html')">前端学院</li>
<li ng-class="{cur:type == 'ios'}" ng-mouseenter="mouseLeave('ios')">ios学院</li>
<li ng-class="{cur:type == 'java'}" ng-mouseenter="mouseLeave('java')">java学院</li>
<li ng-class="{cur:type == 'UI'}" ng-mouseenter="mouseLeave('ui')">UI精品学院</li>
</ul>
使用ng-switch进行筛选
去判断type有值，与type相等就显示，不相等的就隐藏。
<div class="content" ng-switch="type">
<div ng-switch-when="html">
</div>
<div ng-switch-when="ios">
</div>
<div ng-switch-when="java">
</div>
<div ng-switch-when="ui">
</div>
</div>
<script>
var app = angular.module('app',[]);
app.controller('xmgController',['$scope',function ($scope) {
设置type默认值
$scope.type = 'html';
监听鼠标移入事件
$scope.mouseLeave = function (type) {
更改type类型
$scope.type = type;
};
}]);
</script>
11.备忘录
-
taskList:任务列表
-
finishTaskList：完成/任务/列表
-
preventDefault: 阻止/默认的
-
taskItem:任务项
-
task:任务
-
push：推，增加
-
splice：拼接
-
check：检查
-
delete：删除
-
repeat：重复
-
bind：绑定
-
item：项
-
content：内容
<body>
<script>
// 创建模块
var app = angular.module('app',[]);
// 创建控制器
app.controller('xmgController',['$scope',function($scope){
// 定义数组保存添加的任务
$scope.taskList = [];
// 定义数组已完成任务
$scope.finishTaskList = [];
// 1.提交按钮点击
$scope.submit = function (e) {
// 阻止事件默认行业
e.preventDefault();
// 创建任务对象
var taskItem = {
name:$scope.task,
check:false
}
// 添加到任务数组
$scope.taskList.push(taskItem);
// 清空表单内容
$scope.task = '';
};
// 2.实现checkBox点击事件方法
$scope.checkBoxClick = function (key) {
// 取出对应key的任务，从原任务中删除
var checkTask = $scope.taskList.splice(key,1);
// 把复选框设置为选中状态
checkTask[0].check = true;
// 添加到已经完成任务当中
$scope.finishTaskList.push(checkTask[0]);
};
// 3.实现delete方法
$scope.delete = function (key) {
// 把对应的key删除
$scope.taskList.splice(key,1);
};
}]);
</script>
</body>
// 1.使用angular监听表单提交 ng-submit= "submit（）"到控制器模型当中实现submit方法
// ng-model= "task"绑定任务
<form action="#" ng-submit="submit($event)">
ng-model="task"双向绑定数据
<input type="text" ng-model="task">
<input type="submit" value="添加">
</form>
2.遍历已完成任务
<ul>
<!--
遍历$scope.taskList展示数据
ng-repeat="(key,taskItem) in taskList"
ng-checked="taskItem.check" ng-click="checkBoxclick(key)"
ng-bind="taskItem.name"
ng-click="delete(key)"
-->
<li class="item" ng-repeat="(key,taskItem) in taskList">
<!--监听checkbox点击 到控制器模型当中实现checkBoxClick-->
<input type="checkbox" ng-checked="taskItem.check" ng-click="checkBoxClick(key)">
<span class="item_content" ng-bind="taskItem.name"></span>
<!--监听删除点击 到控制器当中实现delete方法-->
<span class="del" ng-click="delete(key)">删除</span>
<span class="detai1">详情</span>
</li>
</ul>
3.遍历已完成任务 finishTaskList
<li class="item" ng-repeat="(key,taskItem) in finishTaskList">
<input type="checkbox" ng-checked="taskItem.check">
<span class="item_content" ng-bind="taskItem.name"></span>
<span class="del">删除</span>
<span class="detai1">详情</span>
</li>
</body>
