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 面包屑导航 具体实现
Jun 05 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
vue实现在线翻译功能
Sep 27 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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
php中简单的对称加密算法实现
2017/01/05 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
js输出列表实现代码
2010/09/12 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
js禁止表单重复提交
2017/08/29 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
Python实现堆排序的方法详解
2016/05/03 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
毕业生简单求职信
2013/11/19 职场文书
消防安全汇报材料
2014/02/08 职场文书
聚美优品励志广告词
2014/03/14 职场文书
九寨沟导游词
2015/02/02 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书