下载文档原格式
AngularJS学习（一）——概览1. 文章简述这篇主要通过几个小例子把angular的常用组件简单介绍一下2. data binding下面是一个简单通过quantity和costs计算Total的示例<div ng-appng-init="qty=1;cost=2"><b>Invoice:</b><div>Quantity: <input type="number"min="0"ng-model="qty"> </div><div>Costs: <input type="number"min="0"ng-model="cost"></div><div><b>Total:</b> {{qty * cost | currency}}</div></div>输出结果下面描述一下这段代码是如何运行的，这段代码看起来像一个带着一些新的标记的普通html 文件，在angular中，这样的文件叫template，当angular运行时，它会从这个template中去解析处理这些新的标记，并且加载、转换和呈现以dom的形式。
第一种标记在angular中被称为directives，他们为一些属性或者元素增加特殊的功能，比如上面的ng-app属性，angular识别到它会自动初始化为angular应用程序。
angular也为input 元素增加一些扩展的功能，比如接下来的ng-model，他可以将input的值存储到一个变量中，也可以把变量的值赋予到input中，这这绑定是live的绑定，一个变化另一个随之变化，称之为双向绑定。
AngularJS入门教程AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC 框架，由谷歌最初开发的开源项目，干净的架构吸引了大量粉丝，适合建立CRUD类型的业务应用程序，并不适合开发游戏等应用，使用声明性编程的用户界面和命令式编程的逻辑，支持现代桌面和移动浏览器InternetE某plorer版本8.0及以上。
AngularJS是一款客户端MVC的javacript框架，而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS架构)，如果你有Strut或SpringMVC等后端MVC框架编程经验，学习Angular会很快，基本是按照同一个MVC思路实现的。
MVC模式见：Model模型:业务数据.通过$cope显露给视图ViewView视图:用户界面层数据绑定模型调用控制器的功能。
使用声明指令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第一个程序开始一个Angular项目，可以直接拷贝这个源码项目到你的目录即可(GitHub)，然后在其基础上修改拓展。
例如一个inde某.html的代码如下图：其中有两个指令。
AngularJS⼊门（⽤ng-repeat指令实现循环输出循环输出列表很多项⽬在web服务端做，前端做好模版后后端写jsp代码，双⽅需要紧密合作，分清责任。
有些项⽬由后端提供restful⽅法，前端⽤ajax调⽤⾃⼰循环，这种⼀般是⼤把的jquery拼字符串，太不直观，有⼈搞出了js模板，也没好到哪⾥去。
⽤AngularJS就爽多了，语法和JSP类似：<!doctype html><html ng-app><head><meta charset="utf-8"><title>ng-repeat directive</title></head><body><table ng-controller="CartController"><caption>我的购物车</caption><tr><th>序号</th><th>商品</th><th>单价</th><th>数量</th><th>⾦额</th><th>操作</th></tr><tr ng-repeat="item in items"><td>{{$index + 1}}</td><td>{{}}</td><td>{{item.price | currency}}</td><td><input ng-model="item.quantity"></td><td>{{item.quantity * item.price | currency}}</td><td><button ng-click="remove($index)">Remove</button></td></tr></table><script src="../lib/angularjs/1.2.26/angular.min.js"></script><script>function CartController($scope) {$scope.items = [{name: "雷柏（Rapoo） V500 机械游戏键盘机械黄轴", quantity: 1, price: 199.00},{name: "雷柏（Rapoo） V20 光学游戏⿏标⿊⾊烈焰版", quantity: 1, price: 139.00},{name: "AngularJS权威教程", quantity: 2, price: 84.20}];$scope.remove = function (index) {$scope.items.splice(index, 1);}}</script></body></html>ng-repeat指令⽣命在需要循环内容的元素上，items和控制器上的变量名对应，item是为数组中单个对象起的别名。
AngularJS简介AngularJS（简称ng，官网api地址：/api）是由Google创建的一种JS框架，是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。
这种方式利用并且扩展HTML，CSS和javascript，并且弥补了它们的一些非常明显的不足。
AngularJS是为了克服HTML在构建应用上的不足而设计的。
HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。
AngularJS尝试去补足HTML本身在构建应用方面的缺陷。
AngularJS通过使用我们称为标识符(指令)(directives)的结构，让浏览器能够识别新的语法。
例如：使用双大括号{{}}语法进行数据绑定；使用DOM控制结构来实现迭代或者隐藏DOM片段；支持表单和表单的验证；能将逻辑代码关联到相关的DOM元素上；能将HTML分组成可重用的组件。
特性MVC针对客户端应用开发AngularJS吸收了传统的MVC基本原则。
MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。
AngularJS并不执行传统意义上的MVC，更接近于 MVVM（Moodel-View-ViewModel）。
Model: 是应用中的简单数据。
一般是简单的javascript对象。
ViewModel:是一个用来提供特别数据和方法从而维护指定view的对象。
viewmodel是$scope的对象，只存在于AnguarJS的应用中。
$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。
Controller：负责设置初始状态和参数化$scope方法用以控制行为。
需要指出的是controller 并不保存状态也不和远程服务互动。
View：是AngularJS解析、渲染和绑定数据后产生的HTML。
双向数据绑定数据绑定可能是AngularJS最酷最实用的特性。
前端开发Angular技术入门指南随着互联网和移动互联网的快速发展，前端开发在近年来变得越来越重要。
前端开发是构建网站和应用程序的关键环节，它负责用户界面的设计和开发。
而Angular技术作为前端开发的重要工具之一，在大型应用程序的开发中具有很高的使用率和广泛的应用。
本文将为大家介绍Angular技术，并提供一个入门指南。
一、Angular技术简介Angular是一个由Google开发的开源JavaScript框架，用于构建Web应用程序。
它使用TypeScript编写，是一组组件和服务的集合，可以帮助开发者构建高效、可维护的应用程序。
Angular通过采用模块化开发、组件化开发以及数据绑定等特性，提供了一种简单而高效的开发方式。
二、安装和配置Angular环境在开始使用Angular之前，我们首先需要安装和配置Angular的环境。
首先，我们需要安装Node.js以及npm（Node Package Manager），它们将为我们提供必要的依赖和工具。
然后，我们通过运行npm命令来安装Angular CLI（Command Line Interface），Angular CLI是一个用于快速创建、构建和测试Angular应用程序的命令行工具。
安装完成后，我们可以使用ng命令来创建一个新的Angular应用程序。
三、组件和模块化开发在Angular中，组件是构成应用程序的基本单元。
每个组件负责一部分用户界面，并通过数据绑定和事件处理等机制来实现交互。
而模块则用于组织组件和其他相关代码，将它们封装成一个功能完整的单元。
在Angular中，我们使用@NgModule装饰器来定义一个模块，并使用@Component装饰器来定义一个组件。
四、数据绑定和模板语法数据绑定是Angular中一个非常强大的特性，它可以将数据和用户界面进行绑定，使得数据的改变可以自动更新到用户界面上。
Angular提供了三种类型的数据绑定：插值表达式、属性绑定和事件绑定。
AngularJS入门一、总括本文用于解释Angular初始化的过程，以及如何在你有需要的时候对Angular进行手工初始化。
二、Angular <script> 标签本例用于展示如何通过推荐的路径整合Angular，实现自动初始化。
<!doctype html><html xmlns:ng="" ng-app><body>...<script src="angular.js"></body></html>∙将sciprt标签放置于页面底部。
这样做能避免因为加载angular.js而阻挡HTML的加载，从而降低应用的加载时间。
我们可以在中获取到最新版本的angularJs。
出于安全考虑，切勿在产品中直接引用这个地址来加载脚本。
但如果仅仅是研究学习使用的话，直接连接也无妨。
∙o选择：angular-[version].js 是方便阅读的一个版本，适合日常开发、调试使用。
o选择：angular-[version].min.js 是压缩、混淆后的版本，适合最终产品使用。
∙放置”ng-app”到应用的根节点中，如果你想让angular自动启动你的应用，通常可以放置于<html>标签中。
<html ng-app>∙如果我们需要使用老派风格的directive语法”ng:”，那么我们需要加入一个xml-namespace 到html标签中以“取悦”IE。
（这个是一个历史原因，我们也不推荐使用ng:）<html xmlns:ng="">三、自动初始化Angular会在DOMContentLoaded事件中自动初始化，Angular会找出由你通过ng-app这个directive指定的应用根节点。
如果找到，Angular会做以下事情：∙加载与module相关的directive。
AngularJs基础（60分钟⼊门）AngularJS 是⼀个创建富客户端应⽤的JavaScript MVC框架。
你仍然需要具有服务端后台，但⼤多数的⽤户交互逻辑将放到客户端上处理。
它可以创建单页的应⽤程序，⼀个页⾯的应⽤仅仅需要HTML,CSS和JavaScript在客户端。
它的⽬标是增强页⾯的模型-视图-控制（MVC）的功能，为简化开发和测试。
单页Web应⽤（single page web application，SPA），就是只有⼀张Web页⾯的应⽤。
浏览器⼀开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页⾯上完成，由JavaScript来控制不同view在这个页⾯上的呈现。
本⽂源于Youtube上⼀个不错的AngularJs的⼊门教程视频：，主要讲解了AngularJs中Directive,Data Binding,Filter和Module的概念和⽤法。
个⼈认为这四个概念是AngularJs的核⼼，⽀撑起了AngularJs的⾻架。
掌握了他们对全局上把握AngularJs很有帮助。
进阶则需要⼤量实践和官⽹API⽂档的阅读。
看看下图⼤致就可以了解AngularJs有何能耐。
在VS中创建⼀个空的Empty Web项⽬。
Directive 和 Data BindingAngularJs 中的Directive概念不是很容易理解，⼊门阶段可暂且将其理解为⽤来扩展HTML的⼀种tag. Angularjs会解析这些tag，以实现Angularjs的Magic.可以对照传统的Imperative UI来理解AngularJs的Declarative UI:AngularJs之前我们实现前台页⾯逻辑⼀般是通过给HTML元素设置ID，然后使⽤Javascript或jQuery来操纵HTML DOM，这就是典型的Imperative UI。
⽽AngularJs不再需要给HTML元素设置ID，⽽使⽤Declarative,由Declarative“指导”HTML 元素的⾏为。
angular⼊门学习⽂档之⼀⼀、数据双向绑定angular（下⾯统⼀简称ng）强⼤的地⽅莫过于它内置的数据双向绑定功能，下⾯我们通过⼀个简单的例⼦来演⽰ng强⼤的双向绑定数据的能⼒。
代码如下：1、dom结构：1.<!DOCTYPE html>2.<html lang="en" ng-app="myApp">3.<head>4. <meta charset="UTF-8">5. <title>Document</title>6. <script src="js/angular.js"></script>7.</head>8.<body>9. <form ng-controller="userInfoCtrl">10. <input type="text" ng-model="">11. {{}}12. <p ng-bind="userInfo.age"></p>13. </form>14.15.</body>16.</html>2、js代码：1.var app = angular.module('myApp',[]);2. app.controller('userInfoCtrl',function($scope){3. $erInfo = {4. name: '张三',5. age: '18'6. }7. })8. app.controller('userInfoCtrl',['$scope',function($scope){9. $erInfo = {10. name: '张三',11. age: '19'12. }13. }])上⾯的例⼦简单的实现了ng的双向绑定功能，那么到底是怎么实现的呢？1、先加载angular.js⽂件；2、在根节点html上（也可以是其他任何⼀个节点，在哪⾥添加，ng的边界就在哪⾥产⽣）添加ng-app指令，它会告诉浏览器，从这个地⽅开始，⾥⾯的内容都⽤ng去解析渲染；3、给form添加ng-controller，这是添加控制器（也可以叫作⽤域）的指令，它的作⽤是创建⼀个隔离的$scope对象,什么是$scope?提到$scope，还得先从$rootscope说起，$rootScope是ng中最接近全局作⽤域的对象。
学习AngularJS技术之前要掌握的技术AngularJS1.x 的学前要求AngularJS 提供了一套前端开发模式，比如“模块化、组件化、依赖注入”等，解决项目开发中结构组织的编写问题。
与 jQuery 类似的地方在于AngularJS 是可以让我们在开发中不需要过多的关注一些DOM 操作、兼容性等内容，而专注于业务的处理，在学习 AngularJS 之前，你必须得知道什么是数据类型、怎么进行流程控制、如何进行前后端交互、如何处理解析数据等基础知识，因为这些事情AngularJS 或其他框架是不会去帮我们处理的。
按照知识点类型来划分，大体有三块：一、必须要非常熟悉下面这几个知识点，我们才能处理用户提交的数据、后端传输的数据，才能知道怎么按照不同的业务去做不同的处理：1、数据类型；2、运算符；3、类型转换；4、流程控制；5、基本数据结构与处理（如数组、字符串、日期、集合等）；二、下面的知识点将帮助我们学会如何和后端进行交互，完成实际功能开发：1、http；2、ajax；3、CORS；4、jsonp；5、Promise、await/async；6、comet、SSE甚至是WebSocket；三、框架基本都基于对象或面向对象进行开发，使用框架，我们至少得知道什么是对象，如何面向对象，才能在框架基础上解决问题，毕竟框架不是万能的，实际开发中需要我们能够有基于框架的扩展开发能力，这也是区别于他人的核心竞争力。
具体至少包括以下几个知识点：1、对象；2、面向对象；3、组件等；AngularJS2 的学习要求AngularJS2 是 AngularJS1.x 的升华版，它继承了 1.x 的基本概念和特性，如“模块、组件、依赖注入”，同时又加入了一些新的功能特性，如“装饰器、组件强化”等。
最新版本的AngualarJS 底层代码基本全部重构了，并提供基于JavaScript、Dart、TypeScript 的不同版本。
