angular简介
- jQuery ：库
- 封装了一些常用的方法，我们主动的调用这些方法
-- 提高了代码的利用，以及代码后期的维护
- Angular: 前端框架
- 框架提供了一些结构或者模式，
- 我们是根据框架提供的结构或者模式去书写代码
- 由框架帮助我们去执行相应的操作。
什么是angular
- 1、一款非常优秀的前端高级 JS 框架。
- 2、有了这一类框架就可以轻松构建 SPA（single page application） 应用程序。
- 3、其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。
- 4、Angular不推崇DOM操作，也就是说在NG中几乎找不到任何的DOM操作。
Angular 的核心特性
指令
MVC
模块化 angular.module()
双向数据绑定
指令
- angular中以ng-开头的属性叫作指令
- ng-app 告诉angular来管理html代码，管理ng-app所在元素及其子元素。
- ng-click 用来注册点击事件,
var add = document.getElementById('add');
add.onclick=function(){
val = (val-0)+1; // num.value = (num.value - 0) +1
}
$scope.add = {
$scope.num = ($scope.num - 0 )+ 1;
} - ng-model：var num = document.getElementById('num').value
- ng-init :进行初始化操作: ng-init="user.name='小明'"
模块(module)
- angular.module('myApp',[])
第一个参数是模块的名字
第二个参数是一个数组，数组的元素是该模块所依赖其他模块的名字
注意,即使不依赖任何模块，也需要给第二个参数传递一个空数组
否则angular.module('myApp')就是去获取名为myApp的模块对象
控制器(controller)
- angular.module('myApp',[]).controller('demoController',function($scope){})
第一个参数，是控制器的名字
第二个参数，是一个回调函数，在回调函数里写我们想要的js代码。
双向数据绑定
- 数据模型的值发生改变，就会导致页面值的改变.
页面值的改变，就会导致数据模型值的改变，这各种相互影响的关系就是双向数据绑定。 - ng-model 的使用
MVC 思想
- M:Model 模型 :数据存储，一些业务逻辑
- V:View 视图 ：就是用来展示数据
- C:Controller 控制器: 调度业务逻辑
常用指令
-
ng-bind
- 用来解决表达式闪烁问题
-
<p ng-bind="数据模型"></p>
注意：只能够在双标签中使用ng-bind指令
-
ng-cloak
- 用来解决表达式闪烁问题
<p class="ng-cloak">{{name}}</p>- 利用angular在加载会移除页面上所以名为ng-cloak的样式名的特性。
-
ngSanitize模块
npm install angular-sanitize- 使用的是ng-bind-html指令来渲染数据模型。
-
ng-repeat
可以用来循环输出数组
写在哪个元素上就是循环哪个元素。
-
语法：类似于forin 循环
<div ng-repeat="item in data ">{{item}}</div>
+ track by $index 解决数组中数据有重得的问题
+<li ng-repeat="item in tesData track by $index"></li> 还可以用来渲染key,value对
-
ng-repeat 在遍历里会暴露一些数据模型,
- $even:提供了一个布尔值，当为true时表示当前数据是第偶数条数据,从索引0开始计算
- $odd:提供了一个布尔值，当为true时表示当前数据是第奇数条数据,从索引0开始计算
- $first,$last ,$middle
ng-class:
-
从多种样式中选择一个样式
- 语法：类似于从一个key,value对象中获取其中一个属性的值
- ng-class="{'A':'red','B':'blue','C':'green'}"
-
从多种样式中选择多个
- 语法：也是写一个key,value对象，这里的key是我们提供的类样式名，value是一个布尔值，为true时对应的key会被作为样式名加入到class中
ng-hide/ng-show
- ng-hide：需要一个布尔值：当为true时为隐藏当前元素
- ng-show: 需要一个布尔值：当为true时为显示当前元素
ng-if:需要一个布尔值：当为true时为显示当前元素
为false时是删除当前元素
ng-switch:与ng-switch-when同用，类似与js中的switch case
<div ng-switch="name">
<div ng-switch-when="小明">我是小明</div>
<div ng-switch-when="小红">我是小红</div>
<div ng-switch-when="小月">我是小月</div>
</div>
其他常用指令
- ng-checked：
- 单选/复选是否选中,是单向数据绑定
- ng-selected：
- 是否选中
- ng-disabled：
- 是否禁用
- ng-readonly：
- 是否只读
常用事件指令
不同于以上的功能性指令，Angular还定义了一些用于和事件绑定的指令：
- ng-blur：失去焦点
- ng-focus：获得焦点
- ng-change：改变事件
- ng-copy：复制事件
- ng-click： ng-click="add()"
- ng-dblclick：双击事件
- ng-submit： 表单提交事件
