AngularJS快速入门

记得第一次听说AngularJS这项很赞的Web的前端技术,那时还是2014年,年中时我们我的一个大牛兄弟当时去面试时,被问到了是否熟悉该技术,当时他了解和使用的技术比较多。我们询问他面试情况时,他给俺这个菜菜科普了该技术,印象比较深的是该技术支持前端MVC架构,可以完成大部分原有的后台工作,当时就觉得很神奇,但由于自身技术基础比较薄弱,没有太多时间和积累去学习新的技术,因而搁置了。在2016新年初始,正好有一些富余时间,正好学习下这个被称为就是“”两个大括号“”的前端框架(当前已经非常成熟,国内大部分公司的部分项目均已使用),补补我薄弱无比的前端技术,当目前为止,写JS代码仍然是非常的抓瞎。

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的智能感知插件的下载和使用也是一个常见问题。

 1 <!DOCTYPE html>
 2 <html ng-app="myApp" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>Shopping Cart</title>
 6 </head>
 7 <body ng-controller="CartController">
 8 <h1>Your Order</h1>
 9 <div ng-repeat="item in items">
10 <span>{{$index + 1}}</span>
11 <span>{{item.title}}</span>
12 <input ng-model="item.quantity" />
13 <span ng-bind=" item.price | currency"></span>
14 <span>{{item.price * item.quantity | currency}}</span>
15 <button ng-click="remove($index)">Remove</button>
16 </div>
17 <script src="../Scripts/angular.js"></script>
18 <script>
19 var app = angular.module('myApp', []);
20 app.controller('CartController', function($scope) {
21 $scope.items = [
22 { title: 'Paint pots', quantity: 8, price: 3.95 },
23 { title: 'Polka dots', quantity: 17, price: 12.95 },
24 { title: 'Pebbles', quantity: 5, price: 6.95 }
25 ];
26  
27 $scope.remove = function (index) {
28 $scope.items.splice(index, 1);
29 }
30 });
31 </script>
32 </body>
33 </html>

在上例中,我们可以看到通过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用于显隐元素,在菜单场景下应用广泛

 1 <body ng-app="myApp">
 2 <form ng-controller="SomeController" ng-submit="requestFunding()">
 3 <input type="checkbox" ng-model="youCheckIt" />
 4 <br />
 5 <input ng-change="computeNeeded()" ng-model="funding.startEstimate" />
 6 Recommendation:{{funding.needed}}
 7 <br />
 8 <button>Fund my startup</button>
 9 <br />
10 <button ng-click="reset()">Reset</button>
11 </form>
12 <script>
13 var app = angular.module('myApp', []);
14 app.controller('SomeController', function ($scope) {
15 var funding = {};
16 funding.startEstimate = 0;
17 funding.needed = 0;
18 $scope.funding = funding;
19 
20 var computeNeeded = function () {
21 $scope.funding.needed = $scope.funding.startEstimate * 10;
22 };
23 $scope.$watch('funding.startEstimate', computeNeeded);
24 $scope.requestFunding = function () { window.alert("Sorry, please get more customer first."); };
25 $scope.reset = function () { $scope.funding.startEstimate = 0; };
26 });
27 </script>
28 </body>

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

 1         angular.module('firstModule').config(function($routeProvider) {
 2             $routeProvider.when('/view1', {
 3                 controller : 'Controller1',
 4                 templateUrl : 'view1.html'
 5             }).when('/view2', {
 6                 controller : 'Controller2',
 7                 templateUrl : 'view2.html'
 8             });
 9         });
10 
11     <ul>
12         <li>
13             <a href='#/view1'>view1</a>
14         </li>
15         <li>
16             <a href='#/view2'>view2</a>
17         </li>
18     </ul>
19 <ng-view></ng-view>

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

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

 1         angular.module('firstModule').service('helloService', function() {
 2             this.sayHello = function(name) {
 3                 alert('Hello ' + name);
 4             }
 5         });
 6         angular.module('firstModule').controller('diController', ['$scope', 'helloService', function($scope, helloService){helloService.sayHello('wlw');}]);
 7         
 8         angular.module('firstModule').service('helloFactory', function() {
 9             return{
10                 sayHello = function(name) {
11                     alert('Hello ' + name);
12                 }
13             }
14         });
15         angular.module('firstModule').controller('diController', ['$scope', 'helloFactory', function($scope, helloFactory){helloFactory.sayHello('wlw');}]);

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 

参考资料:

  1. 布拉德, 格林. 用AngularJS开发下一代Web应用[M]. 北京:电子工业出版社, 2013.
  2. 汪云飞. Spring Boot实战[M]. 北京:电子工业出版社, 2016.

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏织云平台团队的专栏

Tcpdump,从入门到不放弃

tcpdump 是一款抓包分析利器,其灵活的过滤规则和对表达式的支持能够让我们在众多的数据报文中抓取到理想的关键信息。本文在介绍 tcpdump 的基本使用方式...

1.2K2
来自专栏腾讯Bugly的专栏

Android 内存优化总结&实践

导语 智能手机发展到今天已经有十几个年头,手机的软硬件都已经发生了翻天覆地的变化,特别是Android阵营,从一开始的一两百M到今天动辄4G,6G内存。然而大部...

5577
来自专栏阮一峰的网络日志

网站开发人员应该知道的61件事

通常情况下,你需要把所有人的发言从头到尾读一遍。但是,Stack Overflow有一个很贴心的设计,它允许在问题下方开设一个wiki区,让所有人共同编辑一个最...

1674
来自专栏非著名程序员

基于开源项目搭建属于自己的技术堆栈

? 在技术面试的时候肯定都会问到使用了哪些第三方框架,为什么使用它而不用其他的。身边朋友就有这样的亲身经历: 面试官:你们项目中加载图片都是用的什么框架? 面...

2647
来自专栏ytkah

保存一下dedecms数据库表和字段说明,方便日后查询

玩dedecms有一段时间,对它的字段不是很了解,在此做个记录,方便日后查询 dede数据库字段说明: dede_addonarticle 附加文章...

2774
来自专栏北京马哥教育

Linux 新手必会的21条命令合集

2107
来自专栏SDNLAB

SDNLAB技术分享(五):浅谈Open vSwitch移植

好了我们开始今天的主题吧!! 前一段时间自己私下一直学习Open vSwitch。起初学习Open vSwitch的目的,只是为了更好的学习OpenFlow协议...

38715
来自专栏欧阳大哥的轮子

论MVVM伪框架结构和MVC中M的实现机制

一直都有人撰文吹捧MVVM应用开发框架,文章把MVVM说的天花乱坠并且批评包括iOS和android所用的MVC经典框架。这篇文章就是想给那些捧臭脚的人们泼泼冷...

1043
来自专栏Web 开发

推荐几个好用的WP插件

1053
来自专栏余子军的专栏

Linux 2.6.16 TCP 连接速度异常的问题分析

发现访问公司某些业务时,速度非常不稳定,并且整体慢于竞争对手。分析认为 SESU10 母盘上内核 TCP 拥塞控制算法和 Windows 的 Ack 频率控制的...

2K0

扫码关注云+社区

领取腾讯云代金券