Heim > Artikel > Web-Frontend > Wie erstellt man ein Webprojekt mit AngularJs? Detaillierte Einführung in die Erstellung von Webprojekten mit AngularJS

Wie erstellt man ein Webprojekt mit AngularJs? Detaillierte Einführung in die Erstellung von Webprojekten mit AngularJS

寻∝梦Original: 2018-09-08 14:38:111996Durchsuche

In diesem Artikel wird hauptsächlich die schrittweise Erstellung von Webprojekten mit AngularJS vorgestellt. Wenn wir AngularJS zum Erstellen von Webprojekten verwenden möchten, müssen wir uns zuerst diesen Artikel durchlesen >

1. Vorwort

angularjs ist als beliebtes Front-End-Framework sehr beliebt, und zwar jetzt Es wurde Version 2.0 veröffentlicht. Was ich hier vorstelle, sind einige der Ergebnisse meiner Untersuchung der Versionen 1.2.

2. Kurze Einführung in AngularJs

Die offizielle Dokumentation von AngularJS stellt es so vor. Vollständig mit clientseitiger JavaScript-Technologie geschrieben. Funktioniert mit anderen bewährten Webtechnologien (HTML, CSS und JavaScript), um die Entwicklung von Webanwendungen einfacher und schneller als je zuvor zu machen.

AngularJS wird hauptsächlich zum Erstellen von Single-Page-Webanwendungen verwendet. Es erleichtert die Erstellung interaktiver, moderner Webanwendungen, indem es den Abstraktionsgrad zwischen Entwicklern und allgemeinen Webanwendungsentwicklungsaufgaben erhöht. Weitere Informationen finden Sie im maßgeblichen AngularJs-Tutorial

Der folgende Inhalt richtet sich an Schüler, die AngularJs nicht verstehen, können zuerst das maßgebliche Tutorial lesen.

3. Code-Design

Erster Blick in unser Projektdateiverzeichnis:

3.1 index.html

index.html ist die Zugriffsportaldatei unseres Systems Als erstes müssen wir Dokumente schreiben.

<!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>

Code-Erklärung:

ng-app stellt den Umfang von AngularJS dar, der in den HTML-Code geschrieben werden kann Tag, zum Beispiel p, schreiben wir normalerweise an den Kopf des HTML-Tags, was bedeutet, dass der gesamte HTML-Code von unseren AngularJS betroffen ist. Im Allgemeinen reicht es aus, nur eine NG-App für einen HTML-Code zu schreiben.

(Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website AngularJS-Entwicklungshandbuch , um mehr zu erfahren.) Die UI-Ansicht stellt das Routing dar, was bedeutet, dass die Seiten dem Pfad entsprechen Auf meiner URL wird kein Inhalt unter diesem p angezeigt, und er wird ungültig, wenn Sie ihn schreiben.

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

Zuerst definieren wir ein Modul. Der Name des Moduls, myApp, muss mit dem Namen von ng-app in index.html übereinstimmen Der erste lautet beispielsweise ui -View module name.

Dann beginnen wir mit dem Aufruf der Konfigurationsmethode, um mit der Definition der Route zu beginnen. Wir müssen auf die beiden Dienstanbieter $stateProvider und $urlRouterProvider verweisen und dann die aufrufen State-Methode von $stateProvider zum Definieren jeder A-Route; $urlRouterProvider.otherwise('first') bedeutet, dass, wenn die in der URL angezeigte Adresse nicht in der Route definiert ist, zur Seite gesprungen wird, die der ersten Route entspricht.

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website

AngularJS-Benutzerhandbuch , um mehr zu erfahren). Sie können unten eine Nachricht hinterlassen. Stellen Sie Fragen.

Das obige ist der detaillierte Inhalt vonWie erstellt man ein Webprojekt mit AngularJs? Detaillierte Einführung in die Erstellung von Webprojekten mit AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript css html 前端框架 JS ui

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie verwende ich AngularJS-Tools? Wie verwende ich jQuery in AngularJS?Nächster Artikel：Wie verwende ich AngularJS-Tools? Wie verwende ich jQuery in AngularJS?

In Verbindung stehende Artikel

Mehr sehen