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指令可以创建一个子作用域，

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

转载于:https://my.oschina.net/u/3281152/blog/879879