angularjs和ajax的结合使用 (三)
转眼九月份了,忙忙碌碌 发现今年还没开过张,写一篇吧。 15年在空闲时就倒腾过angularjs那玩意儿 ,觉得还是挺好的,李金龙那厚厚的一本书,只不过没有系统化应用。最主要的是原来有一个东西没有用到 那就是路由。在中衡的时候看到黄国文同志用那种全ajax的方式做的网站,那感觉。。。现在公司竟然也这么做,全是JS 写成一大坨跟屎一样的 js这玩意儿是弱类型的 调也不好调 对它完全没好感?看到那些js代码都快吐了,ajax有那么好么 ,整个页面你不还是得刷新 ,快得了多少 页面还不容易控制。现在看了李师傅搞的 黄国文同志那也就那么回事儿而已。相对来说用angularJS更好 ,总之现在很讨厌JS。好吧整都整了也不抱怨了 ,我们还是一起来学习下他吧。这段时间做的工作是易电小跟班 年初在小跟班分支上做了易电设备移动端。 用的比较多的是 angularjs1.x ,今天将分享他的使用 和一些技巧。? 基本使用:angularJS的官方网站是 https://angularjs.org/??VisualStudio 都把angularjs指令的智能提示都集成进来了,足以证明还是有一定认可度的。angularJS的基本使用前两章已经讲过了 没有太多说的,但是我们还是来复习下: 引入angularjs 和ui-router.js 1 <script src="../WebTools/angular.min.js"></script> 2 <script src="../WebTools/angular-ui-router.min.js"></script> 然后界面上定义app和视图作用域 ,也就是 ng-app="" 和?ng-controller 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="WebToolsjquery-2.0.2.min.js"></script> 6 <script src="WebToolsangular.min.js"></script> 7 <script src="WebToolsangular-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可以嵌套的,上层作用域的东西 可以被下层调用? 以达到灵活运用的目的。也不知道我到底讲清楚没 - -!感觉自己讲这些有点语无伦次的。 然后就是把前面指定的界面部分绑定到作用域 并注入ui-router ,它的意义是把界面作用域的部分 跟js绑定 并给js一个“”把柄“” 以便控制数据 ,告诉js这部分界面的数据归你这个scope管。说了这么多还是红色部分字的意思。虽然代码还是差不多的代码,但是自己时切切实实的感觉 应用比15年时候的那种照猫画虎更实在些了,理解也更深刻些了。非要怎么说嘛 意会。
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里一种比较方便的套路,注入一个工具服务类: 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自带的路由方式好的地方: 冒泡事件和广播事件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 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 ,看果然没有形成嵌套 。 但是他大爷的 感觉怪怪的。 一些心得: 并不是界面最外面一层一定要有菜单 跳转,可以是一个空白。 日期格式 跟后台的 交互,说到底不论get post 提交到后台的始终是字符串。 一个页面 并不一定只能写那一个固定名字的controller。 还有我当爸爸了。。。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |