AngularJs bootstrap搭载前台框架——js控制部分

 更新时间:2016年09月01日 14:47:18   作者:JThink_  
本文主要介绍AngularJs bootstrap搭载前台框架js控制部分的资料,这里有实现代码,有兴趣的小伙伴可以参考下

    这个简单的框架最后只剩下了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详解及示例代码

相关文章

  • 深入浅出讲解Angular变更检测

    深入浅出讲解Angular变更检测

    这篇文章主要给大家介绍了关于Angular变更检测的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • Angular 4中如何显示内容的CSS样式示例代码

    Angular 4中如何显示内容的CSS样式示例代码

    这篇文章主要给大家介绍了关于Angular 4中如何显示内容的CSS样式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • AngularJS监听ng-repeat渲染完成的两种方法

    AngularJS监听ng-repeat渲染完成的两种方法

    这篇文章主要介绍了AngularJS监听ng-repeat渲染完成的两种方法,结合实例形式分析了AngularJS基于自定义指令及广播事件实现监听功能的相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • AngularJS入门教程之AngularJS模型

    AngularJS入门教程之AngularJS模型

    这篇文章主要介绍了AngularJS入门教程之AngularJS模型的相关资料,需要的朋友可以参考下
    2016-04-04
  • AngularJs 国际化(I18n/L10n)详解

    AngularJs 国际化(I18n/L10n)详解

    本文主要介绍AngularJs 国际化的知识,这里整理了详细的资料来讲解国际化,有需要的小伙伴可以参考下
    2016-09-09
  • AngularJS入门教程(零):引导程序

    AngularJS入门教程(零):引导程序

    这篇文章主要介绍了AngularJS入门教程(零):引导程序,本文是系列文章中的一篇,本系列文章用开发一个AngularJS应用来讲解,需要的朋友可以参考下
    2014-12-12
  • AngularJS实现表格的增删改查(仅限前端)

    AngularJS实现表格的增删改查(仅限前端)

    这篇文章主要介绍了AngularJS实现表格的增删改查,仅限前端,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Angular应用程序的Hydration基本概念详解

    Angular应用程序的Hydration基本概念详解

    这篇文章主要为大家介绍了Angular应用程序的Hydration基本概念详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Angular 4依赖注入学习教程之ClassProvider的使用(三)

    Angular 4依赖注入学习教程之ClassProvider的使用(三)

    这篇文章主要给大家介绍了关于Angular 4依赖注入之ClassProvider使用的相关资料,文中介绍的非常详细,对大家学习或者使用Angular 4具有一定的参考学习价值,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-06-06
  • AngularJS在IE8的不支持的解决方法

    AngularJS在IE8的不支持的解决方法

    AngularJS在IE8的不支持怎么办?下面小编就为大家带来一篇AngularJS在IE8的不支持的解决方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论