`
2008winstar
  • 浏览: 57525 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • chenke: 写的很好,也可以看看那这个文章,我感觉学的还可以。http:/ ...
    HTML

AngularJS

 
阅读更多

   1 指令标签

    ng-app

    ng-model:实现model的绑定

    ng-init:可在标签中初始化model的值

    ng-repeat="item in list":遍历list中的每一项

                      (key, value) in object

                      $index    number

                      $first       boolean

                      $last       boolean

                      $middle  boolean

                      $even     boolean

                      $odd       boolean

 

 

    ng-click:响应点击事件

    ng-view:

    ng-controller:

    ng-bind

    ng-bind-html

    ng-disabled

    ng-class

    ng-options

    ng-style

    ng-show

    ng-hide

    ng-if

    ng-include

    ng-switch

 

 

   2 Filters:可用于查询过滤、排序、格式化输出

   | filter: 'value'

   | orderBy:'name'

   | uppercase

 

   3 Module

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

 

   4 路由

   

app.config(function($routeProvider){
    $routeProvider.when('/',
        {
             controller: 'demoCtrl',
             templateUrl: 'template.html'
        }).when('/other-page',
        {
             controller: 'otherCtrl',
             templateUrl: 'otherTemplate.html'
        }.otherwise({redirectTo: '/'});
});

 

   出现在ng-app内部的form不是原生的HTML表单,而是被Angular封装过,是一个Angular指令;

   HTML原生的form表单不能嵌套,而Angular封装之后的form可以嵌套;

   若想在angular中使用原生form标签,可以在form标签中使用ng-pristine指令。

 

   Angular为表单内置了4种CSS样式

   (1)ng-valid 校验合法状态

   (2)ng-invalid 校验非法状态

   (3)ng-pristine 使用原生的form

   (4)ng-dirty 表单处于脏数据状态

 

    AngularJS指令声明方式选项

字母 声明风格 实例
E 元素 <my-menu title=Products></my-menu>
A 属性 <div my-menu=Products></div>
C 样式类 <div class=my-menu:Products></div>
M 注释 <!-- directive:my-menu Products -->

 

 

 

 

 

 

 

 

 

    创建service

    (1)使用service方法

app.service('serviceName', [dependencyArray, function(dependencyParameter){
	 this.property;
}]);

     service方法类似于构造函数,可以在方法中设置this的属性,最终通过类似new的方式返回一个对象。

 

    (2)使用factory方法

app.factory('serviceName', function() {
    return function(){
					
    };
});

    factory方法可以返回函数

 

    每个Angular应用都有一个$rootScope,$rootScope是最顶级的scope,它对应着含有ng-app指令的DOM标签。如果页面上没有指定其他$scope,Angular默认会把数据和函数都绑定到$rootScope上。要创建一个新的$scope对象,可以在相应的DOM标签上加入ng-controller指令,并设置它的controller对象。

 

   $scope可以理解为一个JavaScript对象,在这个对象上,既可以存储数据,也可以关联要在view上调用的方法;它实现了在Controller和view之间进行传递信息。

 

    通常情况下,scope遵循原型继承原则,意味着它们能够访问父级scope。Angular如果在当前scope范围内找不到相应的属性或方法,就会到父级scope范围去找,一直到$rootScope范围。但也有例外情况:有些指令属性可以选择性地创建一个独立的scope,让这个scope不继承它的父scope。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics