AngularJs bootstrap搭載前臺框架——js控制部分
這個(gè)簡單的框架最后只剩下了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} }); }]);
這里我們使用了工廠模式,其實(shí)最后是給controller層提供了一個(gè)login的方法來調(diào)用,下面就看看這個(gè)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層提供的那個(gè)login方法。
其他的一些模塊可以按照這樣的模式來寫,由于時(shí)間關(guān)系,很多細(xì)節(jié)在這個(gè)簡單的框架中就不去寫了,具體的如果大家想了解就私下跟我要這個(gè)框架吧,我自己基本寫完整了。。。。。
以上就是對AngularJS bootstrap 搭建前臺JS部分的代碼,后續(xù)繼續(xù)添加相關(guān)資料,謝謝大家對本站的支持!
相關(guān)文章:
AngularJs bootstrap搭載前臺框架——js控制部分
AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
AngularJs bootstrap搭載前臺框架——準(zhǔn)備工作
AngularJs bootstrap詳解及示例代碼
- AngularJS bootstrap啟動詳解及實(shí)例代碼
- AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
- AngularJs bootstrap搭載前臺框架——準(zhǔn)備工作
- 利用Angularjs和Bootstrap前端開發(fā)案例實(shí)戰(zhàn)
- Bootstrap和Angularjs配合自制彈框的實(shí)例代碼
- BootStrap+Angularjs+NgDialog實(shí)現(xiàn)模式對話框
- angularjs封裝bootstrap時(shí)間插件datetimepicker
- 基于AngularJs + Bootstrap + AngularStrap相結(jié)合實(shí)現(xiàn)省市區(qū)聯(lián)動代碼
- angularJS與bootstrap結(jié)合實(shí)現(xiàn)動態(tài)加載彈出提示內(nèi)容
- AngularJS 與Bootstrap實(shí)現(xiàn)表格分頁實(shí)例代碼
相關(guān)文章
angular + express 實(shí)現(xiàn)websocket通信
最近需要實(shí)現(xiàn)一個(gè)功能,后端通過TCP協(xié)議連接雷達(dá)硬件的控制器,前端通過websocket連接后端,當(dāng)控制器觸發(fā)消息的時(shí)候,把信息通知給所以前端,本文給的大家講解angular + express 實(shí)現(xiàn)websocket通信的思路,感興趣的朋友一起看看吧2023-09-09Angular異步執(zhí)行學(xué)習(xí)之zone.js使用
這篇文章主要為大家介紹了Angular異步執(zhí)行學(xué)習(xí)之zone.js使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06AngularJS Bootstrap詳細(xì)介紹及實(shí)例代碼
本文主要介紹AngularJS Bootstrap,這兩對AngularJS Bootstrap的基礎(chǔ)知識做了詳細(xì)講解,并提供簡單示例,有需要的小伙伴可以參考下2016-07-07angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動態(tài)下拉框示例
下面小編就為大家分享一篇angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動態(tài)下拉框示例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02AngularJS API之copy深拷貝詳解及實(shí)例
這篇文章主要介紹了AngularJS API之copy深拷貝詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-09-09掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開發(fā)技巧
這篇文章主要介紹了掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開發(fā)的技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10淺談Angular.js中使用$watch監(jiān)聽模型變化
當(dāng)angular數(shù)據(jù)模型發(fā)生變化時(shí),我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。本篇文章主要介紹了Angular.js中使用$watch監(jiān)聽模型變化,有興趣的可以了解一下2017-01-01angularjs ocLazyLoad分步加載js文件實(shí)例
本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01