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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
javascript+xml技术实现分页浏览
Jul 27 Javascript
Jquery ui css framework
Jun 28 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
解析php中memcache的应用
2013/06/18 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python实现京东秒杀功能代码
2019/05/16 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
薪酬专员岗位职责
2014/02/18 职场文书
化妆品活动策划方案
2014/05/23 职场文书
校园广播稿范文
2015/08/19 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android