AngularJs bootstrap搭載前台架構——js控制部分_AngularJS

    這個簡單的架構最後只剩下了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詳解及範例程式碼