AngularJS详细使用说明从零到高手
Angular前端框架介绍和使用
Angular前端框架介绍和使用
一、前言
Angular是一个强大的前端框架，由Google公司开发和维护。它是基于组件架构和依赖注入机制，能够快速构建可扩展和高性能的前端应用程序。本文将介绍Angular框架的概述、基本原理以及如何使用它构建应用程序。
二、Angular框架概述
1. Angular的起源
Angular最初是由Google的Misko Hevery创建的，最初的版本是AngularJS。在一段时间的发展后，团队开始开发新的Angular 2版本，这个新版本的框架被设计为一个完全重新设计的框架，而不是仅仅是对旧框架进行的一些改进。
2. Angular的特性
Angular具有很多特性，其中一些最重要的特性如下所示：
（1）基于组件的架构 - Angular是基于组件化架构设计的，每个组件都是一个独立的功能单元，有着自己的业务逻辑和视图，能够极大地简化代码和维护。
（2）丰富的指令库 - Angular提供了大量的指令来帮助开发人员构建应用程序，包括ngIf、ngFor、ngClass、ngStyle等等。
（3）依赖注入 - Angular的依赖注入机制能够大大简化代码的复杂性，并且能够使代码更加模块化和可测试。
（4）模块化 - Angular允许模块化编程，使得应用程序的开发和维护更加容易。
3. Angular生态系统
Angular有一个庞大的生态系统，其中包括许多工具、库和插件，这些都是为了提高开发人员的效率和开发质量。以下是一些Angular相关的工具和库：
（1）Angular CLI - 一个命令行工具，可以帮助开发人员快速创建、构建和测试Angular应用程序。
AngularJs60分钟入门基础教程
AngularJs60分钟⼊门基础教程
AngularJs是⼀个不错的⽤于开发SPA应⽤（单页Web应⽤）的框架。单页Web应⽤（single page web
application，SPA），就是只有⼀张Web页⾯的应⽤。浏览器⼀开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页⾯上完成，由JavaScript来控制不同view在这个页⾯上的呈现。本⽂源于Youtube上⼀个不错的AngularJs的⼊门教程视频：AngularJS Fundamentals In 60-ish Minutes，主要讲解了AngularJs中Directive,Data Binding,Filter和Module的概念和⽤法。个⼈认为这四个概念是AngularJs的核⼼，⽀撑起了AngularJs的⾻架。掌握了他们对全局上把握AngularJs很有帮助。进阶则需要⼤量实践和官⽹API⽂档的阅读。
看看下图⼤致就可以了解AngularJs有何能耐。
在VS中创建⼀个空的Empty Web项⽬。
Directive 和 Data Binding
AngularJs 中的Directive概念不是很容易理解，⼊门阶段可暂且将其理解为⽤来扩展HTML的⼀种tag. Angularjs会解析这些tag，以实现Angularjs的Magic.
下⾯代码使⽤了两个Directive：ng-app 和 ng-model.
ngModel：⽤于在property和HTML控件（input,select, textarea）之间建⽴双向的Data Binding，也就是说HTML控件的值改变会反应到property上，反过来也同样成⽴。property就是通过{{}}创建的⼀个对象。
angularjs 字符串基本操作
在AngularJS中，可以使用JavaScript的字符串基本操作来处理字符串。以下是一些常见的字符串基本操作：
1. 获取字符串长度：使用字符串的`length`属性可以获取字符串的长度。例如：`var str = "Hello World"; var len = str.length;`，`len`的值为11。
2. 字符串连接：使用加号（+）可以将两个字符串连接起来。例如：`var str1 = "Hello"; var str2 = "World"; var result = str1 + " " + str2;`，`result`的值为"Hello World"。
3. 字符串截取：使用`substring()`方法可以截取字符串的一部分。该方法接受两个参数，第一个参数是起始位置，第二个参数是结束位置（可选）。例如：`var str = "Hello World"; var subStr = str.substring(6, 11);`，`subStr`的值为"World"。
4. 字符串查找：使用`indexOf()`方法可以查找字符串中某个子串的位置。该方法接受一个参数，即要查找的子串。如果找到了，返回子串的起始位置；如果找
不到，返回-1。例如：`var str = "Hello World"; var index = str.indexOf("World");`，`index`的值为6。
5. 字符串替换：使用`replace()`方法可以将字符串中的某个子串替换为另一个字符串。该方法接受两个参数，第一个参数是要替换的子串，第二个参数是替换后的字符串。例如：`var str = "Hello World"; var newStr = str.replace("World", "AngularJS");`，`newStr`的值为"Hello AngularJS"。
AngularJS入门教程
AngularJS入门教程
AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC 框架，由谷歌最初开发的开源项目，干净的架构吸引了大量粉丝，适合建立CRUD类型的业务应用程序，并不适合开发游戏等应用，使用声明性编程的用户界面和命令式编程的逻辑，支持现代桌面和移动浏览器InternetE某plorer版本8.0及以上。
AngularJS是一款客户端MVC的javacript框架，而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS架构)，如果你有Strut或SpringMVC等后端MVC框架编程经验，学习Angular会很快，基本是按照同一个MVC思路实现的。MVC模式见：
Model模型:
业务数据.通过$cope显露给视图View
View视图:
用户界面层数据绑定模型
调用控制器的功能。
使用声明指令directive以便重用代码
Controller控制器
将视图和模型胶合一起提供功能方法
使用服务，可重复使用的逻辑
除了上面MVC模型以外，还提供以下组件(有些类似安卓)：
服务组件
服务是可重用的业务逻辑组件可测试性
能作为单身对象创建
使用AngularJS依赖注入的注射依赖组件创建服的务作为一个模块的
一部分一个模块可以依赖于另一个模块
$q：异步请求使用，promie/deferred模块$routeProvider：配置路
由
$log：日志服务
E-Element元素名称:A-Attribute属性:
内建标准的指令有：
ng-app(A)用来启动AngularJSng-controller(A,C)绑定控制器ng-model(A,C)绑定模型ng-change(E,A)ng-click(A,C)ng-repeat(A,C) Helloword第一个程序
angularjs条件查询语句
angularjs条件查询语句
AngularJS 是一种使用条件语句来实现数据过滤和查询的 JavaScript 框架。它可以帮助开发人员通过一组特定的条件来查询数据，然后根据结果进行操作。条件查询语句是AngularJS 中的重要部分，它使得数据处理过程更加灵活和高效。在本文中，我们将介绍AngularJS 中常用的条件查询语句，并详细说明如何使用它们。
一、ng-if
ng-if 指令用于根据给定的条件决定是否显示 HTML 元素。如果条件为真，则元素会被显示，否则会被隐藏。ng-if 指令可以用于创建动态的数据视图。以下是一个使用
ng-if 指令的示例：
```
<input type="text" ng-model="name" />
<div ng-if="name">Hello, {{name}}!</div>
```
在这个示例中，输入框绑定到了一个名为 name 的模型，当用户在输入框中输入字符时，ng-if 指令会根据输入的内容创建或隐藏一个包含欢迎消息的 div 元素。
二、ng-show 和 ng-hide
ng-show 和 ng-hide 指令与 ng-if 指令类似，也可以根据给定的条件来显示或隐藏HTML 元素。不同的是，ng-show 和 ng-hide 指令不会在 DOM 中删除或添加元素，而是通过显示或隐藏元素的 CSS 属性来实现。以下是 ng-show 和 ng-hide 指令的使用示例：
三、ng-switch
```
<input type="text" ng-model="name" />
详解AngularJS路由resolve用法
详解AngularJS路由resolve⽤法
ng-route模块中的when()和ui-route的state()都提供了resolve属性。
为什么需要使⽤resolve？
当路由切换的时候，被路由的页⾯中的元素（标签）就会⽴马显⽰出来，同时，数据会被准备好并呈现出来。但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，⽽后再呈现出数据。这样就会导致页⾯会被渲染两遍，导致“页⾯UI抖动”的问题，对⽤户不太友好。resolve的出现解决了这个问题。
resolve是⼲嘛⽤的
resolve属性⾥的值会在路由成功前被预先设定好，然后注⼊到控制器中。通俗地将，就是等数据都“就位”后，才进⾏路由（其实我觉得也不能叫路由，因为路由是⼀些列的操作，其中就包括了设置resolve属性等等）。这样的好处就是页⾯仅会被渲染⼀遍。
<!--⾸页.html-->
<div ng-app="myApp">
<div><a ui-sref = "index">前往list.html</a></div>
<div ui-view></div><!--这⾥是路由视图存放的地⽅-->
</div>
<!--list.html>
<div>
<h1>HI,这⾥是list.html</h1>
<a ui-sref="index.list">点击加载list.html视图</a>
如何使用Angular进行前端开发
如何使用Angular进行前端开发
在现代的软件开发领域中，前端开发扮演着至关重要的角色。随着移动设备的
普及和互联网的高速发展，人们对于网页应用的需求也越来越高。而Angular作为
一种流行的前端开发框架，为开发者提供了许多强大的工具和功能，极大地简化了前端开发的流程。本文将介绍如何使用Angular进行前端开发，并介绍一些最佳实
践和技巧。
一、介绍Angular
Angular是由Google开发的一个开源JavaScript框架，用于构建Web应用。它
采用了组件化的架构，将整个应用拆分为多个可重用的组件，并通过数据绑定和依赖注入等机制实现了组件之间的通信和数据共享。Angular还提供了许多工具和库，用于处理路由、表单验证、HTTP请求等常见的前端开发任务。它的设计理念是简
单高效，使开发者能够更快地构建出功能强大且易于维护的Web应用。
二、安装和设置
要开始使用Angular进行前端开发，首先需要安装Node.js和npm（Node包管
理器）。Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，而npm则
是Node.js的包管理器，用于安装和管理JavaScript包。安装完Node.js和npm后，可以使用以下命令安装Angular CLI（命令行界面）：
```
npm install -g @angular/cli
```
安装完成后，就可以使用`ng new`命令创建一个新的Angular项目。例如，执
行以下命令可以创建一个名为"my-app"的项目：
```
智能社：Javascript之AngularJS(一)
江西省南昌市2015-2016学年度第一学期期末试卷
（江西师大附中使用）高三理科数学分析
一、整体解读
试卷紧扣教材和考试说明，从考生熟悉的基础知识入手，多角度、多层次地考查了学生
的数学理性思维能力及对数学本质的理解能力，立足基础，先易后难，难易适中，强调应用，不偏不怪，达到了“考基础、考能力、考素质”的目标。试卷所涉及的知识内容都在考试大纲的范围内，几乎覆盖了高中所学知识的全部重要内容，体现了“重点知识重点考查”的原则。
1．回归教材，注重基础
试卷遵循了考查基础知识为主体的原则，尤其是考试说明中的大部分知识点均有涉及，其中应用题与抗战胜利70周年为背景，把爱国主义教育渗透到试题当中，使学生感受到了数学的育才价值，所有这些题目的设计都回归教材和中学教学实际，操作性强。 2．适当设置题目难度与区分度
选择题第12题和填空题第16题以及解答题的第21题，都是综合性问题，难度较大，学生不仅要有较强的分析问题和解决问题的能力，以及扎实深厚的数学基本功，而且还要掌握必须的数学思想与方法，否则在有限的时间内，很难完成。 3．布局合理，考查全面，着重数学方法和数学思想的考察
在选择题，填空题，解答题和三选一问题中，试卷均对高中数学中的重点内容进行了反复考查。包括函数，三角函数，数列、立体几何、概率统计、解析几何、导数等几大版块问题。这些问题都是以知识为载体，立意于能力，让数学思想方法和数学思维方式贯穿于整个试题的解答过程之中。
二、亮点试题分析
1．【试卷原题】11.已知,,A B C 是单位圆上互不相同的三点，且满足AB AC →
angularjs的几种常见写法
angularjs的⼏种常见写法
学习angularjs不久，遇见的angularjs的写法也是很多的感觉，今天就在这⾥记录⼀下，还有没见过的，继续学习中。。。angularjs 常⽤的⼏种种写法
1、链式：
angular.module( 'myApp',['ui.bootstrap'] ).controller( ' myCtrl ' , function($scope,$http){ })
[‘’]⾥⾯的是依赖的项(我⽐较喜欢叫她引⽤)
2、单独定义
(function(){
var app=angular.module('myApp',['ui.bootstrap']);
app.controller('myCtrl',['$scope','$http',myCtrl]);
function myCtrl($scope,$http){}
})();
这⾥加了⼀个(function(){})();我也不是太明⽩，好像是加载js的作⽤，但是链式就不⽤加这个
3、混合使⽤
(function(){
var app=angular.module('myApp',['ui.bootstrap']);
app.controller('myCtrl',['$scope','$http',function($scope,$http){}]);
})();
如何利用angular
如何利⽤angular
导语
Angular2（已经统⼀更名为Angular，⽽Angular1表⽰1.x版本，以下统称Angular都是2.x版本以上）的⽬标是⼀套框架多个平台，这是所有前端⼯作的理想⽬标。
angular-cli它是angular框架官⽅的⼀个构建⼯具，当你使⽤ng new xxx创建⼀个项⽬时，所⾃动⽣成的项⽬结构是很有良⼼的。
我会从它开始，以我们⽬前⽣产项⽬中的⼀些经验，分享⼀些很基础的东西，希望有助于你了解整个Angular。
注：angular-cli的项⽬更新很频繁，但现在已经是rc0版本，所以以下不再探讨任何bate版本的内容。⼀、安装注意项⽬
angular-cli的核⼼是webpack，以及npm做为依赖包。但往往在安装过程中会遇到很多奇怪问题，我把这⼀切都追根于⽹络问题。
相信很多利⽤npm解决依赖包的⼈都知道淘宝有良⼼产品 cnpm，但这⼀次cnpm在安装angular依赖包时可能会⾏不通。那么⼀个正确的安装依赖包的姿势应该是：
1、Windows下必须是【管理员模式】下运⾏CMD；再使⽤ng命令。
2、当ng new xx创建项⽬时会⾃动执⾏npm install下载依赖包。
3、如果你⽹络没有问题的情况下，此时ng serve就可以正常运⾏。
然，很多时候，你可能会收到像：
懵逼了吧，⽆从下⼿了吧。其实是因为所依赖的.d.ts声明⽂件是存在rawgit⾥，靠腰啊，⼤部分⽹络环境是被抢！！所以类似这种问题，建议解决你的⽹络问题，那就是VPN。这也是前⾯我说cnpm也帮不了你的原因，⽆意⿊cnpm！
angularjs define方法
在AngularJS中，`define`方法通常与RequireJS一起使用，用于定义模块和它们的依赖关系。
RequireJS是一个JavaScript模块加载器，它支持异步模块加载，并且可以很好地与AngularJS 集成。在RequireJS中，`define`方法用于定义一个模块及其依赖项。`define`方法的基本语法如下：
```javascript
define(['dependency1', 'dependency2'], function(dependency1, dependency2) { // 模块代码
});
```
其中，`['dependency1', 'dependency2']`是一个数组，列出了该模块所依赖的其他模块，而函数参数`dependency1`和`dependency2`则是这些依赖模块的实例。在函数内部，你可以编写模块的实现代码。
在AngularJS中使用RequireJS的`define`方法，可以帮助你更好地组织和管理代码，实现模块化开发。这样，你可以将不同的功能分割成独立的模块，每个模块都有自己的依赖和代码，这有助于提高代码的可维护性和可测试性。
例如，如果你有一个名为`TeasingModel`的AngularJS模块，并且你想要使用RequireJS来管理它的依赖，你可以这样定义它：
```javascript
define(['angular', 'model/TeasingModel'], function(angular, TeasingModel) {
Angular技术的应用和案例
Angular技术的应用和案例
近年来，随着互联网的发展，前端技术的重要性逐渐显现。Angular技术作为一种强大的前端框架，广受程序员的喜爱。今天，我想与大家分享一些Angular技术的应用和案例。
一、Angular技术的应用
Angular技术可用于开发各种类型的Web应用程序，包括单页
面应用程序（SPA）、响应式Web应用程序（RWA）和移动Web
应用程序。在这些应用程序中，Angular技术可以提供快速的开发、高效的性能和强大的可扩展性。
(1) 单页面应用程序
单页面应用程序是指只有一个HTML页面，用户在不刷新页面的情况下浏览不同的内容。这种应用程序需要前端框架提供复杂
的路由逻辑。Angular技术通过提供多种路由方式支持单页面应用
程序开发。
(2) 响应式Web应用程序
响应式Web应用程序是指可以在不同设备和分辨率下自适应地呈现。Angular技术通过引入Material Design和Bootstrap等UI库，提供了丰富的响应式设计元素，以及可以灵活布局的网格系统，
方便开发响应式Web应用程序。
(3) 移动Web应用程序
移动Web应用程序需要具备高性能和轻量化的特点，可以通过Angular技术提供的IONIC框架实现。IONIC框架是一个基于Angular技术的Hybrid移动应用程序开发框架，可以轻松地将
Web应用程序打包成原生移动应用程序。
二、Angular技术的案例
(1) 微软的Office 365：
微软的Office 365是一个领先的云业务解决方案，它基于Angular技术构建了一个响应式Web应用程序。该应用程序可以
初识 Angularjs1.x ,了解5个W和1个H
What 什么是angularjs
AngularJS是Google开发的纯客户端JavaScript技术的WEB框架When 什么时候使用
当你需要开发一个单页应用的时候，就可以使用angularjs 方便的开发一
个优雅的WEB 系统
Where 在哪里用
可以用在一些管理系统应用上，比如客户管理系统，订单管理系统等，还可以用在现在流行的移动开发上面
Who 谁要用
专注于WEB前端开发的前端工程师们
Why 为什么要用
高性能的WEB开发框架，让我们在架构系统时，无需考虑更多的核心处理数据，只需要专注于我们的业务逻辑处理即可，使用ng 可以仅仅通过更
新状态来更新我们的页面内容而无需操作DOM，加速页面渲染速度，则时页面无需刷新，用户体验更顺畅
How 怎么用
引用angularjs ,定义页面中ng-app=”YourApplication”
更多细节，请继续关注同类下其他文章
angular手册
angular手册
摘要：
1.引言
2.Angular 框架介绍
3.Angular 的基本概念
3.1 组件
3.2 指令
3.3 服务
3.4 数据双向绑定
4.Angular 的特性
4.1 模块化
4.2 依赖注入
4.3 测试
5.Angular 的架构
5.1 客户端
5.2 服务器端
5.3 数据层
6.Angular 的安装与配置
7.Angular 的实践与最佳实践
8.Angular 的生态系统
8.1 组件库
8.2 工具库
8.3 开发工具
9.Angular 的发展与未来
10.总结
正文：
Angular 是一个由谷歌开发的开源JavaScript 框架，用于构建高效、可维护的单页面应用程序。作为一个前端开发框架，Angular 提供了一套完整的解决方案，包括组件化架构、数据双向绑定、依赖注入等特性，使得开发者能够更轻松地构建复杂的Web 应用。
Angular 的基本概念包括组件、指令、服务和数据双向绑定。组件是Angular 应用程序的基本构建块，可以封装HTML、CSS 和JavaScript 代码。指令用于扩展HTML 元素的行为和样式。服务是一种特殊类型的组件，用于封装应用程序中的业务逻辑。数据双向绑定是Angular 的核心特性之一，允许开发者轻松地实现模型与视图之间的同步。
Angular 框架具有许多特性，如模块化、依赖注入和测试支持。模块化使得应用程序可以按需加载和维护。依赖注入允许开发者轻松地管理应用程序中的依赖关系。测试支持有助于确保应用程序的质量。
Angular 的架构包括客户端、服务器端和数据层。客户端负责处理用户交互和呈现视图。服务器端负责处理数据请求和响应。数据层负责处理数据存储和检索。
angular用法
angular用法
Angular是一个用于构建Web应用程序的开源框架。它使用TypeScript编程语言并采用模块化的方式进行开发。
Angular的用法如下：
1.安装：首先，需要通过npm安装Angular CLI（命令行界面），这是一个用于创建和管理Angular项目的工具。
2.创建项目：使用Angular CLI创建一个新的项目。在命令行中
运行`ng new my-app`，其中“my-app”是项目的名称。这将在当前目
录下创建一个新的Angular项目。
3.开发组件：Angular的核心概念之一是组件，它是应用程序的基本构建块。通过在命令行中运行`ng generate component my-component`，可以生成一个名为“my-component”的新组件。
4.编写逻辑：在生成的组件文件中，可以使用TypeScript编写该
组件的逻辑。可以在组件类中定义属性、方法和生命周期钩子函数等。
5.定义模板：在组件文件中，也可以定义一个HTML模板。模板用
于定义组件的外观和布局，可以包含插值、指令、事件绑定等。
6.样式化：可以为组件添加CSS样式，以定义其外观和样式。可
以使用内联样式或外部样式表。
7.数据绑定：Angular支持双向数据绑定，可以在模板中绑定组件的属性，并实现数据的自动更新。
8.路由：Angular提供了路由模块，用于管理应用程序的页面导航。可以定义路由配置，并在组件中导航到不同的页面。
9.服务：Angular中的服务是用于共享数据和逻辑的可注入对象。可以创建自定义服务，并在组件中使用依赖注入进行访问。
angularjs 原理
angularjs 原理
AngularJS 是一个基于 JavaScript 的开源前端框架，其核心原
理是利用 HTML 中的自定义标签和属性来扩展 HTML 语法，
实现动态绑定和数据驱动。以下是AngularJS 的几个核心原理：
1. 双向数据绑定：AngularJS 通过使用指令和表达式来实现双
向数据绑定。它通过监测视图和模型之间的变化来更新数据，可以自动更新视图或模型中的任何一个。
2. MVC 架构：AngularJS 是基于 MVC (Model-View-Controller) 架构模式构建的。它通过分离视图 (View)、业务逻辑(Controller) 和数据模型 (Model) 的责任，使开发更加模块化和
可维护。
3. 指令系统：AngularJS 提供了一套内置指令，开发者也可以
自定义指令。指令允许开发者扩展 HTML 语法，使其具有更
强大的功能。通过指令，开发者可以创建自定义标签、属性、样式或行为，从而实现一些特殊的交互效果或功能。
4. 依赖注入：AngularJS 使用依赖注入来管理组件之间的依赖
关系。通过将依赖关系注入到组件中，开发者可以更方便地测试、复用和扩展代码。依赖注入使得代码更加模块化，降低了组件之间的耦合度。
5. 事件驱动：AngularJS 使用事件驱动的方式来处理用户交互
和数据变化。通过监听和触发事件，开发者可以实现视图和模型之间的通信，以及不同组件之间的通信。
总之，AngularJS 的原理是基于双向数据绑定、MVC 架构、指令系统、依赖注入和事件驱动等概念来构建灵活、可扩展和高效的前端应用程序。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
通过设置 <input> 标签里的 ng-model 属性,AngularJS会自动对数据进行双向绑定。我们还同 时进行了一些简单的数据验证：
Quantity: <input type="integer" min="0" ng-model="qty" required > Cost: <input type="number" ng-model="cost" required >
AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607]
资讯
文档
社区
</div> </body> </html>
script.js:
function InvoiceCntl($scope) { $scope.qty = 1; $scope.cost = 19.95;
}
end-to-endtest:
it('should show of angular binding', function() { expect(binding('qty * cost')).toEqual('$19.95'); input('qty').enter('2'); input('cost').enter('5.00'); expect(binding('qty * cost')).toEqual('$10.00');
</head> <body>
<div ng-controller="InvoiceCntl"> <b>Invoice:</b> <br> <br> <table> <tr><td>Quantity</td><td>Cost</td></tr> <tr> <td><input type="integer" min="0" ng-model="qty" required ></td> <td><input type="number" ng-model="cost" required ></td> </tr> </table> <hr> <b>Total:</b> {{qty * cost | currency}}
资讯
文档
社区
源自文库
关于
搜索
注册登录
← 上一篇
AngularJS开发指南01：AngularJS简介
发表于2012年9月20日rainer_H
下一篇 →
什么是 AngularJS?
AngularJS是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩 展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用数据绑定和依赖 注入，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完 美地和任何服务器端技术结合。
index.html:
<!doctype html> <html ng-app>
<head> <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script> <script src="script.js"></script>
版权声明：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0
rainer_H发表在开发指南分类，标签AngularJS、rainer_H、开发指南。将本文加入收藏夹。
要发表评论，您必须先登录。
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示 设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是 小花招）来让浏览器做我想要的事。
通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
类库-类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使 用类库。类库有： jQuery 等 框架-框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起 主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有： knockout 、 sproutcore 等。
});
运行效果 Invoice:
Quantity 1
Cost 19.95
Total:$19.95
试一下上面这个例子，然后我们一起来看下这个例子的工作原理。 在 <html> 标签里,我们用一个 ng-app 标识符标明这是一个AngularJS应用。这个 ng-app 标识 符会使AngularJS自动初始化(autoinitialize)你的应用。 我们用 <script> 标签来加载AngularJS脚本：
关于
搜索
注册登录
← 上一篇
AngularJS开发指南02：引导程序
发表于2012年9月22日rainer_H
概览
这一节解释了AngularJS初始化的过程，以及需要的时候你该如何修改AngularJS的初始化。
AngularJS的 <script> 标签
这个示例展示了我们推荐的整合AngularJS的方法，它被称之为“自动初始化”。
构建一个CRUD应用可能用到的全部内容包括：数据绑定、基本模板标识符、表单验证、路由、深度链 接、组件重用、依赖注入。 测试方面包括：单元测试、端对端测试、模拟和自动化测试框架。 具有目录布局和测试脚本的种子应用作为起点。
AngularJS的可爱之处 AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一
AngularJS能将你从以下的噩梦中解脱出来： 使用回调：回调的使用会打乱你的代码的可读性，让你的代码变得支离破碎，很难看清本来的业务逻 辑。移除一些常见的代码，例如回调，是件好事。大幅度地减少你因为JavaScript这门语言的设计而不 得不写的代码，能让你把自己应用的逻辑看得更清楚。 手动编写操作DOM元素的代码：操作DOM是AJAX应用很基础的一部分，但它也总是很“笨重”并且 容易出错。用声明的方式描述的UI界面可随着应用状态的改变而变化，能让你从编写低级的DOM操作 代码中解脱出来。绝大部分用AngularJS写的应用里，开发者都不用再自己去写操作DOM的代码，不过 如果你想的话还是可以去写。 对UI界面读写数据：AJAX应用的很大一部是CRUD操作。一个经典的流程是把服务端的数据组建成内 部对象，再把对象编成HTML表单，用户修改表单后再验证表单，如果有错再显示错误，然后将数据重 新组建成内部对象，再返回给服务器。这个流程里有太多太多要重复写的代码，使得代码看起来总是在 描述应用的全部执行流程，而不是具体的业务逻辑和业务细节。 开始前得写大量的基础性的代码：通常你需要写很多的基础性的代码才能实现一个“HelloWorld”的 应用。用AngularJS的话，它会提供一些服务让你很容易地正式开始写你的应用，而这些服务都是以一 种Guice-likedependency-injection式的依赖注入自动加入到你的应用中去的,这让你能很快的进入你 应用的具体开发。特别的是，你还能全盘掌握自动化测试的初始化过程。
一个简单的AngularJS实例
下面是一个包含了一个表单的典型CRUD应用。表单值先经过验证，然后用来计算总值，这个总 值会被格式化成本地的样式。下面有一些开发者常见的概念，你需要先了解一下：
将数据模型(data-model)关联到视图(UI)上； 写、读、验证用户的输入； 根据模型计算新的值； 将输出格式本地化。
AngularJS的“禅道(理念)”
Angular信奉的是，当组建视图(UI)同时又要写软件逻辑时，声明式的代码会比命令式的代码好得 多，尽管命令式的代码非常适合用来表述业务逻辑。
将DOM操作和应用逻辑解耦是一种非常好的思路，它能大大改善代码的可调性； 将测试和开发同等看待是一种非常非常好的思路，测试的难度在很大程度上取决于代码的结构； 将客户端和服务器端解耦是一种特别好的做法，它能使两边并行开发，并且使两边代码都能实现重用； 如果框架能够在整个开发流程里都引导着开发者：从设计UI，到编写业务逻辑，再到测试，那对开发者 将是极大的帮助； “化繁为简，化简为零”总是好的。
端对端的解决方案
AngularJS试图成为成为WEB应用中的一种端对端的解决方案。这意味着它不只是你的WEB应用 中的一个小部分，而是一个完整的端对端的解决方案。这会让AngularJS在构建一个CRUD（增加 Create、查询Retrieve、更新Update、删除Delete）的应用时显得很“固执”（原文为 opinionated,意指没有太多的其他方式）。但是，尽管它很“固执”，它仍然能确保它的“固执”只 是在你构建应用的起点，并且你仍能灵活变动。AngularJS的一些出众之处如下：
样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主 要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用 AngularJS构建，就得了解什么不适合用AngularJS构建。
如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不 同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如 jQuery 可能会更好。
上面的这个例子里， {{}} 里的表达式让AngularJS把从输入框中获得的数据相乘，然后把相乘结 果格式化成本地货币样式，然后输出到页面上。
值得一提的是，我们既没有调用任何AngularJS的方法，也没有像用框架一样去编写某个具体逻 辑，就是完成了上述功能。这个实现的背后是因为浏览器做了比以往生成静态页面更多的工作，让它 能满足动态WEB应用的需要。AngularJS使得动态WEB应用的开发门槛降到不需要类库或者框架的程 度。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过 使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
使用双大括号 {{}} 语法进行数据绑定； 使用DOM控制结构来实现迭代或者隐藏DOM片段； 支持表单和表单的验证； 能将逻辑代码关联到相关的DOM元素上； 能将HTML分组成可重用的组件。
终于，我们可以来看一下神秘的双大括号 {{}} 了:
Total: {{qty * cost | currency}}
这个 {{表达式}} 标记是AngularJS的数据绑定。其中的表达式可以是表达式和过滤器( {{ expression | filter }} )的组合。AngularJS提供了过滤器来对输入输出数据格式化。
这个输入框的widget看起来很普通，但如果认识到以下几点那它就不普通了： 当页面加载完后，AngularJS会依照widget里的声明的模型名字（ qty 、 cost ）生成同名变量。你可 以把这些变量认为是MVC设计模式中的M(Model)； 注意上面widget里的 input 有着特殊的能力。如果你们没有输入数据或者输入的数据无效，这 个 input 输入框会自动变红。输入框的这种新特性，能让开发者更容易实现CRUD应用里常见的字段验 证功能。
<!doctype html> <html xmlns:ng="http://angularjs.org" ng-app>
<body> ...
<script src="angular.js"><script> </body> </html>
下一篇 →
*将上面代码中的 script 标签放在页面的底部。将 script 标签放在底部缩短应用加载的时间，因为 这样HTML的加载不会被 angular.js 脚本的加载阻塞。你可以从http://code.angularjs.org获得最 新的版本。请不要在你的代码里面引用这个URL，因为它会暴露你的站点的安全隐患。如果只是实验 性质的开发，那链接到我们的站点没有什么问题。 * angular-[version].js 是具有可读性的版本,适合开发和调试。 * angular-[version].min.js 是压缩和混淆后的版本,适合部署到成型产品中。 *请将 ng-app 指令放到你的应用的标签根节点中,如果你想要AngularJS自动执行整个 <html> 程序 就把它放在 <html> 标签中。