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》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,...
AngularJS: Novice to Ninja is the perfect book to journey into the world of AngularJS, the superheroic JavaScript framework. Developed and maintained by Google, AngularJS brings the Model-View-...
AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中,并且得到众多前端工程师的青睐。, 《AngularJS高级程序设计》是AngularJS程序设计的高级指南。全书共25章,分为3个部分,每部分覆盖一组相关话题...
两本书的pdf:AngularJS中文版+精通AngularJS,提供方式:百度云链接+密码
Use a Material Design approach to position elements and create animations along with principles of the sophisticated AngularJS JavaScript framework. Take advantage of Angular Material, a UI component ...
<最新AngularJS开发宝典视频教程> ├最新AngularJS开发宝典—第001讲 什么是Angular及与Jquery实例对比分析.mp4 ├最新AngularJS开发宝典—第002讲 模块、控制器、视图模型、双向数据绑定模型、双向数据绑定.mp4 ├...
(精通AngularJS)Mastering Web Application Development with AngularJS code 源代码
Get introduced to the key features of AngularJS and understand its role in responsive design Learn various approaches for responsive web application development Discover practical examples to ...
AngularJS_权威教程.pdf AngularJS_深度剖析与最佳实践.pdf
这个我花了很大功夫下载的、是真正完整的、不做任何修改的、直接从官网下载的AngularJS的完整开发包(带文档)。具体的下载来源地址是https://code.angularjs.org/1.2.25/angular-1.2.25.zip。程序员不用太辛苦找...
A comprehensive guide to AngularJS, Google's open-source client-side framework for app development. Most of the existing guides to AngularJS struggle to provide simple and understandable explanations...
资源名称:AngularJS的介绍与研究 中文PPT版内容简介:AngularJS是一个前端的框架,跟后台的spring、struts框架类似,可以帮助我们快速的搭建和开发前端项目。与jquery等前端框架不同,AngularJS不仅仅是一个工具,...
本书是学习 AngularJS 的公认经典,内容全面,讲解通俗,适合各层次的学习者。作者拥有丰富的 AngularJS 开发和教学经验,也是一位全栈工程师。全书 35 章,由浅入深地讲解了 AngularJS 的基本概念和 基本功能,包括...
angularJS router filter service diractive
适合于AngularJS初学者
AngularJS Eclipse 插件为Eclipse提供对AngularJS的支持
AngularJS 开发 ASP.NET MVC.
AngularJS[1] 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义...
spring springmvc mybatis bootstart angularjs简单案例,入门级
AngularJS高级程序设计[3]