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 相关文章推荐
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
微信小程序中wxs文件的一些妙用分享
Feb 18 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新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
Python项目打包成二进制的方法
2020/12/30 Python
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
法学专业自我鉴定
2014/02/05 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
初三学习决心书
2014/03/11 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android