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

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. Linux记录-sftp上传大文件

    1.Alt +P 进入sftp会话 2.pwd显示linux目录 lpwd显示windows目录 3.lcd切换windows目录 cd切换linux目录 4.put上传 5.get下载 6.help ...

  2. 使用fork的str_cli函数

    void str_cli(FILE *fp, int sockfd) { pid_t pid; char sendline[MAXLINE], recvline[MAXLINE]; ) { /* ch ...

  3. （Python3） 运行结果 = 10，40 的困扰我一顿饭时间的 代码

    a=10 b=30 def kzkzkz(a,b):   #定义一个函数 a=a+b return a b= kzkzkz(a,b) print(a,b)

  4. iview服务不可以被访问解决办法

    一般情况是因为服务的host设置为localhsot了,修改为0.0.0.0即可. 打开...\iview-admin-dev\node_modules\webpack-dev-server\bin下 ...

  5. Activiti工作流学习笔记

    先从工作流的启动开始讲,Activiti提供了四种工作流的启动方式 1.空启动事件 2.定时启动事件 3.异常启动事件 4.消息启动事件 空启动事件中标签内没有任何其他元素的定义 <startE ...

  6. input file 重复上传同一张图片失效的解决办法

    解决方法: 每次取消图片预览后,重置input[type=’file’]的value的值 链接:https://blog.csdn.net/zd717822023/article/details/78 ...

  7. MySQL学习13 - 索引

    一.索引的介绍 二 .索引的作用 三.常见的几种索引: 3.1 普通索引 3.2 唯一索引 3.3 主键索引 3.4 组合索引 四.索引名词 五.正确使用索引的情况 什么是最左前缀呢? 六.索引的注意 ...

  8. Docker-----仓库

    安装registry 安装并启动docker yum -y install docker systemctl enable docker systemctl start docker 下载regist ...

  9. 2018-2019-2 网络对抗技术 20165231 Exp2 后门原理与实践

    实验内容 1.使用netcat获取主机操作Shell,cron启动 2.使用socat获取主机操作Shell, 任务计划启动 3.使用MSF meterpreter(或其他软件)生成可执行文件,利用n ...

  10. Java位运算原理及使用讲解

    前言日常开发中位运算不是很常用,但是巧妙的使用位运算可以大量减少运行开销,优化算法.举个例子,翻转操作比较常见,比如初始值为1,操作一次变为0,再操作一次变为1.可能的做法是使用三木运算符,判断原始值 ...