AngularJS技术交流(基础篇)
AngularJS学习(一)—— 概览
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入门教程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指令实现循环输出
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简介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技术简介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入门
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基础语法
这个主要是做模块的注册，创建和索引，譬如我们ng-app想把这个注册成为一个服务就要用，当我们引用索引一个模块的时候也要使用
angular.module(name, [requires], [configFn]); #name 类型string创建的检索模块的名称 #requires 简单理解就是你需要包含的使用模块，譬如ngRoute路由模块 #configFn 可以选配的功能模块，功能和module.config类似
们现在用service重写
复制代码 代码如下:
<!doctype html> <html>
<head> <script src="angular.min.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module('myapp',[]) .value('testvalue','widuu') .service('testservice', function(testvalue){ ble = function(){ return "this will output:hello "+testvalue; } } ); app.controller('mytest',function($scope,testvalue,testservice){ $scope.test = "hello "+ testvalue; $scope.output = ble(); }); </script> <title>learing argularjs--widuu</title>
AngularJs基础（60分钟入门）
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⼊门学习⽂档之⼀⼀、数据双向绑定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技术之前要掌握的技术
学习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 的不同版本。
AngularJS基础知识
AngularJS基础知识1.AngularJS是什么？Angular官网：https:///，API: /apiAngularJS是一个MV*（Model-View-Whatever, 不管是MVC或者MVVM，统称为MDV （Model Drive View））的JavaScript框架，是Google推出的SPA（single-page-application, 单页面应用），即协助搭建单页面工程的开源前端框架。
通过AngularJS可以使得开发与测试变得更容易。
AngularJS试图成为Web应用中的一种端对端的解决方案。
它由2009年发布第一个版本，由Google进行维护。
AngularJS的核心思想就是将视图与业务逻辑解耦，而实现方法则是通过数据和视图的双向数据绑定实现。
解耦的代码更有利于进行测试。
图1. 双向数据绑定实现解耦AngularJS依然遵循MVC模式开发，鼓励视图（View）、数据（Model）、逻辑（Controller）组件间的松耦合。
图2. 控制器通过依赖注入各项所需要的服务，实现解耦AngularJS将测试与应用程序编写看得同等重要，在编写模块的同时即可编写测试代码。
而且由于实现了各组件的松耦合，因此使得这种测试更容易实现。
AngularJS在编写一个单页面应用时的通常顺序如下：图3. AngularJS构建单页面应用时的顺序第一步是根据设计好的页面布局，进行HTML代码的编写，在编写的过程中，为相应的控件和元素设置与AngularJS对应的指令（如ng-app, ng-controller, ng-click, ng-model 等）；第二步是在控制器Controller中根据业务逻辑，编写代码改变模型的值，由于数据和视图双向绑定，因此视图中的值会相应改变；第三步是编写控制器中所需要依赖的各项服务的代码。
这些服务可能是AngularJS中已经自带的服务（如$http, $timeout, $q, $filter等），也可以是根据业务实际需要编写的自定义service。
angularjs语法
angularjs语法【实用版】目录1.AngularJS 简介2.AngularJS 的语法基础3.AngularJS 的常用指令4.AngularJS 的组件与服务5.AngularJS 的优点与应用场景正文1.AngularJS 简介AngularJS 是一款由 Google 开发的开源 Web 应用程序框架，它可以让开发者更方便地创建、维护和扩展 Web 应用程序。
AngularJS 采用了 MVC（Model-View-Controller）设计模式，将应用程序拆分成模型、视图和控制器三个部分，实现了数据与表现的分离，使得 Web 应用程序更易于维护和扩展。
2.AngularJS 的语法基础AngularJS 的语法基础主要包括以下几个方面：(1) 声明式编码：AngularJS 采用了声明式编码方式，通过 HTML 标签来声明应用程序的组件、指令和属性。
(2) 数据绑定：AngularJS 提供了数据绑定功能，可以实现视图与模型之间的数据同步。
数据绑定的语法为：{{变量名}}。
(3) 指令：AngularJS 提供了一系列指令，用于实现应用程序的特定功能。
指令的语法为：<指令名称>。
(4) 过滤器：过滤器用于在数据展示前对其进行处理。
过滤器的语法为：{{变量名 | 过滤器名称 ()}}。
(5) 控制器：控制器用于处理用户交互和应用程序逻辑。
控制器的语法为：ng-controller="控制器名称"。
3.AngularJS 的常用指令AngularJS 的常用指令包括：(1)ng-app：定义应用程序的根元素。
(2)ng-controller：定义控制器，用于处理用户交互和应用程序逻辑。
(3)ng-model：实现数据双向绑定，用于连接输入框和模型。
(4)ng-repeat：实现数据列表的渲染。
(5)ng-if、ng-else、ng-switch：实现条件渲染。
AngularJS入门教程
AngularJS入门教程来源: /article/13471AngularJS快速开始Hello World!开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”：1.使用您喜爱的文本编辑器，创建一个HTML文件，例如：helloworld.html。
2.将下面的源代码复制到您的HTML文件。
3.在web浏览器中打开这个HTML文件。
源代码<!doctype html><html ng-app><head><script src="/angular-1.0.1.min.js"></script> </head><body>Hello {{'World'}}!</body></html>请在您的浏览器中运行以上代码查看效果。
现在让我们仔细看看代码，看看到底怎么回事。
当加载该页时，标记ng-app告诉AngularJS 处理整个HTML页并引导应用：<html ng-app>这行载入AngularJS脚本：<script src="/angular-1.0.1.min.js"></script>（想了解AngularJS处理整个HTML页的细节，请看Bootstrap。
）最后，标签中的正文是应用的模板，在UI中显示我们的问候语：Hello {{'World'}}!注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。
下面，让我们看一个更有趣的例子：使用AngularJS对我们的问候语文本绑定一个动态表达式。
Hello AngularJS World!本示例演示AngularJS的双向数据绑定（bi-directional data binding）：1.编辑前面创建的helloworld.html文档。
AngularJS前端框架基础学习
AngularJS前端框架基础学习第一章：介绍AngularJSAngularJS是由Google开发的一款强大的JavaScript前端框架。
它的目标是简化Web应用程序的开发，并提供一种便于测试的架构。
与其他前端框架相比，AngularJS具有更高的可扩展性和可维护性。
它采用了MVVM（Model-View-ViewModel）架构模式，将应用程序的数据、展示和逻辑分离。
第二章：AngularJS的核心概念2.1 指令（Directives）AngularJS的核心功能之一是指令。
指令是通过HTML元素的属性来定义的。
通过使用指令，我们可以将自定义的逻辑应用到HTML元素上，从而实现更多的功能。
例如，ng-app指令用于定义应用程序的根元素，ng-model指令用于绑定输入框的值和应用程序的数据模型。
2.2 控制器（Controllers）AngularJS中的控制器用于处理应用程序的业务逻辑。
通过控制器，我们可以将数据和行为绑定到视图上。
控制器通常与特定的页面或组件相关联，并负责处理数据的获取、处理和展示。
2.3 模块（Modules）AngularJS应用程序是由多个模块组成的。
模块用于将应用程序的不同部分进行组织，使其更易于管理和维护。
每个模块可以包含指令、控制器、过滤器等组件。
第三章：数据绑定数据绑定是AngularJS的一个重要特性，它使得数据和视图之间的同步变得更加简单。
AngularJS提供了多种绑定方式，包括单向绑定、双向绑定和一次性绑定。
3.1 单向绑定单向绑定是指将数据从模型绑定到视图，并在数据发生变化时更新视图。
这一绑定方式适用于只读的数据展示。
3.2 双向绑定双向绑定是指将数据从模型绑定到视图，并在视图发生变化时更新模型。
这一绑定方式适用于表单输入元素等需要用户与之进行交互的场景。
3.3 一次性绑定一次性绑定是指将数据从模型绑定到视图一次，绑定成功后不再更新。
这一绑定方式适用于只需展示一次的静态数据。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
通过数据、
视图双向绑定
解耦
视 图
控 制 器
通过 依赖注入
解耦
服务A 服务B 服务C 服务D
LOGO
MVC
为什么需要MVC？
LOGO
➢ 代码规模越来越大，切分职责是大势所趋 ➢ 为了复用：很多逻辑是一模一样的 ➢ 为了后期维护方便：修改一块功能不影响其它功能
Controller的实现方式1
LOGO
效率
相比于框架来说，确实不 具备太多提高效率的地方
AG设计上更强调开发效 率，比如在框架内它就支 持单元测试，再比如降低 模块间的耦合度也有利于 程序员梳理项目逻辑
综上所述：Jquery跟AngularJS两者是出于不同的目的被创建的，解决的也是不 同的问题。当一个项目的重点是数据展示和执行，而不是分析，此时可能 AngularJS就会更胜一筹
作用域
❖作用域的生命周期
创建
创建控制器或者指令的时候，会创 建新的作用域，在在这个新建的控 制器函数运行时将作用域传递进去
链接 更新 销毁
在Angular开始运行的时候，所有 的$scope对象都会附加或者链接到 视图中
当事件循环运行时，它通常执行 在顶层$scope对象上，每个子作 用域 都执行自己的脏值检测。每个监 控函数都会检查变化。如果检测 到任意变化，$scope对象就会触 发指定的回调函数。
AngularJS中MVC的核心是$scope LOGO
➢ $scope是一个POJO(Plain Old JavaScript Object) ➢ $scope提供了一些工具方法$watch()/$apply() ➢ $scope是表达式的执行环境（或者叫作用域） ➢ $scope是一个树型结构，与DOM标签平行 ➢ 子$scope对象会继承父$scope上的属性和方法 ➢ 每一个Angular应用只有一个根$scope对象（一般位于ng-app上） ➢ $scope可以传播事件，类似DOM事件，可以向上也可以向下 ➢ $scope不仅是MVC的基础，也是后面实现双向数据绑定的基础 ➢ 可以用angular.element($0).scope()进行调试
AngularJS核心思想
LOGO
❖AngularJs的核心思想
▪ 将视图与业务逻辑解耦。在AngularJS中通过 数据视图双向绑定实现。这将提高代码的可测 试性。
这个过程由 AngularJs自动进行
开发者无需关注
UI
数
视 图
视图、数据双向更新
据 模
型
AngularJS核心思想
LOGO
▪ 遵循MVC模式开发，鼓励视图、数据、逻辑组 件间松耦合。
AngularJS技术交流
基础知识交流
LOGO
什么是AngularJS
LOGO
❖ AngularJS是协助和搭建单页面工程的开源前端框 架，它通过MVC模式使得开发和测试变的更容易
❖ AngularJS试图成为WEB应用中的一种端对端的 解决方案，它将指导开发整个应用
❖2009年诞生，由Misko Hevery 等人创建，后为 Google所收购，在google的多个产品中被使用
视图1
控制器
视图2
数据模型
Controller的实现方式2
LOGO
视图1
控制器1
控制器2
视图2
数据模型 问题：如果“控制器1”和“控制器2”里面有2个方法是一模一样的，怎么办？
Controller的实现方式3
LOGO
视图1
通用控制器
继承
继承
视图2
控制器1
控制器2数Βιβλιοθήκη 模型在ng中请不要这样做！
AngularJS中的Controller实现 LOGO
视图1
Service
视图2
控制器1
控制器2
数据模型
ng使用Controller的最佳实践 LOGO
➢ 不要试图去复用Controller，一个控制器一般只负责一小块视图 ➢ 不要在Controller中操作DOM，这不是控制器的职责 ➢ 不要在Controller里面做数据格式化，ng有很好用的表单控件 ➢ 不要在Controller里面做数据过滤操作，ng有$filter服务 ➢ 一般来说，Controller是不会互相调用的，控制器之间的交互会通过事件进行
Jquery与AngularJS比较
LOGO
Jquery
AngularJS
首先在行为上，他们两个 类库 就不一样
框架
声明？命令？
用一种命令的方式操作 DOM：拿到某一个节点 和某一个属性，查看它的 值，然后做这做那。
采用的是声明的方式
DOM操作
直接对DOM进行操作
很少操作DOM或者压根 就不建议操作DOM
清理作用域Angular会来进行，当 然我们也可以自己手动进行清理调 用$scope上的destory方法即可
LOGO
LOGO
❖模块化与依赖注入
一切都是从模块开始的
LOGO
ng官方推荐的模块切分方式 LOGO
app
controllers
directives
services
routes
filters
LOGO
目录
❖提高篇
▪ 过滤器 ▪ 控制器 ▪ 指令（自定义指令） ▪ 路由及依赖注入 ▪ 服务 ▪ XHR和服务器通讯 ▪ 事件
LOGO
目录
❖衍生篇
▪ 自己动手搭建自动化的前端开发平台 ▪ 扩展主题：用AngularJS开发移动应用 ▪ TDD与前端自动化测试
LOGO
问题
LOGO
我们已经学习了类似与Jquery这样的工具了 ，为什么还有耗费精力学习，angularJS？
❖2016年2月 AngularJS 1.5版本发布
❖ 2.0版本即将发布是对AngularJS一个重大的变更 据说是不往下兼容，也有人说是在开发迁移工具 ，目前都还不确定，但是唯一确定的一点就是2.0 版本将只支持H5的浏览器
AngularJS
LOGO
❖基础篇 ❖提高篇 ❖衍生篇
目录
❖基础篇
▪ AngularJS的核心思想 ▪ MVC ▪ 模块化与依赖注入 ▪ 双向数据绑定 ▪ 指令
➢ 任何一个ng应用都是由控制器、指令、服务、路由、过滤器等有限的模块类型构成的
➢ 控制器、指令、服务、路由、过滤器分别放在一个模块里面 ➢ 用一个总的app模块作为入口点，它依赖其它所有模块
模块的写法
LOGO
❖模块的简单写法：
angular.module('modulename', [x1,x2])//依赖于x1、x2模块 .directive('directiveName', function() {}) .factory('a', function() { return 123; })//创建服务 .filter('b',function(){})//创建过滤器 .value('d', 123)//创建变量，创建后可修改 .contract('c',324)//创建常量创建后不可修改