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。

還有我當爸爸了。。。