AngularJS快速入门-阿里云开发者社区

开发者社区> 技术小胖子> 正文

AngularJS快速入门

简介:
+关注继续查看

 

AngularJS诞生于2009,被用在很多我们熟知的Google应用,例如Gmail、Maps,它主要致力于快捷的构建AJAX应用,在示例库在Github的地址为:https://github.com/shyamseshadri/angularjs-book。

其最基本的几个概念如下所示:

  1. 客户端模板:在我们过去使用的多页应用程序中,我们将html和数据装配混合起来生成页面后发送到浏览器,而单页面的AJAX应用则是将html模板和数据都直接发送给浏览器,由客户端装配。

  2. MVC,概念在所有的Web应用中基本上都使用到。

  3. 数据绑定,支持双向绑定,其实也就是观察者模式的实现,非常的方便。

  4. 依赖注入,通过$scope, $location等内置对象,使得我们只需关心实际需求,而不关心其依赖,遵循了迪米特法则(最少知识原则,Law_of_Demeter)。

  5. 指令,框架提供了很多指令,对html和Dom进行扩展,例如ng-controller指定控制器视图的某一部分,ng-model用于将输入数据绑定到模型属性。

一个简单例子如下,主要注意的是,很多地方的入门demo会省略ng-app后面的参数,Angular的Controller形式,以及相关模块的绑定等,浏览器肯能会报错,初学需要小心。此外,VS关于AngularJS的智能感知插件的下载和使用也是一个常见问题。

 View Code

在上例中,我们可以看到通过ng-app声明边界,即告诉框架哪一部分受其管理,以上为div元素;`greeting`.`text`的双括号插值语法,以及相同功能的ng-bind,推荐后者;ng-app命名空间的使用,控制angular框架的有效范围,这样可以很好的与遗留程序兼容;ng-repeat迭代数据;ng-model绑定数据,这是个双向绑定,View中的修改会影响到model,之后会有表单输入的例子再次强化这个概念;ng-click绑定单击事件处理函数。

大体来说,Angular程序一次请求的流程:用户请求应用起始页;浏览器向服务器发起http连接,加载index.html模板页面;Angular被加载到页面中,等待页面加载完成,然后查找ng-app指令,用于定义模板边界;之后Augular遍历模板,查找指令和绑定关系,触发注册监听器、执行DOM操作、获取服务器初始化数据;最后连接服务器请求其他数据(Ajax)。这种模板和数据完全分离的方式,非常适合浏览器缓存数据,提升应用性能。

  • 表单输入

在框架中使用表单元素非常简单,可以通过ng-model将表单元素绑定到模型属性上,达到双向绑定的目的,这部分和.NET中的数据绑定效果一致;在表单提交时,ng-submit会自动阻止浏览器默认的POST操作;$watch可以监视Model中具体的属性和字段,而ng-change主要用来检视表单元素;ng-show和ng-hide用于显隐元素,在菜单场景下应用广泛

 View Code

Tip:

相信大家接触非侵入式javascript概念已经很久了吧,但通过以上例子,我们会发现angularJS的使用并没有这样做,而是将html模板和相关控制代码混写了,这难道是说该框架并不合理。其实不然,之前提取非侵入式的概念也是因为当时前端开发的痛点:不同浏览器对js的支持不同,运行方式也不同;事件处理器都引用全局命名空间的函数,在集成时存在命名冲突;事件监听器绑定数据结构和行为,难以维护。但对于JS来说,它通过框架自身解决兼容性问题,通过命名空间解决集成的问题,最后一点也是最重要的一点,所有的事件处理函数并不引用任何的DOM元素和事件。

 

模块、控制器和数据绑定:无依赖模块angular.module('firstModule', [])

Scope和Event:scope是内置对象,主要用于处理数据模型,作用范围和页面声明的范围一致$scope.greeting='Hello', `greeting`,当使用范围不同时,需要通信,就需要借助Event,示例代码如下所示。

$.scope.$emit('event_emit', 'message');//子scope发送$.scope.$on('event_emit', function(event, data){});//父scope接受$.scope.$broadcast('event_broad', 'message');//父scope发送$.scope.$on('event_broad', function(event, data){});//子scope接受

多视图和路由:需要引入angular-route.js

 View Code

依赖注入: angular.module('firstModule').controller('diController', ['$scope',function($scope){}]);

Service和Factory:Angular内置类$location, $timeout, $rootScope等服务,同时可以自己提供额外的服务,方式有两种,Service使用时需要new,而Factory不需要。

 View Code

http操作:支持ajax操作,包括$http.get(url), $http.post(url, data), $http.put(url, data), $http.delete(url), $http.head(url)。

自定义指令:内置了很多指令,如ng-repeat, ng-show, ng-model等,可以使用一个简短的指令实现一个前端组件,如<date-picker></date-picker>,<input type="text" class="date-picker" />。

复制代码


        angular.module('



myApp', []).directive('helloWorld', function() {            return {

                restrict : 'AE',                 replace : true,                 template : '<h3>Hello, World!</h3>'             };         });

复制代码

Demo: https://github.com/wanliwang/cayman/tree/master/cm-angularweb 









      本文转自zsdnr  51CTO博客,原文链接:http://blog.51cto.com/12942149/1929346,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
带你读《Kubernetes进阶实战》之二:Kubernetes快速入门
本书几乎涵盖了应用Kubernetes系统的所有主流知识点,它甚至可以作为计划考取CKA认证的读者的配套参考图书。
1310 0
开放下载!《VoD问题排查与实战手册》40+技术问答快速入门阿里云视频点播
精解基本概念快速入门阿里云视频点播,40+技术问答详解常用功能排查及解决方案,针对多种业务场景的最佳实战分享。云运维工程师不可错过的匠心之作《VoD问题排查与实战手册》现已开放下载!快来下载阅读吧~
9547 0
【JAVA秒会技术之ActiveMQ】ActiveMQ的快速入门
ActiveMQ的快速入门 一、ActiveMQ介绍 1.ActiveMQ简介         MQ,即Message Queue,消息队列。         ActiveMQ,是Apache出品,最流行的,能力强劲的开源消息总线。ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,尽管JMS规范出台已经是很久的事情了,但是J
2872 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4488 0
CodePipeline 持续集成/持续交付快速入门-- Node.js篇
本文演示如何使用Codepipeline构建一个Node.js项目并部署到ECS。
1863 0
13262
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载