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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
javascript 简练的几个函数
Aug 29 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
JS实现放烟花效果
Mar 10 Javascript
Vue实现浏览器打印功能的代码
Apr 17 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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
JS作用域链详解
2017/06/26 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python实现搜索算法的实例代码
2020/01/02 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
自动一体化专业求职信
2014/03/15 职场文书
道路建设实施方案
2014/03/18 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
售后客服工作职责
2014/06/16 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
郭明义观后感
2015/06/08 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技