AngularJs bootstrap搭載前臺框架——js控制部分
這個簡單的框架最后只剩下了js的控制部分了,angular框架有自己的邏輯部分,有自己的controller和service層,由于我們可能要用到angular的一些內(nèi)置的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的方法來調(diào)用,下面就看看這個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
}
);
};
}]);
這里就簡單得做了一些邏輯,最主要的還是調(diào)用了service層提供的那個login方法。
其他的一些模塊可以按照這樣的模式來寫,由于時間關(guān)系,很多細(xì)節(jié)在這個簡單的框架中就不去寫了,具體的如果大家想了解就私下跟我要這個框架吧,我自己基本寫完整了。。。。。
以上就是對AngularJS bootstrap 搭建前臺JS部分的代碼,后續(xù)繼續(xù)添加相關(guān)資料,謝謝大家對本站的支持!
相關(guān)文章:
AngularJs bootstrap搭載前臺框架——js控制部分
AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
AngularJs bootstrap搭載前臺框架——準(zhǔn)備工作
AngularJs bootstrap詳解及示例代碼
- AngularJS bootstrap啟動詳解及實例代碼
- AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
- AngularJs bootstrap搭載前臺框架——準(zhǔn)備工作
- 利用Angularjs和Bootstrap前端開發(fā)案例實戰(zhàn)
- Bootstrap和Angularjs配合自制彈框的實例代碼
- BootStrap+Angularjs+NgDialog實現(xiàn)模式對話框
- angularjs封裝bootstrap時間插件datetimepicker
- 基于AngularJs + Bootstrap + AngularStrap相結(jié)合實現(xiàn)省市區(qū)聯(lián)動代碼
- angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容
- AngularJS 與Bootstrap實現(xiàn)表格分頁實例代碼
相關(guān)文章
Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
這篇文章主要給大家介紹了關(guān)于Angular 4中如何顯示內(nèi)容的CSS樣式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
AngularJS監(jiān)聽ng-repeat渲染完成的兩種方法
這篇文章主要介紹了AngularJS監(jiān)聽ng-repeat渲染完成的兩種方法,結(jié)合實例形式分析了AngularJS基于自定義指令及廣播事件實現(xiàn)監(jiān)聽功能的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
AngularJS實現(xiàn)表格的增刪改查(僅限前端)
這篇文章主要介紹了AngularJS實現(xiàn)表格的增刪改查,僅限前端,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
Angular應(yīng)用程序的Hydration基本概念詳解
這篇文章主要為大家介紹了Angular應(yīng)用程序的Hydration基本概念詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Angular 4依賴注入學(xué)習(xí)教程之ClassProvider的使用(三)
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之ClassProvider使用的相關(guān)資料,文中介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angular 4具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考借鑒,下面來一起看看吧。2017-06-06

