angularjs和ajax的结合使用（三）

时间 2019-11-09

原文原文链接

转眼九月份了，忙忙碌碌发现今年还没开过张，写一篇吧。html

15年在空闲时就倒腾过angularjs那玩意儿，以为仍是挺好的，李金龙那厚厚的一本书，只不过没有系统化应用。最主要的是原来有一个东西没有用到那就是路由。在中衡的时候看到黄国文同志用那种全ajax的方式作的网站，那感受。。。如今公司居然也这么作，全是JS 写成一大坨跟屎同样的 js这玩意儿是弱类型的调也很差调对它彻底没好感看到那些js代码都快吐了，ajax有那么好么，整个页面你不仍是得刷新，快得了多少页面还不容易控制。如今看了李师傅搞的黄国文同志那也就那么回事儿而已。相对来讲用angularJS更好，总之如今很讨厌JS。好吧整都整了也不抱怨了，咱们仍是一块儿来学习下他吧。这段时间作的工做是易电小跟班年初在小跟班分支上作了易电设备移动端。用的比较多的是 angularjs1.x ，今天将分享他的使用和一些技巧。 jquery

基本使用:

angularJS的官方网站是 https://angularjs.org/ VisualStudio 都把angularjs指令的智能提示都集成进来了，足以证实仍是有必定承认度的。angularJS的基本使用前两章已经讲过了没有太多说的，可是咱们仍是来复习下：angularjs

引入angularjs 和ui-router.jsweb

1 <script src="../WebTools/angular.min.js"></script>
2 <script src="../WebTools/angular-ui-router.min.js"></script>

而后界面上定义app和视图做用域，也就是 ng-app="" 和 ng-controllerajax

 1 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="xiangapp">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title></title>
 5     <script src="\WebTools\jquery-2.0.2.min.js"></script>
 6     <script src="\WebTools\angular.min.js"></script>
 7     <script src="\WebTools\angular-route.js"></script>
 8 </head>
 9 <body>
10     <div ng-controller="maincontroller">
11     </div>
12 
13 </body>
14 </html>

Angularjs是一个mvvm框架，核心理念是让界面上产生一个个领域让这些领域跟js后台联系起来。让界面的app做用域 controller做用域这些跟后台的数据产生关联，但同时这些做用域又是能够嵌套的 controller能够嵌套的，上层做用域的东西能够被下层调用以达到灵活运用的目的。也不知道我到底讲清楚没 - -！感受本身讲这些有点语无伦次的。json

而后就是把前面指定的界面部分绑定到做用域并注入ui-router ，它的意义是把界面做用域的部分跟js绑定并给js一个“”把柄“” 以便控制数据，告诉js这部分界面的数据归你这个scope管。说了这么多仍是红色部分字的意思。虽然代码仍是差很少的代码，可是本身时切切实实的感受应用比15年时候的那种照猫画虎更实在些了，理解也更深入些了。非要怎么说嘛意会。c#

把界面指定部分绑定到js做用域并注入ui-router 而后定义路由规则：api

 1 var app = angular.module("xiangapp", ["ui.router"]);
 2 
 3 app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
 4     $urlRouterProvider.otherwise('/main');
 5 
 6     $stateProvider
 7         .state('home', {
 8             url: '/home',
 9             views: {
10                 "body": {
11                     templateUrl: 'home.html',
12                     controller: 'homecontroller'
13                 }
14             }
15         })
16         .state('about', {
17             url: '/about',
18             views: {
19                 "body3": {
20                     templateUrl: 'about.html',
21                     controller: 'aboutcontroller'
22                 }
23             }
24         })

注入确实是angularjs的一个特点，注意上面已经拿到一个app的把柄了，只要拿到这个app的把柄咱们就能够随心所欲了，好比上面的配置路由，作一些前置配置操做。总之注入这个工具类后咱们就能够在controller里使用它了，这个后面再说，总之是各类注入，你能够理解为angular里一种比较方便的套路，注入一个工具服务类：promise

1 var app = angular.module("xiangapp", ["ui.router"]);
2 //注入一个util 工具类
3 app.service("Util", function ($http, $rootScope) {
4     this.showMsg = function (msg) {
5         alert(msg);
6     };
7 });

最后的最后其实就是一些搬砖工做就是编写路由到的各个子模块定义的controller ，在里面编写各个页面自管区域的逻辑。注意注意注意重要的事情说三遍，依然是经过上面app这个重要的把柄来编写各个controller逻辑，好比这里咱们编写mainController 其余的也相似：多线程

1 app.controller("maincontroller", function ($scope, Util) {
2     $scope.message = "主controller初始化信息";
3     Util.showMsg("UtilService调用");
4 });

咱们也能够把一些公共的东西放到 $rootscope里面去。AngularJS的做用域能够是一个嵌套结构，controller嵌controller，下层做用域即便没有写对应的函数，也能够调用上层的函数。

其实angularjs 自带了 ngroute 路由（也要另外再引入js）为甚咱们还要再使用ui-router，Ui-router路由方式比angular自带的路由方式好的地方：
经过$state和$stateparameter 达到灵活的状态跳转
支持嵌套视图（基本用不上）
ui-router它最大的做用是将web界面的设计分块了

冒泡事件和广播事件

angularJS里还有个颇有用的东西就是事件触发，各个controller能够嵌套也能够相互独立他们之间能够经过事件触发的机制来进行消息传递和触发某个动做，可能会说不是controller能够嵌套子controller能够直接调用主controller的函数么，是的可是只能直接的方式调一次你上层controller的函数，而且形不成事件响应这种的结构会致使结构混乱，因此，该用啥就用啥。响应冒泡事件和响应广播事件代码是同样的：

1 $scope.$on("toparentEvent", function (event, args) {
2     alert(args.message + "ggg");
3 });

广播事件是主controller往子controller传递依次触发全部响应了此事件的代码，冒泡事件是从子controller往上层传递依次触发响应了此事件的代码。触发广播事件和触发冒泡事件的代码有所不一样，发动冒泡事件：

1 //往父级传递事件
2 $scope.toparentEvent = function () {
3     $scope.$emit("toparentEvent", { message: "我是子Controller的消息" });
4 }

发动广播事件：

1 //广播
2 $scope.boardCastEvent = function () {
3     $scope.$broadcast("boardCastEvent", { message: "我是广播消息" });
4 }

promise调用：

angularJS里的另外一个大杀器，那就是promise ，这究竟是个神马玩意儿，在网上说怎么怎么ajax回调嵌套陷入回调地狱，巴拉巴拉就是没给个ajax promise回调的例子出来，首先promise的详细说明这里有一篇教程：https://www.cnblogs.com/ZengYunChun/p/6438330.html
使用的基本思想是首先引入$q 使用defer() 获取promise对象，在异步调用正常结束的地方也就是ajax回调成功的地方resolved() , 在函数结束的地方return xx.promise 便可，这个套路有点像多线程同步的调调。下面是个人一个ajax链式调用例子：

 1 var defer1 = $q.defer();
 2 $http.get("/api/Class1/GetTest").success(function (res) {
 3     setTimeout(function () {
 4         alert("aa");
 5         defer1.resolve();
 6     }, 3000);
 7 });
 8 
 9 var promise1 = defer1.promise;
10 
11 var defer2 = $q.defer();
12 promise1.then(function (res) {
13     $http.get("/api/Class1/GetTest").success(function (res) {
14         setTimeout(function () {
15             alert("bb");
16             defer2.resolve();
17         }, 2000);
18     });
19 });
20 
21 var promise2 = defer2.promise;
22 
23 promise2.then(function (res) {
24     alert("cc");
25 });

看就是这种方式经过defer.promise 获得一个同步句柄 ,而后此promise.then里面再处理同步，可一直写到promiseN ，看果真没有造成嵌套。可是他大爷的感受怪怪的。
每次获得一个promise用于在下一个then里进行同步。能说的就这么多了。又获得一个promise进行下一次同步如此往复。
固然若是你玩儿熟了，还能够玩儿子路由，其它各类更灵活的应用，反正最基本的就是这些了，其它全靠你的创造。总之angularJS就是经过这些手段进行灵活并合理的归并进行业务逻辑和数据处理。

一些心得：

并非界面最外面一层必定要有菜单跳转，能够是一个空白。
路由机制 history.back()。从上至下进行分支跳转，history.back() 则至关于在跳转的树里回到了上一级。（对于手机端app的跳转需求）这是一个比较完美的路由机制。
并不必定要是从头到尾ajax的，页面是能够刷新的，你一个state url 就是一个模块，要合理的使用模块间参数。

日期格式跟后台的交互，说到底不论get post 提交到后台的始终是字符串。
JavaScript使用Date.toJSON()就能够了后台接收json数据能够自然的接收 2018-05-20 18:30 这种的日期格式。
直接后台收到的C#数据就是datetime ，转换都不须要， get post同样。可是JavaScript直接传 new date() 到后台则没法预知会转换成什么样格式的字符串到后台致使c#解析DateTime类型出现错误。

一个页面并不必定只能写那一个固定名字的controller。

还有我当爸爸了。。。

angularjs和ajax的结合使用 （三）

基本使用:

冒泡事件和广播事件

promise调用：

angularjs和ajax的结合使用（三）