1、 AngularJs的特性和优点:
1、 双向绑定
2、 声明式依赖注入
3、 解耦应用逻辑,数据模型和视图
4、 完善的页面指令
5、 定制表单验证
6、 Ajax封装
2、 AngularJs和jQuery的比较
jQuery:
Js函数库,封装简化dom操作
angular:
Js结构化框架,主体不再是Dmo,而是页面中的动态数据。
3、 AngularJs能做什么项目
构建单页面(SPA)Web应用或Web App应用
单页面应用(SPA) single page applicatoin
特点:
1、 将所有的活动局限于一个页面
2、 当页面中的部分数据发生了改变不会去刷新整个页面,而是局部刷新
3、 利用的ajax技术。
3、 绑定
单选绑定
// ng-app 告诉angular核心他管理当前标签所包含的整个区域,并会自动创建$rootScope根作用域对象
<body ng-app>
// 将当前输入框的值与谁关联(属性名:属性值),并作为当前作用域对象$rootScope的属性
<input type=“text“ ng-model="username">
// {{}} 显示数据,从当前作用域对象的指定属性名上取
<p>你输入的内容是: <span>{{username}}</span> </p>
<script src ="angular.js">
</body>
双向绑定
// ng-init 给这个变量设置一个初始值
<body ng-app ng-init="username='tom'">
<input type="text" ng-model="username">
<p> {{username}}</p>
<input type="text" ng-model="username">
<p>{{username}}</p>
</body>
4、 三个重要对象
作用域对象
一个js实例对象,ng-app指令默认会创建一个根作用域对象$rootScope
他的属性和方法与页面中的指令或表达式是关联的
控制器对象
// 用来控制AngularJs应用数据的 实例对象
// ng-controller: 指定控制器构建函数,angular会动new此函数创建控制器对象
// 同时Angular还会创建一个新的域对象$scope,他是$rootScope的子对象
// 在控制器中声明$scope形参,Angular会自动将$scope传入
<dev ng-app ng-controller = "MyConstroller">
<input type="text" ng-model="firstName">
<input type="text" ng-model="lastName">
<p> {{firstName}} - {{lastName}}</p>
<p>{{getName()}}</p>
</dev>
<script tyep ="text/javascript">
function MyConstroller($scope) { // 形参必须是$scope
console.log($scope);
$scope.firstName = 'kobe';
$scope.lastName = 'last';
$scope.getName = function(){
return $scope.firstName +' ' + this.lastName;
}
}
</script>
依赖对象: 完成某个特定的功能需要某个对象才能实现,这个对象就是依赖对象。
依赖注入:依赖的对象以形参的形式被注入进来使用,这种方式就是声明式依赖注入。
angular的$scope对象就是依赖对象,并且是依赖注入的形式进行使用。
模块和控制器
<body ng-app = "myApp"></body>
<script>
// 创建模块对象
var myModule = angular.module(‘myApp’,[]);
// 生成作用域对象
myModule.controller('MyController',function ($scope)) {
}
myModule.controller('MyController1',function ($scope) {
}
// 优化链式调用
angular.module('myApp',[])
.controller('myController1',function() {})
.controller('myController',function(){})
</script>
js代码压缩后形参会被abcd字母代替,angular解析不了
解决方案
angular.module('myApp',[])
.controller('MyController',['$scope',function($scope){
$scope.empName = 'kobe';
}])
操作的数据
基本数据类型: number/string/boolean
undefined,infinity,NaN,null 解析为空串:“”,不显示任何效果
对象的属性或方法
数组
angular常用指令
ng-app :指定模块名,angular管理的区域
ng-model: 双向绑定,输入相关标签
ng-init: 初始化数据
ng-click: 调用作用域对象的方法
ng-controller: 指定控制器构造函数名
ng-bind: 解决使用{{}} 显示数据闪屏(在很短的时间内显示{{}})
ng-repeat: 遍历数组显示数据,数组有几个元素就会产生几个新的作用域
$index,$first,$last,$middle,$odd,$even
ng-show : 布尔类型,如果为true才显示
ng-hide: 布尔类型,如果为true就隐藏
ng-repeat的使用:
<div>
<h2></h2>
<ul>
<li ng-repeat="person in persions">{{person.username}} --- {{$index}}</li>
</ul>
<div>
angular.module('myApp',[])
.controller('myCtrl',functon($scope) {
$scope.persions = [
{'uaernmae':"xaoming"},
{'uaername':"小红"}
]
})
ng-bind的使用:
解决使用{{}} 显示数据闪屏(在很短时间内显示{{}})
<p> {{123}} </p> == <p ng-bind="123"> </p>
ng-class 动态引用定义的样式{aClass:true,bClass:false}
ng-styple 动态引用通过js指定的样式对象 {color:'red',backgroup:'blue'}
ng-click 点击监听,值为函数调用,可以传$event
ng-mouseenter 鼠标移入监听,值为函数调用,可以传$event
ng-mouseleave: 鼠标移出监听,值为函数调用,可以传$event
H5本地存储技术
sessionStroage (会话存储)
- 声明周期: 浏览器打开到关闭的过程
- 大小: 5m
- 保存的位置: 浏览器端
- setItem(‘key’,value)
- setItem(‘key’)
- removeItem(‘key’)
localStorage
- 生命周期: 永久,除非认为删除
- 大小 5m
- setItem(‘key’,value)
- setItem(‘key’)
- removeItem(‘key’)
cookie
作用:用于浏览器端和服务器端进行通信的
特点:
- 大小 4kb
- 每次发送请求都携带,导致占用带宽
- 保存在浏览器端
- cookie容易被截获,不安全
- 声明周期: 默认浏览器打开到关闭,可以认为设置
// 在存储的时候最好以json的形式进行存储
// 存储
var messge = JSON.stringify("数据")
localStorage.setItem('note_key',message);
// 读取
JSON.parse(localStorage.getItem('note_key'));