谷歌发布 AngularJS 1.0,允许扩展HTML语法

谷歌2012年06月15日发布了一个全新的Web模板——AngularJS 1.0。

谷歌称, AngularJS可以让你扩展HTML的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言。AngularJS可以通过双向数据绑定自动从拥有JavaScript对象(模型)的UI(视图)中同步数据。 AngularJS的核心功能包括:

  • 数据绑定当数据发生变化时,AngularJS会自动从UI中移动数据到模型(model)和后端(back),没有继承类,也没有封装或调用getter/setter方法。模型可以像一个原始数组一样简单,也可以像自定义JavaScript类型一样复杂。

数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定是的代码更少,你可以专注于你的应用。

我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的,毫不影响的应用到web应用中。

传统来说,当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,model变化驱动了DOM中元素变化,另一方面,DOM元素的变化也会影响到Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析这些互动,然后融合到一个model中,并且更新View。这是一个手动的复杂过程,当一个应用非常庞大的时候,将会是一件非常费劲的事情。

这里肯定有更好的解决方案!那就是AngularJS的双向数据绑定,能够同步DOM和Model等等。

这里有一个非常简单的例子,用来演示一个input输入框和<h1>元素的双向绑定:

<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello, {{yourName}}!</h1> </div> </body> </html>

  • HTML作为模板AngularJS允许你使用与HTML规范兼容的、你的应用特有的元素、属性、类的类型来扩展HTML语法。

在AngularJS中,一个模板就是一个HTML文件。但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容。

HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。所有的指令都负责针对view来设置数据绑定。

我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化,不是字符串的连接或者innerHTML变化。使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令,甚至开发可重用的组件。

最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签,然后开发者拿过来添加上功能,通过数据绑定将会使得这个过程非常简单。

这里有一个例子,我们使用ng-repeat指令来循环图片数组并且加入img模板,如下:

function AlbumCtrl($scope) { scope.images = [ {"image":"img/image_01.png", "description":"Image 01 description"}, {"image":"img/image_02.png", "description":"Image 02 description"}, {"image":"img/image_03.png", "description":"Image 03 description"}, {"image":"img/image_04.png", "description":"Image 04 description"}, {"image":"img/image_05.png", "description":"Image 05 description"} ]; } <div ng-controller="AlbumCtrl"> <ul> <li ng-repeat="image in images"> <img ng-src="{{image.thumbnail}}" alt="{{image.description}}"> </li> </ul> </div>

这里还有一件事值得提一句,AngularJS并不强制你学习一个新的语法或者从你的应用中提出你的模板。

   MVC: 针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。

Model

model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes,使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性,这种方法使得我们更少使用应用的原型。

ViewModel

viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。

viewmodel是$scope的对象,只存在于AnguarJS的应用中。$scope只是一个简单的js对象,这个对象使用简单的API来侦测和广播状态变化。

Controller

controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。

View

view是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考,controller定义行为,view处理布局和互动。

     依赖注入(Dependency Injection,即DI)

AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。

DI允许你请求你的依赖,而不是自己找寻它们。比如,我们需要一个东西,DI负责找创建并且提供给我们。

为了而得到核心的AngularJS服务,只需要添加一个简单服务作为参数,AngularJS会侦测并且提供给你:

function EditCtrl($scope, $location, $routeParams) { // Something clever here... }

你也可以定义自己的服务并且让它们注入:

angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify'];

指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。

这里是一个例子,它监听一个事件并且针对的更新它的$scope ,如下:

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '<input>' }; });

然后,你可以使用这个自定义的directive来使用:

<my-component ng-model="message"></my-component>

使用一系列的组件来创建你自己的应用将会让你更方便的添加,删除和更新功能。

  • 易测性:JS是一个动态的解析性语言,而不是编译类型的,因此非常的难写测试。AngularJS被开成一个可测试的框架。它甚至包含了点对点的单元测试runner。如果你喜欢这个特性,看看这个项目:https://github.com/angular/angular-seed

项目主页: angularjs.org

AngularUI

JavaScript Data Binding with AngularJS Part I – Getting Started

JavaScript Data Binding with AngularJS Part II – Binding a View to a Controller/ViewModel

Writing an AngularJS App with Socket.IO

http://www.cnblogs.com/whitewolf/category/404298.html

http://www.angularjs.cn/

我的web开发最强组合:Play1+angularjs+bootstrap ++ (idea + livereload)

现在就开始使用AngularJS的三个重要原因

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ROBOTEDU

OMRONFZ系列视觉与ABB机器人的通信

ABB与OMRON之间的通信,本例采用以太网TCP无协议模式通信。通过以太网由ABB机器人程序控制ONRON视觉的场景切换,拍照判断及其判断数据的 接收。 ?...

52750
来自专栏北京马哥教育

Python 爬取CSDN的极客头条

这两周花了点时间读了《Python网络数据采集》,内容不多,不到200页,但是非常丰富,有入门,有提高,有注意事项,有经验之谈,有原理,有分析,读完受益匪浅。书...

41480
来自专栏沈唁志

几款常见的PHP模板引擎

32640
来自专栏向治洪

Flutter环境搭建

这几年,移动跨平台的趋势可以说是越来越明显,技术实现上也是百花争艳,不过究其实现,无外乎有那么几种。 Web 流:也被称为 Hybrid 技术,它基于 Web ...

50670
来自专栏程序猿DD

我最常用的Intellij IDEA快捷键

原文:http://www.radcortez.com/my-most-useful-intellij-idea-keyboard-shortcuts/ 译文:...

24380
来自专栏程序员宝库

主流浏览器图片反防盗链方法总结

还记得之前写的那个无聊的插件,前一段时间由于豆瓣读书增加了防盗链策略使得我们无法直接引用他们的图片,使得我这个小插件无法工作。本以为是一个很简单的问题,但是没想...

15250
来自专栏我和我大前端的故事

入门微信小程序 (二)语法篇

路由在项目开发中一直是个核心点,小程序路由方面经过很好的封装,提供了几个基本的跳转方法(这三个基本够用)

1.3K20
来自专栏Fundebug

微信小程序开发BUG经验总结

小程序开发越来越热,开发中遇到各种各样的bug,在此总结了一些比较容易掉进去的坑分享给大家。

567120
来自专栏前端黑板报

(转)一探前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错...

32260
来自专栏互联网杂技

【小教程】教你拿出app中的图片资源

有一种方法通过ipa或apk包来获得每个资源的切图,今天就来简单介绍下。因为有的同学还不知道这个方法,尤其是没有技术背景的同学(我司UI妹子得知这个方法如获至宝...

29950

扫码关注云+社区

领取腾讯云代金券