博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJs+bootstrap搭载前台框架——js控制部分
阅读量:4599 次
发布时间:2019-06-09

本文共 1626 字,大约阅读时间需要 5 分钟。

这个简单的框架最后只剩下了js的控制部分了,angular框架有自己的逻辑部分,有自己的controller和service层,由于我们可能要用到angular的一些内置的resource和cookie,所以我们需要再加入angular的一些lib:

    --------------index.html------------------

[html]   
 
  1. <script src="lib/angular/angular-strap.js"></script>  
  2. <script src="lib/angular/angular-resource.js"></script>  
  3. <script src="lib/angular/angular-cookies.js"></script>  

 

    首先看我们的services.js

[javascript]   
 
  1. 'use strict';  
  2.   
  3. /* Services */  
  4.   
  5.   
  6. // Demonstrate how to register services  
  7. // In this case it is a simple value service.  
  8. var services = angular.module('jthink.services', ['ngResource']).  
  9.     value('version', '1.0');    
  10.     
  11. services.factory('LoginService', ['$resource', function ($resource) {  
  12.   return $resource('fakeData/userLogin.json', {}, {  
  13.     login: {method: 'GET', params: {}, isArray: false}  
  14.   });  
  15. }]);  

    这里我们使用了工厂模式,其实最后是给controller层提供了一个login的方法来调用,下面就看看这个controllers.js

[javascript]   
 
  1. 'use strict';  
  2.   
  3. /* Controllers */  
  4. var controllers = angular.module('jthink.controllers', []);  
  5. controllers.controller('LoginCTRL', ['$scope', 'LoginService', function ($scope, LoginService) {  
  6.   $scope.login = {};  
  7.   $scope.login.submit = function() {  
  8.     console.log($scope.login.email);  
  9.     console.log($scope.login.password);  
  10.     // do some process, invoke the service layer  
  11.     LoginService.login(  
  12.       {},  
  13.       {  
  14.         email: $scope.login.email,  
  15.         password: $scope.login.password  
  16.       },  
  17.       function (success) {  
  18.         if (success.status == "success") {  
  19.           alert('login success');  
  20.         } else {  
  21.           // error message  
  22.         }  
  23.       },  
  24.       function (error) {  
  25.         // error message  
  26.       }  
  27.     );  
  28.   };  
  29. }]);  

    这里就简单得做了一些逻辑,最主要的还是调用了service层提供的那个login方法。

 

    其他的一些模块可以按照这样的模式来写,由于时间关系,很多细节在这个简单的框架中就不去写了,具体的如果大家想了解就私下跟我要这个框架吧,我自己基本写完整了。。。。。

转载于:https://www.cnblogs.com/branton-design/p/5915825.html

你可能感兴趣的文章
iCOM组件(iComponent,应用或学习组件)
查看>>
css实现页面文字不换行、自动换行、强制换行
查看>>
web前端切图处理
查看>>
win10 系统右键菜单不显示文字(只有小图标)修复方法
查看>>
PAT A1009 Product of Polynomials (25 分)——浮点,结构体数组
查看>>
Xen虚拟机克隆实战
查看>>
js文件三斜杠注释///reference path用途
查看>>
Ruby(或cmd中)输入命令行编译sass
查看>>
ThreadPoolExecutor线程池
查看>>
开源许可证的选择
查看>>
ZJOI2019二试游记
查看>>
一致性hash
查看>>
Oracle创建用户、角色、授权、建表
查看>>
umdh windbg分析内存泄露
查看>>
LCA【模板】
查看>>
T1230 元素查找 codevs
查看>>
TypeScript `unknown` 类型
查看>>
谈Javascript的数组操作方法(concat(),slice(),splice())
查看>>
BZOJ 4034 树上操作(树的欧拉序列+线段树)
查看>>
通过Ajax方式上传文件,使用FormData进行Ajax请求
查看>>