介绍
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多
特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
闲话：
angelur 前端必会angelur 代码易维护
vue 两个框架 vue 迅速占领前端市场
Angelur JS 有五个核心特性:
- 双向数据绑定
- 模板
- Mvvm model(模型) -view(视图)-viewModel(视图模型) 吸收了MVC的设计程序,
MVC model(数据)-view(视图)-controller(逻辑) - 依赖注入
- 指令
为什么使用angular
- 实现前后端的分离 ,后端只提供数据接口,路由,模板渲染等都在前端完成
- html 和 js 分离,展示和逻辑分离
- 减少 js 代码,减少DOM 元素查找,事件绑定等代码
- 适合 API 开发 适合单页应用 整个页面 只能见到一个html文件,应用不管多大,就只有这一个,跳转,靠路由切换,一个页面内,渲染不同的内容
内置指令
凡是以 ng- 开始的,都称为内置指令
1. ng-app 用于表示一个angelur 应用
angelur 会从ng-app 所在的标签开始,管理这个应用
一个页面(应用)中.,建议只存在一个ng-app
如果有多个,要手动启动对应的应用
目前的 ng-app="" 表示使用默认的 Angelur 应用
2. ng-init 初始化数据 ng-init = "a=b;c=d;..."
使用ng-init 初始的数据, 会挂载到根作用域
在开发正式项目是,不建议使用 ng-init 做数据初始化
应该交由 controller 去完成
看一段代码先：
<!DOCTYPE html>
<html ng-app=""> /*默认使用angular的内置指令*/
<head>
<meta charset="utf-8">
<title>angular</title>
<script src="./angular.min.js" charset="utf-8"></script>
/* 链接angualr 必须的第一步*/
</head>
<body ng-init="name='zhar';age=30">
/* ng-init 初始化数据,这些数据可以在整个页面的任何一个地方是用.例如:包含在h1标签里面. 或者直接在页面上输出*/
{{ 5*4 }}
{{ 5>4 ? true : false}}
<h1>{{ name +"--"+age}}</h1>
<input type="text" ng-model="one">
*
<input type="text" ng-model="two" name="" value="">
=
{{one * two}}
{{name}}{{age}}
</body>
</html>
3. ng-model 将(表单)视图与模型进行(双向)绑定
<div ng-init="name='zhar';age=30;arr=['a','b','c'];obj={
name:'zhar',
age:30
}">
<input type="text" ng-model="name" >
<input type="text" ng-model="arr" name="" value="">
<ul>
<li ng-repeat="x in arr">{{ x }}</li>
</ul>
<h3 ng-repeat="(key,val) in obj">{{ key+"--"+val }}</h3>
</div>
4. ng-repeat 遍历对象
遍历数组:ng-repeat ="x in arr";
遍历对象: ng-repeat = "(key,val) in obj";
还能遍历复杂数组,ng-repeat=""
<div ng-init="name='zhar';age=30;arr=['a','b','c'];obj={
name:'zhar',
age:30
};items=[{
name:'iphone',
price:5999
},{
name:'xiaomi',
price:3999
}];as=[1,2,3,4,4,5,5]">
<input type="text" ng-model="name" >
<input type="text" ng-model="arr" name="" value="">
<ul>
<li ng-repeat="x in arr">{{ x }}</li>//遍历普通数组
</ul>
<h3 ng-repeat="(key,val) in obj">{{ key+"--"+val }}</h3>//遍历对象
<ul>
<li ng-repeat="x in arr">{{ x+"-"+$first+"-"+$last+"-"+$middle+"-"+$index}}</li>//遍历数组,用angular提供的下标,是否是首个,最后一个,中间一个,下标是几
</ul>
<ul>
<li ng-repeat="item in items">{{item.name+"--"+item.price}}</li>
//遍历复杂数组,json数据格式
</ul>
<span ng-repeat="x in as track by $index">{{x}}</span>
//遍历有相同元素的数组,适用下标为跟踪依据,去遍历数组
</div>
</body>
</html>
属性:
$first 是否是第一项
$last 是否是最后一项
$middle 是否是中间项
$index 下标项
angelur 需要一个不重复的值去跟踪数据的变化,将导致angelur 无法正常跟踪对应的.,值,需要使用track by $index 为遍历指定一个唯一的不重复值
ng-class
ng-class = { }[ ] 为元素指定样式名
ng-class ="{true:'class' ,false:'class',}[bol]" 有bol 决定添加那个样式
ng-class="{'class1':bol1,'class2':bol2,'class3':bol3}" 由bol决定添加那个样式
//ng-class的三种写法
<style>
.box{
width:100px;
height: 100px;
background: red;
}
.box1{
border:3px solid ;
}
.box2{
border-radius:50px;
}
.box3{
box-shadow: 2px 2px 4px #000;
}
</style>
<div class="box" ng-class="{true:'box1',false:'box2'}[className]"></div>
<div class="box"
ng-class="{'box1':isBox1,'box2':isBox2,'box3':isBox3}" ng-model=""></div>
ng-style : 为元素添加样式
ng-show 是否显示元素 true 显示 false 隐藏
ng-show 为false时,只是为元素添加一个优先级最高的 display : none
ng-if 是否显示元素
ng-if 为false时,会将元素从DOM 树中移除
当需要反复显示隐藏时,使用 ng-show
当只显示一次便不再使用的元素,使用 ng-if
添加事件 button
ng-click 单击事件 ng-click = "isShow= ! isShow"
ng-bind
可以解决后引入脚本时,双{{ }}表达式,造成的原样输出的问题
脚本
angular.module (moduleName[,depends]) 创建或获取模块
moduleName :模块名称String
depends: 依赖的其他模块 Array
当只传入一个名称时,代表获取指定的模块
两个参数时,定义模块,即使不依赖其他模块,也要传入一个空数组
作用域
作用域是父子之间可以继承的,但同级的作用域却不能相互访问.
只有在controllar 作用域下才能有效输出 比如:
<div ng-controller="myController">
{{ name }} 会输出 zhar
</div>
<div ng-controller="myController2">
{{ name }} 会输出 tom
</div>
{{ name }} 没有输出
<script type="text/javascript">
var app = angular.module("myApp",[]);
//挂断式注入
app.controller("myController",function($scope){
$scope.name = "zhar";
})
//声明式注入
app.controller("myController2",["$scope",function($scope){
$scope.name = "tom";
}])
</script>
$rootscope 在声明 ng-app 的位置,创建此作用域
一个 angular 应用有且只有一个根作用域
同级的作用域不可相互访问, 比如:以下
<div ng-controller="myController">
{{ name }}----{{ age }} 会输出tom ---30
</div>
<div ng-controller="myController2">
{{ name }}==={{ age }} 会输出zhar 没有age输出
</div>
</body>
<script type="text/javascript">
//声明自己的app
var app = angular.module("myApp",[]);
//声明式注入
//建议一律使用这种方式,代码压缩混淆后,依然能正常使用
//数组的0 到 倒数第二项, 是该控制需要注入的模块
//最后一项是回调函数
app.controller("myController",["$scope",function($scope){
$scope.name = "tom";
$scope.age = 30;
}]);
app.controller("myController2",["$scope",function($scope){
$scope.name = "zhar"
}])
</script>
子集作用域可以访问父集作用域的值,但无权修改,
7个内置过滤器: currency date orderBy filter uppercase lowercase limitTo
currency 货币格式转换 currency :"￥" 更改为人民币 默认是 $
lowercase uppercase
date 日期格式化 y 年 M 月 d 日 H 24时 h 12时 m 分钟 s 秒
数组过滤器：limitTo: 限制结果条数 如：limitTo ：2 显示两条
orderBy 排序 是否降序排列
例：orderBy:"price": 升序排列
例：orderBy:"price":true 降序排列
filter 按关键字快速过滤
filter：searchKey 过滤所有数据包括 searchKey 的内容
明天又是艰苦的一天
