1、 双向绑定
2、 声明式依赖注入
3、 解耦应用逻辑，数据模型和视图
4、 完善的页面指令
5、 定制表单验证
6、 Ajax封装
jQuery：
Js函数库，封装简化dom *** 作
angular：
Js结构化框架，主体不再是Dmo，而是页面中的动态数据。
构建单页面（SPA）Web应用或Web App应用
单页面应用（SPA） single page applicatoin
特点：
1、 将所有的活动局限于一个页面
2、 当页面中的部分数据发生了改变不会去刷新整个页面，而是局部刷新
3、 利用的ajax技术。
// 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>
一个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 解析为空串：“”,不显示任何效果
对象的属性或方法
数组
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
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'));
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）