En fin de compte, ce cadre simple n'a que la partie de contrôle de JS. Le cadre angulaire a sa propre partie logique, son propre contrôleur et couche de service. Puisque nous pouvons utiliser des ressources et des cookies intégrés d'Angular, nous devons ajouter des LIB angulaires:
--------------------------------------------------------------------------------------------------------------------------------
<script src = "lib / angular / angular-strap.js"> </ script> <script src = "lib / angular / angular-resource.js"> </cript> <script src = "lib / angular / angular-cookies.js"> </cript>
Regardez d'abord nos services.js
«utiliser strict»; / * Services * / // Démontrer comment enregistrer les services // Dans ce cas, il s'agit d'un service de valeur simple. Var Services = Angular.Module ('JTHINK.SERVICES', ['NgreSource']). valeur ('version', '1.0'); Services.Factory ('LoginService', ['$ Resource', fonction ($ Resource) {return $ ressource ('Fakedata / userlogin.json', {}, {login: {méthode: 'get', params: {}, isArray: false}});}]);Ici, nous utilisons le mode d'usine, et en fait, nous fournissons enfin une méthode de connexion pour appeler la couche de contrôleur. Jetons un coup d'œil à ces contrôleurs.js
«utiliser strict»; / * Contrôleurs * / var contrôleurs = angular.module ('jThink.Controllers', []); Controchers.Controller ('LoginCtrl', ['$ Scope', 'LoginService', Function ($ Scope, LoginService) {$ scope.login = {}; $ scope.login.submit = function () {console.log ($ scope.login.email); console.log ($ scope.login.password); Invoquez la couche de service LoginService.login ({}, {Email: $ scope.login.email, mot de passe: $ scope.login.password}, fonction (Success) {if (Success.Status == "Success") {alert ('Login Success');} Else {// Message d'erreur}, fonction (erreurs) {// Message de mer}; }]);Ici, nous devons faire une logique simple, et la chose la plus importante est d'appeler la méthode de connexion fournie par la couche de service.
Certains autres modules peuvent être écrits dans ce modèle. En raison des contraintes de temps, de nombreux détails ne seront pas écrits dans ce cadre simple. Si vous voulez en savoir plus sur ceux spécifiques, veuillez me demander ce cadre en privé. Je les ai essentiellement écrits en entier. . . . .
Ce qui précède est le code pour construire la partie JS frontale de Bootstrap AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!
Articles connexes:
Bootstrap AngularJS est équipé de la partie de contrôle avant frontal - JS
Bootstrap AngularJS est équipé d'un cadre frontal - Page de base
Bootstrap AngularJS équipé d'un cadre frontal - Travail de préparation
AngularJs bootstrap explication détaillée et code d'échantillon