`
2008winstar
  • 浏览: 60817 次
  • 性别: 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。

分享到:
评论

相关推荐

    AngularJS书两本

    AngularJS,作为一款由Google维护的前端JavaScript框架,自2010年发布以来,一直在Web开发领域占据重要地位。这两本书《AngularJS_权威教程》和《AngularJS_深度剖析与最佳实践》将帮助我们深入理解并掌握这一强大的...

    AngularJS开发ASP.NET MVC

    ### AngularJS 开发 ASP.NET MVC #### 知识点概览 - **AngularJS与ASP.NET MVC结合的优势** - **AngularJS的特点与优势** - **AngularJS的基本概念(如数据绑定、指令等)** - **如何在ASP.NET MVC项目中引入...

    Mastering Web Application Development with AngularJS

    《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,...

    AngularJS1.x快速入门

    ### AngularJS1.x快速入门知识点总结 #### 一、AngularJS概述 - **定义**:AngularJS是一款由Google维护的开源JavaScript框架,主要用于构建动态Web应用程序。它采用MVC(Model-View-Controller)设计模式,并实现...

    angularJs demo 各种基本用法

    AngularJS 是一个强大的JavaScript框架,主要用于构建动态web应用。它通过数据绑定和依赖注入机制,极大地简化了前端开发。在"angularJs demo 各种基本用法"中,我们可以深入探讨以下几个关键概念:路由(router)、...

    ssm+bootstrap+angularJs案例

    【标题】"ssm+bootstrap+angularJs案例"是一个整合了Spring、SpringMVC、MyBatis、BootStrap和AngularJS技术的实践项目。这个案例主要针对初学者,旨在帮助他们快速理解并掌握这些技术在实际开发中的应用。 ...

    AngularJS Eclipse 1.2.0 插件下载

    AngularJS Eclipse 1.2.0 插件是专为开发者设计的一款强大的工具,它将AngularJS框架与Eclipse集成,极大地提升了开发AngularJS应用程序的效率。Eclipse是一款广泛使用的开源集成开发环境(IDE),而AngularJS则是一...

    Learning AngularJS.pdf (0分下载网)

    ### AngularJS概览 《Learning AngularJS》一书由Ken Williamson编写,于2015年由O'Reilly Media出版。本书旨在帮助读者深入了解AngularJS框架的核心概念和技术细节,适用于那些希望利用AngularJS进行Web应用程序...

    angularjs下拉树控件

    在本文中,我们将深入探讨如何在AngularJS框架中实现下拉树控件,这是一种结合了树形结构和下拉选择功能的用户界面组件。AngularJS是Google开发的一个强大的前端JavaScript框架,它允许开发者构建可维护、可扩展的...

    Pro AngularJS 英文版 源代码

    《Pro AngularJS》是AngularJS框架的一本权威指南,它深入介绍了这个强大的JavaScript框架,旨在帮助开发者充分利用AngularJS构建高效、可维护的Web应用程序。这本书的英文版源代码提供了书中实例和练习的完整实现,...

    AngularJS模块化开发--增删改查

    AngularJS是一款强大的JavaScript框架,由Google维护,主要用于构建单页应用程序(SPA)。在这个"AngularJS模块化开发--增删改查"的项目中,我们将会深入探讨如何利用AngularJS进行高效且结构化的应用开发,同时结合...

    Professional.AngularJS.1118832078

    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 ui.router嵌套路由demo

    AngularJS UI.Router是一个强大的路由模块,它为AngularJS应用程序提供了更复杂的导航结构和状态管理功能。这个"angularjs ui.router嵌套路由demo"是展示如何在AngularJS项目中使用UI.Router进行多级路由配置和页面...

    angularJs权威和精通angularjs

    AngularJS,作为一款由Google维护的前端JavaScript框架,自2010年发布以来,一直在Web开发领域占据着重要的地位。它以其强大的双向数据绑定、依赖注入和模块化设计,极大地提高了开发效率,使得构建复杂的单页应用...

    AngularJS详细使用说明从零到高

    ### AngularJS详细使用说明从零到高手 #### 一、AngularJS概述 AngularJS是一个用于构建动态Web应用程序的开源框架,由Google维护和支持。AngularJS的设计理念是将HTML作为模板语言,并通过扩展其语法来更好地定义...

    Angularjs 合集 Angularjs 合集

    这个合集包含了三本书籍,分别是《AngularJS by Example》、《AngularJS Web Application Development Cookbook》以及《Apress.Pro.AngularJS》,它们分别从不同的角度深入探讨了AngularJS的使用和开发。 ...

    AngularJS学习 chm 文件

    AngularJS,是由Google维护的开源JavaScript框架,用于构建单页应用程序(SPA)。它极大地扩展了HTML的功能,使得在客户端能够更高效地处理数据和逻辑,提供了丰富的开发工具和API,帮助开发者构建动态、交互性强的...

    《AngularJS即学即用》【书本源码下载】

    ### AngularJS基础知识与实战应用 #### 一、AngularJS简介 AngularJS是一种广泛使用的JavaScript框架,它由Google维护,主要用于构建动态网页应用。通过AngularJS,开发者可以利用HTML作为模板语言,并扩展HTML的...

Global site tag (gtag.js) - Google Analytics