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)系,很多細節(jié)在這個簡單的框架中就不去寫了,具體的如果大家想了解就私下跟我要這個框架吧,我自己基本寫完整了。。。。。
以上就是對AngularJS bootstrap 搭建前臺JS部分的代碼,后續(xù)繼續(xù)添加相關(guān)資料,謝謝大家對本站的支持!
相關(guān)文章:
AngularJs bootstrap搭載前臺框架——js控制部分
AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
AngularJs bootstrap搭載前臺框架——準備工作
AngularJs bootstrap詳解及示例代碼
- AngularJS bootstrap啟動詳解及實例代碼
- AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
- AngularJs bootstrap搭載前臺框架——準備工作
- 利用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 + express 實現(xiàn)websocket通信
最近需要實現(xiàn)一個功能,后端通過TCP協(xié)議連接雷達硬件的控制器,前端通過websocket連接后端,當控制器觸發(fā)消息的時候,把信息通知給所以前端,本文給的大家講解angular + express 實現(xiàn)websocket通信的思路,感興趣的朋友一起看看吧2023-09-09angularJs-$http實現(xiàn)百度搜索時的動態(tài)下拉框示例
下面小編就為大家分享一篇angularJs-$http實現(xiàn)百度搜索時的動態(tài)下拉框示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02掌握Queries設(shè)計模式優(yōu)化Angular應(yīng)用開發(fā)技巧
這篇文章主要介紹了掌握Queries設(shè)計模式優(yōu)化Angular應(yīng)用開發(fā)的技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10淺談Angular.js中使用$watch監(jiān)聽模型變化
當angular數(shù)據(jù)模型發(fā)生變化時,我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。本篇文章主要介紹了Angular.js中使用$watch監(jiān)聽模型變化,有興趣的可以了解一下2017-01-01angularjs ocLazyLoad分步加載js文件實例
本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01