AngularJ
Posted 正在努力的澎澎
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJ相关的知识，希望对你有一定的参考价值。
Angular.js
Google开源的前端js结构化框架
- AngularJS特点和优点
双向数据绑定
声明式依赖注入
解耦应用逻辑，数据模型和视图
完善的页面指令
定制表单验证
Ajax封装
- 与jQuery的比较：
jQuery：
JS函数库
封装简化DOM操作
AngularJS：
JS结构化框架
主体不再是dom，而是页面中的动态数据
AngularJS能做什么项目：
构建单页面(SPS)Web应用或者WebApp应用
单页面应用（SPA）：single page application
特点：
1、将所有的活动局限于一个页面
2、当页面中有部分数据发生变化不去刷新整个页面，而是局部刷新
3、利用的就是Ajax技术，路由。
用jQuery实现
<input type="text">
<p>您输入的内容是：<span></span></p>
<javascript type="text/javascript">
$(function (){//文档（结构）加载完毕 相当于document.ready window.onload：整个页面加载完毕，包括图片
$(\'input\').keyup(function (){
var value = $(this).val();
$(\'span\').html(value);
});
});
用AngularJS实现
<html>
<body ng-app>
<input type="text" ng-model="username">
<p>您输入的内容是：<span>{{username}}</span></p>
</body>
</html>
ng-app（指令）：告诉angular核心它管理当前标签所包含的整个区域，并且会自动创建 $rootScope 根作用域对象， 告诉页面我来管理这个区域
通常放在body这个标签内
ng-model：将当前输入框的值与谁关联（属性名：属性值），并作为当前作用域对象($rootScope)的属性
{{}}(表达式)：显示数据，从作用域对象指定属性名上去取
小技巧：当输入{{}}时，按着shift键，连按两下{{，会自动补全
数据绑定：数据从一个地方A转移到地方B，而且这个操作由框架完成
双向数据绑定：数据可以从view（视图层）流向model（模型），也可以由model流向view
视图（View）：也就是我们的页面（主要是angular指令和表达式）
模型（Model）：作用域对象（单前为$rootScope）,它可以包含一些属性和方法
当改变View中的数据，Model对象对应属性也会随之改变：ng-model：数据从view=>mdoel
当model域对象属性发生改变时，页面对应数据也会随之更新：{{}}表达式， 数据从model=>view
ng-init 用来初始化当前作用域变量 作用就是为当前的作用域对象初始化数据
三个重要对象
1、作用域对象
一个js实例对象，ng-app指令默认会创建一个根作用域对象($rootScope)
它的属性和方法与页面中的指令或表达式是关联的
2、控制器对象
用来控制AngularJS应用数据的实例对象
ng-controller：指定控制器构造函数，angular会自动new此函数创建控制器对象
同时angular还会创建一个新的作用域对象$scope，它是$rootScope的子对象
在控制器函数中声明$scope形参，Angular会自动将$scope传入
3、依赖注入
依赖对象：完成某个特定功能需要某个对象才能实现，这个对象就是依赖对象
依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入
angular的$scope对象就是依赖对象，并且是依赖注入的形式进行使用
注意：形参必须说特定的名称，否则angular无法注入会抛出异常
回调函数的event就是依赖对象
回调函数有形参就是依赖注入
命令式：更加注重的是执行的过程
声明式：更加注重的是执行的结果，声明式是对命令的局部包装
两个页面语法
1、表达式
2、指令
以上是关于AngularJ的主要内容，如果未能解决你的问题，请参考以下文章