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

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

基本使用:

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

引入angularjs 和ui-router.js

 <script src="../WebTools/angular.min.js"></script>

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

然后界面上定义app和视图作用域 ，也就是 ng-app="" 和 ng-controller

 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="xiangapp">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <script src="\WebTools\jquery-2.0.2.min.js"></script>

     <script src="\WebTools\angular.min.js"></script>

     <script src="\WebTools\angular-route.js"></script>

 </head>

 <body>

     <div ng-controller="maincontroller">

     </div>

 </body>

 </html>

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

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

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

 var app = angular.module("xiangapp", ["ui.router"]);

 app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

     $urlRouterProvider.otherwise('/main');

     $stateProvider

         .state('home', {

             url: '/home',

             views: {

                 "body": {

                     templateUrl: 'home.html',

                     controller: 'homecontroller'

                 }

             }

         })

         .state('about', {

             url: '/about',

             views: {

                 "body3": {

                     templateUrl: 'about.html',

                     controller: 'aboutcontroller'

                 }

             }

         })

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

 var app = angular.module("xiangapp", ["ui.router"]);

 //注入一个util 工具类

 app.service("Util", function ($http, $rootScope) {

     this.showMsg = function (msg) {

         alert(msg);

     };

 });

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

 app.controller("maincontroller", function ($scope, Util) {

     $scope.message = "主controller初始化信息";

     Util.showMsg("UtilService调用");

 });

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

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

冒泡事件和广播事件

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

 $scope.$on("toparentEvent", function (event, args) {

     alert(args.message + "ggg");

 });

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

 //往父级传递事件

 $scope.toparentEvent = function () {

     $scope.$emit("toparentEvent", { message: "我是子Controller的消息" });

 }

发动广播事件：

 //广播

 $scope.boardCastEvent = function () {

     $scope.$broadcast("boardCastEvent", { message: "我是广播消息" });

 }

promise调用：

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

 var defer1 = $q.defer();

 $http.get("/api/Class1/GetTest").success(function (res) {

     setTimeout(function () {

         alert("aa");

         defer1.resolve();

     }, 3000);

 });

 var promise1 = defer1.promise;

 var defer2 = $q.defer();

 promise1.then(function (res) {

     $http.get("/api/Class1/GetTest").success(function (res) {

         setTimeout(function () {

             alert("bb");

             defer2.resolve();

         }, 2000);

     });

 });

 var promise2 = defer2.promise;

 promise2.then(function (res) {

     alert("cc");

 });

看就是这种方式 通过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的结合使用 （三）的更多相关文章

  1. 如何使用angularjs实现ajax异步请求

    Sample.html <!DOCTYPE html> <html ng-app="myApp"> <head> <title>fo ...

  2. angularjs和ajax的结合使用 （一）

    好久没写文了.这是一篇关于easyui配合ajax使用 的文章, 顺带介绍angularjs的使用 以及让你感受到angularjs的威力.网上对于ajax 的文也是多如牛毛 .我就不直接 从那种原生 ...

  3. angularJS项目-ajax事件的按钮loading和页面loading状态 & Controller之间通信-待续

    1).按钮loading --TODO 2). page loading状态 1.在module中注入指令 // Route State Load Spinner(used on page or co ...

  4. Ajax XMLHttpRequest对象的三个属性以及open和send方法

    (1)onreadystatechange 属性onreadystatechange 属性存有处理服务器响应的函数.下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行 ...

  5. 再也不学AJAX了！（三）跨域获取资源 ③ - WebSocket & postMessage

    让我们先简单回顾一下之前谈到的内容,AJAX是一种无页面刷新的获取服务器资源的混合技术.而基于浏览器的"同源策略",不同"域"之间不可以发送AJAX请求.但是在 ...

  6. angularjs之$ajax请求

    AngularJS不仅仅只有双向绑定等等功能,还有发送Ajax请求的Api. 效果图: 请求的文件(data.php): <?php $data = [ '股市下跌', '清明小长假结束', ' ...

  7. Ajax文件上传三式

    文件上传(三式) 1.urls.py文件 url(r'^upload.html$', views.upload), 2.views.py文件 import os def upload(request) ...

  8. 再也不学AJAX了！（三）跨域获取资源 ① - 同源策略

    我们之前提到过,AJAX技术使开发者能够专注于互联网中数据的传输,而不再拘泥于数据传输的载体.通过AJAX技术,我们获取数据的方式变得更加灵活,可控和优雅. 但是AJAX技术并不是一把万能钥匙,互联网 ...

  9. angularjs 发送ajax请求的问题

    在angularjs中使用 ajax 如果使用 jquery的 ajax发送请求会遇到结果返回了,但是页面的值却没有改变,如: $scope.queryNameMatch = function() { ...

随机推荐

  1. Spring Cloud微服务实战：手把手带你整合eureka&zuul&feign&hystrix

    转载自:https://www.jianshu.com/p/cab8f83b0f0e 代码实现:https://gitee.com/ccsoftlucifer/springCloud_Eureka_z ...

  2. 自制stm32板子无法烧录程序的问题

    自己画的stm32板子一开始出现了无法烧录程序的情况,主要表现为在点击load图标后出现了Stlink connect error!Target dll has been concelled的窗口.在 ...

  3. matplotlib 生成 eps 插入到 tex

    matplotlib 生成 eps 插入到 tex matplotlib 生成 eps,就可以插入到 tex 中,而且是矢量图,放大不失真. 而且因为图中的元素都是嵌入到 pdf 中,所以图中的文字也 ...

  4. word20161229

    1. launch 英[lɔ:ntʃ]美[lɔntʃ, lɑntʃ]vt. 发射; 发动; [计算机]开始(应用程序); 开展(活动.计划等);vi. 投入; 着手进行; 热衷于…;n. 投掷; 大船 ...

  5. Grunt 一个专为JavaScript提供的构建工具

    新手最好找个视频来看看, Grunt的配置及使用(压缩合并js/css) - 每天都记录一点点! - CSDN博客https://blog.csdn.net/playboyanta123/articl ...

  6. [转] 图解Seq2Seq模型、RNN结构、Encoder-Decoder模型 到 Attention

    from : https://caicai.science/2018/10/06/attention%E6%80%BB%E8%A7%88/ 一.Seq2Seq 模型 1. 简介 Sequence-to ...

  7. FATAL ERROR: please install the following Perl modules before executing

    运行安装mysql 报错 [root@localhost mysql-mult]# ./scripts/mysql_install_db  --defaults-file=conf/3306my.cn ...

  8. Timeline高级扩展

    转载于http://forum.china.unity3d.com/thread-32200-1-1.html通过demo讲解了timeline更加复杂的使用方式 Timeline是创建过场动画和影片 ...

  9. linux环境变量问题

    在使用jenkins进行自动化部署的时候遇到一个问题,通过jenkins进行自动化部署的时候执行java命令时,提示java不知道是啥命令,确定是装好了java的,猜测是环境变量问题,但是在/etc/ ...

  10. SQL CE 和 SQLite数据库对比测试

    于项目需要,在客户端需要做数据存储功能,考虑到部署方便同时满足功能需要的情况下选择了SQLCE 和SQLite两种数据库进行客户端数据存储.当然还有很多其他的方式做本地数据存储,比如本地文件存储.微软 ...