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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
js如何打印object对象
Oct 16 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 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 数组二分法查找函数代码
2010/02/16 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php解析xml方法实例详解
2015/05/12 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python cs架构实现简单文件传输
2020/03/20 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
python导入坐标点的具体操作
2019/05/10 Python
python反转列表的三种方式解析
2019/11/08 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
用python批量下载apk
2020/12/29 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
python装饰器代码深入讲解
2021/03/01 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
父母寄语大全
2014/04/12 职场文书
质量整改报告范文
2014/11/08 职场文书
后勤工作个人总结
2015/02/28 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
催款函范本大全
2015/06/24 职场文书