AngularJS快速入门01-基础
记得第一次听说AngularJS这项很赞的Web的前端技术，那时还是2014年，年中时我们我的一个大牛兄弟当时去面试时，被问到了是否熟悉该技术，当时他了解和使用的技术比较多。我们询问他面试情况时，他给俺这个菜菜科普了该技术，印象比较深的是该技术支持前端MVC架构，可以完成大部分原有的后台工作，当时就觉得很神奇，但由于自身技术基础比较薄弱，没有太多时间和积累去学习新的技术，因而搁置了。在2016新年初始，正好有一些富余时间，正好学习下这个被称为就是“”两个大括号“”的前端框架（当前已经非常成熟，国内大部分公司的部分项目均已使用），补补我薄弱无比的前端技术，当目前为止，写JS代码仍然是非常的抓瞎。
AngularJS诞生于2009，被用在很多我们熟知的Google应用，例如Gmail、Maps，它主要致力于快捷的构建AJAX应用，在示例库在Github的地址为：https://github.com/shyamseshadri/angularjs-book。
其最基本的几个概念如下所示：
- 客户端模板：在我们过去使用的多页应用程序中，我们将html和数据装配混合起来生成页面后发送到浏览器，而单页面的AJAX应用则是将html模板和数据都直接发送给浏览器，由客户端装配。
- MVC，概念在所有的Web应用中基本上都使用到。
- 数据绑定，支持双向绑定，其实也就是观察者模式的实现，非常的方便。
- 依赖注入，通过$scope, $location等内置对象，使得我们只需关心实际需求，而不关心其依赖，遵循了迪米特法则（最少知识原则，Law_of_Demeter）。
- 指令，框架提供了很多指令，对html和Dom进行扩展，例如ng-controller指定控制器视图的某一部分，ng-model用于将输入数据绑定到模型属性。
一个简单例子如下，主要注意的是，很多地方的入门demo会省略ng-app后面的参数，Angular的Controller形式，以及相关模块的绑定等，浏览器肯能会报错，初学需要小心。此外，VS关于AngularJS的智能感知插件的下载和使用也是一个常见问题。
<!DOCTYPE html>
<html ng-app="myApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shopping Cart</title>
</head>
<body ng-controller="CartController">
<h1>Your Order</h1>
<div ng-repeat="item in items">
<span>{{$index + 1}}</span>
<span>{{item.title}}</span>
<input ng-model="item.quantity" />
<span ng-bind=" item.price | currency"></span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="../Scripts/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('CartController', function($scope) {
$scope.items = [
{ title: 'Paint pots', quantity: 8, price: 3.95 },
{ title: 'Polka dots', quantity: 17, price: 12.95 },
{ title: 'Pebbles', quantity: 5, price: 6.95 }
]; $scope.remove = function (index) {
$scope.items.splice(index, 1);
}
});
</script>
</body>
</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用于显隐元素，在菜单场景下应用广泛
<body ng-app="myApp">
<form ng-controller="SomeController" ng-submit="requestFunding()">
<input type="checkbox" ng-model="youCheckIt" />
<br />
<input ng-change="computeNeeded()" ng-model="funding.startEstimate" />
Recommendation:{{funding.needed}}
<br />
<button>Fund my startup</button>
<br />
<button ng-click="reset()">Reset</button>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('SomeController', function ($scope) {
var funding = {};
funding.startEstimate = 0;
funding.needed = 0;
$scope.funding = funding; var computeNeeded = function () {
$scope.funding.needed = $scope.funding.startEstimate * 10;
};
$scope.$watch('funding.startEstimate', computeNeeded);
$scope.requestFunding = function () { window.alert("Sorry, please get more customer first."); };
$scope.reset = function () { $scope.funding.startEstimate = 0; };
});
</script>
</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
angular.module('firstModule').config(function($routeProvider) {
$routeProvider.when('/view1', {
controller : 'Controller1',
templateUrl : 'view1.html'
}).when('/view2', {
controller : 'Controller2',
templateUrl : 'view2.html'
});
});
<ul>
<li>
<a href='#/view1'>view1</a>
</li>
<li>
<a href='#/view2'>view2</a>
</li>
</ul>
<ng-view></ng-view>
依赖注入: angular.module('firstModule').controller('diController', ['$scope',function($scope){}]);
Service和Factory:Angular内置类$location, $timeout, $rootScope等服务，同时可以自己提供额外的服务，方式有两种，Service使用时需要new,而Factory不需要。
angular.module('firstModule').service('helloService', function() {
this.sayHello = function(name) {
alert('Hello ' + name);
}
});
angular.module('firstModule').controller('diController', ['$scope', 'helloService', function($scope， helloService){helloService.sayHello('wlw');}]);
angular.module('firstModule').service('helloFactory', function() {
return{
sayHello = function(name) {
alert('Hello ' + name);
}
}
});
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
参考资料：
- 布拉德, 格林. 用AngularJS开发下一代Web应用[M]. 北京:电子工业出版社, 2013.
- 汪云飞. Spring Boot实战[M]. 北京:电子工业出版社, 2016.
AngularJS快速入门01-基础的更多相关文章
- AngularJS快速入门指南01：导言
AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...
- AngularJS快速入门指南19：示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS快速入门指南02：介绍
AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HT ...
- AngularJS快速入门指南20：快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南18：Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
- AngularJS快速入门指南17：Includes
使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...
- AngularJS快速入门指南16：Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南15：API
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南14：数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南13：表单
一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...
随机推荐
- gulp 配置自动化前端开发
有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:“grunt廉颇老矣 ...
- Mini projects #3 ---- Stopwatch: The Game
课程全名:An Introduction to Interactive Programming in Python,来自 Rice University 授课教授:Joe Warren, Scott ...
- C#数据结构杂记
定义任何类时记得要定义无参构造函数,否则在反序列化的时候会抛出异常. [Serialize]声明该类可以被序列化 Const与readonly的区别 const本质上是常量没有任何方法修改值,read ...
- Android多线程
final Handler handler = new Handler() { public void handleMessage(Message msg) { switch (msg.what) { ...
- 查看当前正在运行的activity
找到sdk的安装路径,比如我的是 D:\prostu\Android\android-sdk\tools该路径下的: hierarchyviewer.bat 双击,可以用此工具查看设备跑的是当前的哪个 ...
- hdu2604（递推,矩阵快速幂）
题目链接:hdu2604 这题重要的递推公式,找到公式就很easy了(这道题和hdu1757(题解)类似,只是这道题需要自己推公式) 可以直接找规律,推出递推公式,也有另一种找递推公式的方法:(PS: ...
- 回调函数(callback)
参考维基百科链接: 中文:http://zh.wikipedia.org/wiki/%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0 英文:http://en.wikipedi ...
- 如何让MVC6在IIS上面跑
asp.net5的MVC6发布出来的结果和MVC5之前版本的相差太远了,直接在本地的IIS服务器上面是不可能运行的. 看了汤姆大叔的MVC6项目发布与部署,讲了很多丰富的知识点.但是对于立即要解决问题 ...
- android 如何结束一个线程
总结: 1 不推荐直接调用onstop()强制结束,,因为不安全 2 run()比较短暂,执行完毕会自动停止 3 在run()设置一个flag标识,满足条件才执行; 4 通过sleep()捕获异常,在 ...
- CentOS7(mini) 急速部署ASP.NET应用
从mono 2.8+的时候就开始关注linux运行.NET的一些消息 最近闲来无事,发现mono官方已经提供有编译好的源,极大便利了部署过程,不需要自己去编译mono了 用Nancy.Owin写了一个 ...