Schlagwort-Archive: AngularJS

AngularJS in Visual Studio

AngularJS mit Visual Studio

Vielleicht hast du ein Projekt oder eine Idee und möchtest diese mit AngularJS
umsetzen. Normalerweise reicht dazu ein normaler Editor, jedoch mag es der ein oder andere
gerne über Visual Studio entwickeln, in diesem Beitrag möchte ich euch erläutern, wie ihr das
Angular JS Framework in ein Visual Studio Projekt einbindet und damit auch arbeitet.

Als Minimum Vorraussetzung, benötigen wir das Visual Studio Community (kostenlos)
https://www.visualstudio.com/en-us/products/visual-studio-community-vs
Zusätzlich solltet ihr es auf die letzten Versionen updaten und euch die letzte Version die
Visual Studio Web Essentials installieren. http://vswebessentials.com/

Auswahl einer Web Vorlage

Angular Js in Visualstudio
Angular JS in Visual Studio, Empty ASP.NET Projekt

In diesem Eintrag nehme ich als Beispiel ein leeres Web, ASP.NET Web Application Projekt.

Lassen wir das Projekt nun mit F5 loslaufen, erhalten wir den Fehler 403 Forbidden.

Index.html anlegen

Jetzt fügen wir eine Datei mit dem Namen: index.html, in das Wurzelverzeichnis hinzu.
In dieser können wir im <body> Bereich “Hallo Welt” reinschreiben.
Lassen wir das Projekt nun nochmal erstellen und laufen, sollte sich die Ausgabe geändert haben:

AngularJS Index.html
AngularJS Index.html

Angular JS Framework in das Projekt einbinden
Möchte man eine AngularJs Applikation schreiben, müssen wir dazu das nötige
AngularJS Framework einbinden. Dies geschieht am besten über NuGet.

NuGet Package installieren

NuGet Package Angular JS Core in dem Projekt hinzufügen
NuGet Package Angular JS Core in dem Projekt hinzufügen

Dazu klicken wir wie im Bild oben schon zu erahnen ist auf “Manage NuGet Packages…”.

Anschließend klicken wir auf Browse und suchen dort nach “angularjs”.
Hier wählen wir die AngularJS.Core aus und installieren diese.

Unsere Projektmappe erweitert sich um das Angular JS Framework:

Jetzt sollten wir in unserer index.html das Framework referenzieren mit dieser Zeile:

<script src=”Scripts/angular.min.js”></script>

Grundlegende Angular App Struktur erstellen
Als erstes erstellen wir uns in der Solution ein Ordner Namens: “app”.
In diesem Verzeichnis erstellen wir zwei JavaScript Dateien:
app.module.js und main.js

Solution Explorer nach Angular JS Installation
Solution Explorer nach Angular JS Installation

app.module.js bearbeiten

Die app.module.js beinhaltet ein “Single-level” Modul. In diesem Beispiel, die Applikation hat ein
Application-Level Modul, welches weitere Module aus dem Projekt lädt. Die Datei app.module.js
verfolgt das Konzept, der Module, Controllers, Services, Direktive und Views.
Die o.g. Datei sollte als Grundlage folgenden Inhalt haben:

(function() {
‘use strict’;

angular.module(‘app’, []);

})();

Dieses Beispiel nutzt eine IIFE (Immediately-invoked function expression um den Code auszuführen.
(http://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
Dieses “Pattern” wird von der Struktur von jedem Modul genutzt.
Man beachte die zweite Zeile: ‘use strict’;
Dies triggert neuere Browser dazu an, JavaScript im StrictMode auszuführen.

‘use strict’; ist optional, jedoch empfehlenswert für eine saubere Programmierung.

 

main.js bearbeiten

In der main.js Datei erstellen wir ein Controller, um auch später bei umfangreicheren Projekten,
konsistent zu bleiben, empfehle ich in dem Dateinamen, den Begriff “Controller” nicht zu verwenden.
Erklärt wird dies in einem Post von John Papa
http://www.johnpapa.net/angular-app-structuring-guidelines/
Wo wir gerade bei der Namensnennung sind, lege ich euch diese
Naming Guideline an Herz:
https://github.com/johnpapa/angular-styleguide#naming
Nun zum Inhalt des Controllers zurück; wir fügen folgendes in unserer main.js:

(function () {
‘use strict’;
angular        .module(‘app’)
.controller(‘Main’, main);
function main() {
var vm = this;
vm.welt = ‘welt’;
}
})();

Die function main, ist der Controller.
Nun benötigen wir noch eine View in der wir alles anzeigen können.

Index.html bearbeiten

Wir füllen unsere zuvor angelegte index.html mit folgenden HTML-Code:

<!DOCTYPE html> <html ng-app=”app”><head>    <title></title></head><body ng-controller=”Main as vm”>     <input type=”text” ng-model=”vm.food” placeholder=”Enter Welt.” />     <p>Hallo {{vm.food}}!</p>     <script src=”Scripts/angular.min.js”></script>    <script src=”app/app.module.js”></script>    <script src=”app/main.js”></script> </body></html>

Projekt starten

Speichern wir nun das Projekt und lassen es mit F5 erstellen.
sollte sich der Browser öffnen und folgendes anzeigen (Nach der Eingabe, des Wortes “Welt” in dem Textfeld.

Hallo Welt, AngularJS mit Visual Studio
Hallo Welt, AngularJS mit Visual Studio

 

Im <body>-Kontext seht ihr nun die Benutzung der Controller-Syntax  in der View.

Das VM im Quelltext ist dabei unsere Sogenannte Scope.

Das kleine Beispiel Projekt könnt ihr euch auch hier herunterladen, um das ganze ggf. besser nach zu vollziehen. Möchte man mit Javascript bisschen rum probieren ohne gleich Dateien auf dem PC erstellen zu müssen, so habt ihr die Möglichkeit im Browser mit JSFiddle ein wenig zu experimentieren.