欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

AngularJS

程序员文章站 2022-07-02 18:55:18
...

   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。