Maison > Article > interface Web > Comment construire un projet web avec angulaireJs ? Introduction détaillée à la création de projets Web avec AngularJS
Comment construire un projet web avec angulaireJs ? Introduction détaillée à la création de projets Web avec AngularJS
- 寻∝梦original
- 2018-09-08 14:38:111937parcourir
Cet article présente principalement la construction étape par étape de projets Web avec angularjs Si nous voulons utiliser angulairejs pour construire des projets Web, nous devons d'abord lire cet article
1. Préface
angularjs est très populaire en tant que framework front-end populaire, et maintenant la version 2.0 a été publiée. Ce que je présente ici sont quelques-uns des résultats de mon étude des versions 1.2.
2. Brève introduction à AngularJs
La documentation officielle d'AngularJS le présente comme ceci. Entièrement écrit à l'aide de la technologie côté client JavaScript. Fonctionne avec d'autres technologies Web traditionnelles (HTML, CSS et JavaScript) pour rendre le développement d'applications Web plus facile et plus rapide que jamais.
AngularJS est principalement utilisé pour créer des applications Web d'une seule page. Il facilite la création d'applications Web interactives et modernes en augmentant le niveau d'abstraction entre les développeurs et les tâches courantes de développement d'applications Web. Pour plus de détails, veuillez consulter le didacticiel faisant autorité sur AngularJs
3. Conception du code
Premier coup d'oeil à notre répertoire de fichiers de projet :
index.html est le fichier du portail d'accès de notre système. Bien sûr, c'est le fichier du portail d'accès de notre système. première chose dont nous avons besoin : des documents écrits.
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <p> <p> <p ng-include="'views/common/menu.html'"></p> <p ui-view></p> </p> </p> <script src="libs/angular.js"></script> <script src="libs/angular-ui-router.js"></script> <script src="app.js"></script> <script src="module/first/firstController.js"></script> <script src="module/second/secondController.js"></script> </body> </html>Explication du code :
ng-app représente la portée d'angularjs, qui peut être écrit en Balises html Par exemple, p, nous l'écrivons généralement en tête de la balise html, ce qui signifie que l'intégralité du code HTML est affectée par notre AngularJS. Généralement, il suffit d'écrire une seule ng-app pour un HTML.
(Si vous souhaitez en savoir plus, rendez-vous sur le site PHP chinois Manuel de développement AngularJS pour apprendre) ui-view représente le routage, ce qui signifie que les pages correspondant au chemin sur mon URL sera affiché. Vous ne pouvez pas écrire de contenu sous ce p, et il sera invalide si vous l'écrivez.
var app = angular.module('myApp',
[
'ui.router',
'secondModule',
'firstModule'
]);
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('first', {
url: '/first',
templateUrl: 'views/first/first.html',
controller: 'firstController'
})
.state('second', {
url: '/second',
templateUrl: 'views/second/second.html',
controller: 'secondController'
})
$urlRouterProvider.otherwise('first')
})Nous définissons d'abord un module module. Le nom du module, myApp, doit être cohérent avec le nom de ng-app dans index.html. , comme le premier. C'est le nom du module de ui-view.
Ensuite, nous commençons à appeler la méthode config pour commencer à définir la route. Nous devons référencer les deux fournisseurs de services $stateProvider et $urlRouterProvider, puis appeler le. méthode state de $stateProvider pour définir chaque route A ; $urlRouterProvider.otherwise('first') signifie que lorsque l'adresse apparaissant sur l'url n'est pas définie dans la route, elle passera à la page correspondant à la première route.
Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois
Manuel d'utilisation d'AngularJS pour en savoir plus). pouvez laisser un message ci-dessous Posez des questions.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!