AngularJs bootstrap搭载前台框架——js控制部分


Posted in Javascript onSeptember 01, 2016

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

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

<script src="lib/angular/angular-strap.js"></script> 
<script src="lib/angular/angular-resource.js"></script> 
<script src="lib/angular/angular-cookies.js"></script>

    首先看我们的services.js

'use strict'; 
 
/* Services */ 
 
 
// Demonstrate how to register services 
// In this case it is a simple value service. 
var services = angular.module('jthink.services', ['ngResource']). 
 value('version', '1.0'); 
 
services.factory('LoginService', ['$resource', function ($resource) { 
 return $resource('fakeData/userLogin.json', {}, { 
 login: {method: 'GET', params: {}, isArray: false} 
 }); 
}]);

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

'use strict'; 
 
/* Controllers */ 
var controllers = angular.module('jthink.controllers', []); 
controllers.controller('LoginCTRL', ['$scope', 'LoginService', function ($scope, LoginService) { 
 $scope.login = {}; 
 $scope.login.submit = function() { 
 console.log($scope.login.email); 
 console.log($scope.login.password); 
 // do some process, invoke the service layer 
 LoginService.login( 
  {}, 
  { 
  email: $scope.login.email, 
  password: $scope.login.password 
  }, 
  function (success) { 
  if (success.status == "success") { 
   alert('login success'); 
  } else { 
   // error message 
  } 
  }, 
  function (error) { 
  // error message 
  } 
 ); 
 }; 
}]);

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

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

      以上就是对AngularJS bootstrap 搭建前台JS部分的代码,后续继续添加相关资料,谢谢大家对本站的支持!

              相关文章:

                                 AngularJs bootstrap搭载前台框架——js控制部分
                                
AngularJs bootstrap搭载前台框架——基础页面
                                 
AngularJs bootstrap搭载前台框架——准备工作
                                
AngularJs bootstrap详解及示例代码

Javascript 相关文章推荐
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 #Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 #Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 #Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 #Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 #Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 #Javascript
javaScript如何跳出多重循环break、continue
Sep 01 #Javascript
You might like
CI配置多数据库访问的方法
2016/03/28 PHP
PHP实现验证码校验功能
2017/11/16 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
Javascript----文件操作
2007/01/18 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
浅析TypeScript 命名空间
2020/03/19 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python迭代和迭代器详解
2016/11/10 Python
python写入已存在的excel数据实例
2018/05/03 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
国际贸易专业求职信
2014/06/04 职场文书
国庆节活动总结
2014/08/26 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
商务考察邀请函模板
2015/02/02 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
升学宴家长致辞
2015/07/27 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python