So erstellen Sie mit AngularJS eine einfache Webanwendung

AngularJS wird derzeit häufig von verschiedenen Arten von Webentwicklern verwendet, und dieses hervorragende Framework hat seine Fähigkeit, verschiedene Anforderungen zu erfüllen, voll und ganz unter Beweis gestellt. Als Webentwickler ist die Wahl eines hervorragenden Frameworks eine notwendige Voraussetzung für die Arbeit, egal ob Sie gerade erst anfangen oder über umfangreiche praktische Erfahrung verfügen, und AngularJS ist eine ideale Lösung. Während Sie AnguarJS nutzen, können Sie mehr über die Anwendungsentwicklung erfahren und erfahren, wie Sie bessere und attraktivere Anwendungsergebnisse erzielen. Wenn Sie Best Practices bei der Erstellung von Anwendungen übernehmen möchten, kann AngularJS ebenfalls eine große Hilfe sein. Alles in allem werden die leistungsstarken Funktionen und Features dieses Frameworks Freunde mit Anwendungsentwicklungsanforderungen niemals enttäuschen.

So erstellen Sie mit AngularJS eine einfache Webanwendung_AngularJS

AngularJS verfügt über viele herausragende Funktionen. Heute nehmen wir eine einfache Anwendung als Beispiel, um Ihnen zu helfen, die Verwendung zu verstehen. Mit Firebase lässt sich unsere einfache, aber praktische Anwendung ganz einfach erstellen. Als fertiges Produkt ermöglicht die entwickelte App jedem, sich jederzeit einzuloggen bzw. einzuloggen und Artikel darauf zu veröffentlichen.

Einführung in AngularJS und Firebase

Introduction to Angular.js and Firebase

AngularJS ist derzeit das beliebteste JavaScript-MVC-Framework unter Webentwicklern. Wenn Sie eine einzigartige Anwendung erstellen möchten, ist diese dank ihrer leistungsstarken HTML-Funktionserweiterungsfunktionen definitiv die beste Wahl für Sie. Mit Hilfe von AngularJS müssen wir nicht mehr viel Code zum Erstellen von Anwendungen verwenden. Sein erstaunlicher Abhängigkeitsinjektions- und Bindungsmechanismus macht die Anwendungsentwicklung äußerst komfortabel.

Andererseits bietet Firebase eine hervorragende Unterstützung für AngularJS, was Ihnen die Mühe erspart, Backend-Unterstützung für die von Ihnen erstellten Anwendungen zu entwickeln. Mit Hilfe von Firebase wird unsere Anwendung in der Lage sein, eine Datensicherung in Echtzeit durchzuführen – die notwendigen API-Aufrufe sind natürlich weiterhin unverzichtbar.

Obwohl AngularJS selbst bereits recht leistungsfähig ist, können wir mit Hilfe von Firebase unsere Anwendungsergebnisse auf die nächste Stufe heben.

Hier beginnen

Bevor Sie mit AngularJS diese einfache kleine Webanwendung erstellen, müssen Sie zunächst das Angular-Seed-Projekt herunterladen. Nachdem der Download abgeschlossen ist, müssen Sie das entsprechende Download-Verzeichnis öffnen und die darin enthaltenen Abhängigkeiten installieren, um ihn auszuführen. Der spezifische Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

$ cd angle-seed 

$ npm install ## Installieren Sie die Abhängigkeiten 

Der nächste Schritt besteht darin, den Knotenserver mit dem folgenden Delegaten zu starten:

Code kopieren Der Code lautet wie folgt:

$ npm start ## Starten Sie den Server

Nachdem der Knotenserver betriebsbereit ist, müssen wir den Browser öffnen und http://localhost:8000/app/index.html aufrufen, wo die laufende Standardanwendung angezeigt wird.

Besuchen Sie als Nächstes das Anwendungsverzeichnis im Angular-Seed-Projektordner, in dem der Anwendungscode gespeichert ist.

App.js wird als Kern der Anwendung auch im Anwendungsordner gespeichert. Alle Module und Routen auf Anwendungsebene in app.js müssen deklariert werden.

Darüber hinaus finden Sie hier auch zwei Ansichten von angle-seed, nämlich Ansicht 1 und Ansicht 2. Sie existieren immer in ihrer Standardform. Wir müssen diese Ansichten im Anwendungsordner löschen.

Jetzt erstellen wir die Anwendung von Grund auf: Sie müssen zuerst app.js öffnen und den gesamten vorhandenen Code darin löschen. Um unsere Anwendungsrouten in app.js zu definieren, müssen wir ngRoute verwenden, eines der Module in AngularJS. Standardmäßig enthält app.js dieses Modul nicht, daher müssen wir es manuell in die Anwendung einfügen, um es verwenden zu können. Sie können den folgenden Code verwenden, um das Hinzufügen des AngularJS-Moduls abzuschließen:

angular.module('myApp', [ 
'ngRoute' 
])

Nach dem Login kopieren

Das ngRoute-Modul bringt eine wichtige Komponente mit, $routeProvider, die das Routing perfekt konfigurieren kann. Wir müssen den folgenden Code verwenden, um $routeProvider in die Konfigurationsmethode von angle-module einzufügen, um die Routendefinition abzuschließen:

'use strict'; 
angular.module('myApp', [ 
'ngRoute' 
]). 
config(['$routeProvider', function($routeProvider) { 
// Routes will be here 
}]);

Nach dem Login kopieren

完成以上步骤后，现在我们就可以打开index.html了。将index.html当中的全部内容清除，只保留脚本引用以及div。

每一次进行路由变更时，我们都需要按照以上方法对div内容进行调整。

在视图当中创建符号

我们需要在app目录当中创建一个新的文件夹并将其命名为home。在该文件夹当中，我们额外再创建两个文件夹，分别为home.js与home.html。首先打开home.html并将以下代码添加进去：

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="icon" href="http://getbootstrap.com/favicon.ico"> 
<title>AngularJS & Firebase Web App</title> 
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet"> 
<link href="justified-nav.css" rel="stylesheet"> 
</head> 
<body> 
<div class="container"> 
<div class="jumbotron" style="padding-bottom:0px;"> 
<h2>AngularJS & Firebase App!</h2> 
</div> 
<form class="form-signin" role="form"> 
<input type="email" class="form-control" placeholder="Email address" required="" autofocus=""> 
<input type="password" class="form-control" placeholder="Password" required=""> 
<label class="checkbox"> 
<a href="#"> Sign Up</> 
</label> 
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
</form> 
</div> 
</body></html>

Nach dem Login kopieren

在home.js当中，我们则需要创建一套路由机制以访问home视图。另外还需要为由home视图创建的$scope设置一套控制器。控制器永远负责控制与之对应的特定视图。具体代码如下所示：

use strict'; 
angular.module('myApp.home', ['ngRoute']) 
// Declared route 
.config(['$routeProvider', function($routeProvider) { 
$routeProvider.when('/home', { 
templateUrl: 'home/home.html', 
controller: 'HomeCtrl' 
}); 
}]) 
// Home controller 
.controller('HomeCtrl', [function() { 
}]);

Nach dem Login kopieren

现在应用程序已经准备就绪。打开app.js，而后将myApp.home home模块添加到该应用当中。利用$routeProvider.otherwise方法为我们的应用程序声明一套指向home视图的默认路由，具体代码如下所示：

'use strict'; 
angular.module('myApp', [ 
'ngRoute', 
'myApp.home'      // Newly added home module 
]). 
config(['$routeProvider', function($routeProvider) { 
// Set defualt view of our app to home 
$routeProvider.otherwise({ 
redirectTo: '/home' 
}); 
}]);

Nach dem Login kopieren

如果大家希望显示自己的home页面，则将home.js添加到该应用的主HTML模板文件当中。要完成这项操作，请打开index.html文件并湢以下代码：