Angular的一些简单指令和基础知识点

Angularjs是Google开发的MVC框架,以数据与逻辑为核心

M：model 模块 读取数据 $scope

V : view 视图 页面上的标签 HTML

C： controller 控制器，用来关联 model和view

MVC设计模式的一些特点：

1.代码复用

2.代码维护方便

3.代码结构清晰 层次分明

Angularjs的简单指令

1: ng-app 用来定义一个应用的边界

2: ng-controller 用来将控制器跟视图进行关联

3： ng-show 用来控制当前元素是否显示

4： ng-hide 用来控制当前元素是否隐藏

5: ng-if 空来控制是否出现当前元素

6: ng-class 给当前元素添加一个样式

7: ng-disabled

8: ng-checked

9: ng-selected

10: ng-readonly

11: ng-include 去包含一个新的模板，放在当前元素里面

12：ng-bind 用来将模型上面的数据获取视图上面

13：ng-cloak 用来解决闪烁问题

14: ng-src

15：ng-href

16: ng-repeat 迭代数组

17：ng-init 初始化数据 ng-init="username='zhangsan',age=11"

18：ng-switch ng-switch-when

19: ng-model 将视图的数据流向到模型

事件，angluar 提供一套新的事件

$scope.active=true;

$scope.add=function(){

}

ng-click="add(active)"

ng-mouseover

angular 自定义指令

var App=angular.module("app",[]);

//directive 方法去定义指令

App.directive("myHello",function(){

return {

//指令的类型

//Element Class Mark Attribute

restrict:"",

replace:true,

template:"<h1>www</h1>"

//templateUrl:""

}

})

支持四种方式的调用

<my-hello></my-hello>

<div class="my-hello"></div>

<div my-hello />

<!-- directive: my-hello-->

双向数据绑定

1：模型的数据流向到视图 ng-bind {{}}

2：视图的数据可以流向到模型 ng-model

作用域：

js 里面使用过作用域:

通常来说，一段程序代码中所用到的名字并不总是有效/可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局部性，增强程序的可靠性，减少名字冲突。

angular 的作用域：

通常AngularJS中应用（App）是由若干个视图（View）组合成而成的，

而视图（View）又都是HTML元素，并且HTML元素是可以互相嵌套的，

另一方面视图都隶属于某个控制器（Controller），

进而控制器之间也必然会产生嵌套关系。

每个控制器（Controller）又都对应一个模型（Model）也就是$scope对象，

不同层级控制器（Controller）下的$scope便产生了作用域。

根作用域：它的作用范围是作用在整个 app 内 整个我们可以把它理解成

$rootScope

ng-init 初始化模型数据.

实际上就是往 $rootScope 上面去绑定数据.

通过ng-controller指令可以创建一个子作用域，

新建的作用域可以访问其父作用域的数据