Angular开发者指南(一)入门介绍
什么是Angular
AngularJS是动态Web应用程序的结构框架。 它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程序的组件。AngularJS的数据绑定和依赖注入消除了许多你不得不编写的代码。这一切都发生在浏览器中,使其成为任何服务器技术的理想合作伙伴。
动态应用程序和静态文档之间的动态适配常常通过以下方式解决
- 一个库:一组在编写网络应用程序时非常有用的函数。你的代码是负责在它调用库中它认为合适的。 例如jQuery
- 框架:Web应用程序的特定实现,其中你的代码填充详细信息。框架是负责,当它需要某些应用程序特定时调用你的代码。 例如,durandal,ember等。
AngularJS采取另一种方法。 它尝试通过创建新的HTML结构来最小化文档中心HTML和应用程序需要的阻抗之间的不匹配。 AngularJS通过我们调用指令的构造来教导浏览器的新语法。 示例包括:
数据绑定:{{}}
DOM控制结构,用于重复,显示和隐藏DOM片段
支持表单和表单验证
将新行为附加到DOM元素,例如DOM事件处理
将HTML分组为可重用组件。
一个完整的客户端解决方案
AngularJS不是构建Web应用程序的客户端的整体谜题中的单一部分。它处理所有你曾经用手写的DOM和AJAX粘合代码,并把它放在一个定义良好的结构中。这使得AngularJS认为应该如何构建一个CRUD(创建,读取,更新,删除)应用程序。 但是,虽然它的意见,它也试图确保其意见只是一个起点,你可以轻易改变。 AngularJS提供了以下开箱即用的:
在一个连贯的集合中构建一个CRUD应用程序所需的一切:数据绑定,基本模板指令,表单验证,路由,深层链接,可重用组件和依赖注入
可测试性故事:单元测试,端到端测试,模拟和测试线束
发布应用程序以目录布局和测试脚本为起点。
AngularJS的讨巧之处
AngularJS通过向开发人员提供更高级别的抽象来简化应用程序开发。像任何抽象一样,它以灵活性为代价。换句话说,不是每个应用程序都适合AngularJS。AngularJS是用CRUD应用程序构建的。幸运的是,CRUD应用程序代表了大多数Web应用程序。 为了理AngularJS有什么好处,但它有助于理解什么时候一个应用程序不是一个很好的适合AngularJS。
游戏和GUI编辑器是使用密集和棘手的DOM操作的应用程序的例子。这些类型的应用程序不同于CRUD应用程序,因此可能不是一个很好适合AngularJS。在这些情况下,最好使用具有较低抽象级别的库,例如jQuery。
AngularJS的禅
注册回调:注册回调会杂乱你的代码,使得很难看到树的森林。 删除常见的样板代码,如回调是一件好事。 它大大减少了你必须做的JavaScript编码量,它使你更容易看到你的应用程序做什么。
以编程方式操纵HTML DOM:操纵HTML DOM是AJAX应用程序的基石,但它很繁琐,容易出错。通过声明性地描述在应用程序状态更改时UI应该如何更改,您将从低级DOM操作任务中释放出来。大多数使用AngularJS编写的应用程序从不需要以编程方式操作DOM,尽管如果你愿意的话。
与UI进行数据封送:CRUD操作构成了大多数AJAX应用程序的任务。 从服务器到内部对象到HTML表单的编组数据流,允许用户修改表单,验证表单,显示验证错误,返回到内部模型,然后返回到服务器,创建了很多样板文件 码。 AngularJS消除了几乎所有的这个样板,留下描述应用程序的整体流程的代码,而不是所有的实现细节。
写入大段的初始化代码只是为了开始:通常你需要写很多管道只是为了获得一个基本的“Hello World”AJAX应用程序工作。使用AngularJS,您可以使用服务轻松引导应用程序,这些服务以类似Guice的依赖注入方式自动注入到应用程序中。这允许你快速开始开发功能。作为奖励,你可以完全控制自动化测试中的初始化过程。
Angular开发者指南(一)入门介绍的更多相关文章
- Angular开发者指南(二)概念概述
template(模板):带有附加标记的模板HTML directives(指令):使用自定义属性和元素扩展HTML model(模型):用户在视图中显示的数据,并与用户进行交互 scope(作用域) ...
- ASP.NET MVC5入门指南(1)*入门介绍
以下指南说明了什么是ASP.NET MVC,并说明了如何入门. ASP.NET MVC 5入门 入门 添加控制器 添加视图 添加模型 创建连接字符串并使用SQL Server LocalDB 从控制器 ...
- Angular开发者指南(七)依赖注入
依赖注入 依赖注入(DI)是一种软件设计模式,处理组件如何获取其依赖关系. AngularJS注入器子系统负责创建组件,解析它们的依赖关系,并根据请求将它们提供给其他组件. 使用依赖注入 DI遍布An ...
- Angular开发者指南(六)作用域
什么是作用域? 作用域是引用应用程序模型的对象. 它是表达式的执行上下文. 作用域以层次结构排列,模仿应用程序的DOM结构,它可以观察表达式和传播事件. 作用域的特征 Scope提供API($watc ...
- Angular开发者指南(五)服务
服务 AngularJS服务是使用依赖注入(DI)连接在一起的可替代对象. 可以使用服务在整个应用程式中整理和分享程式码. AngularJS服务有: 延迟初始化 - AngularJS只在应用程序组 ...
- Angular开发者指南(四)控制器
了解控制器controller 在AngularJS中,Controller由JavaScript构造函数定义,用于扩充AngularJS Scope. 当控制器通过ng-controller指令连接 ...
- ASP.NET MVC5入门指南(2)*入门介绍*创建您的第一个应用
开始吧 首先安装Visual Studio 2017.然后,打开Visual Studio. Visual Studio是一个IDE或集成开发环境.就像使用Microsoft Word编写文档一样,您 ...
- Angular开发者指南(三)数据绑定
数据绑定 AngularJS应用程序中的数据绑定是模型和视图组件之间的数据的自动同步. AngularJS实现数据绑定的方式可以将模型视为应用程序中的单一来源. 视图是模型在任何时候的投影. 当模型更 ...
- [译]AngularJS 1.3.0 开发者指南(一) -- 介绍
[译]AngularJS 1.3.0 开发者指南(一) -- 介绍 Angular是什么 ? AngularJS是一款针对动态web应用的结构框架. 它可以让像使用模板语言使用HTML, 并且可以扩展 ...
随机推荐
- 用JS添加文本框案例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- --@angularJS--独立作用域scope绑定策略之&符策略
1.index.html: <!DOCTYPE HTML><html ng-app="app"><head> <title>s ...
- Google Chrome调试js代码
你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...
- Struts2文件的下载
1.下载登录页面download.jsp 1: <%@ page language="java" contentType="text/html; charset=U ...
- Intent的属性及Intent-filter配置——Extra属性——Flag属性
Intent的Extra属性通常用于在多个Action之间进行数据交换,Intent的Extra属性值应该是一个Bundle对象,Bundle对象的就像一个Map对象,它可以存入多组key-value ...
- Spring @Aspect实现切面编程
参考:http://blog.csdn.net/cdl2008sky/article/details/6268628 参考:http://www.360doc.com/content/12/0602/ ...
- Redis系列一(Redis环境的搭建)
最近工作中需要Redis缓存,由于也是第一次弄,在网上找了很多资料,在此记录一下. 安装Redis 我使用的系统是CentOS 6.6,安装步骤如下: 1.下载源码,解压后编译源码.(如果没有 wge ...
- js精要之继承
// 继承object.prototype的方法 // hasOwnProperty() //检查是否存在一个给定名字的自有属性 // propertyIsEnumerable() // 检查一个自有 ...
- 第七届蓝桥杯javaB组真题解析-分小组(第四题)
题目 /* 分小组 9名运动员参加比赛,需要分3组进行预赛. 有哪些分组的方案呢? 我们标记运动员为 A,B,C,... I 下面的程序列出了所有的分组方法. 该程序的正常输出为: ABC DEF G ...
- 简学Python第二章__巧学数据结构文件操作
#cnblogs_post_body h2 { background: linear-gradient(to bottom, #18c0ff 0%,#0c7eff 100%); color: #fff ...