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。
上一篇: Angularjs
下一篇: 浅谈jQuery/JS函数中的event(e)、element、this、event.target、event.currentTarget、tagName、nodeName...
推荐阅读
-
有关angularjs中ng-repeat循环中ng-model的问题
-
angularjs的内置函数你知道多少?angularjs的内置函数的介绍。
-
AngularJS HTML编译器介绍_AngularJS
-
AngularJS 2.0新特性有哪些_AngularJS
-
jQuery和AngularJS的区别浅析_AngularJS
-
深入解析AngularJS框架中$scope的作用与生命周期_AngularJS
-
angularjs实现时间轴效果分享
-
详解AngularJs与SpringMVC简单结合使用
-
详解AngularJs与SpringMVC简单结合使用
-
Spring Boot+AngularJS+BootStrap实现进度条示例代码