Comment construire un projet web avec angulaireJs ? Introduction détaillée à la création de projets Web avec AngularJS

寻∝梦

Libérer： 2018-09-08 14:38:11

original

2001 Les gens l'ont consulté

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

Le contenu suivant est destiné aux étudiants qui ont une certaine compréhension d'AngularJs. Les étudiants qui ne comprennent pas peuvent d'abord lire le didacticiel faisant autorité.

3. Conception du code

Premier coup d'oeil à notre répertoire de fichiers de projet :

3.1 index.html

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="&#39;views/common/menu.html&#39;"></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>

Copier après la connexion

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.

3.2 app.js

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')
})

Copier après la connexion

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!