>
25
Februar
2017

Erstellen eines Angular Projekts mit @angular/cli

Getting startet with Angular

Das Web-Application Framework Angular ist heute das meist akzeptierte Javascript Framework für die Entwicklung von Apps für Desktop und Mobile. Im folgenden Artikel zeige ich, wie einfach es ist mit einem Angular Projekt zu starten. Zum Erzeugen des Projektrumpfes setze ich das Command Line Interface Angular CLI ein.

Das Beispiel setzt ein Linux Betriebsystem voraus:

Zunächst benötigen wir etwas Infrastruktur. Zum Herunterladen des nvm (Node Version Manager) benötigen wir Curl.

sudo apt install curl 

Mittels Curl können wir nun nvm mit einem Shell-Command herunterladen und installieren. NVM ist ein Verwaltungsprogramm für Node. Damit können mehrere Versionen von Node auf einem Rechner installiert und zwischen ihnen gewechselt werden.

# download and install
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

# check Installation (should output 'nvm')
command -v nvm 

Nach der Installation müssen wir die Shell restarten, damit nvm aufrufbar wird.

nvm install node 

In der Node Installation ist der Node Package Manager npm enthalten. Mit diesem können Pakete und deren Abhängigkeiten aus der NPM Registry geladen werden. Mit npm installieren wir zunächst das Command Line Interface von Angular. Der Parameter -g sorgt für eine globale Installation auf dem Rechner.

npm install -g @angular/cli@latest 

Nun dauert es etwas, da alle Bibliotheken für Angular-CLI aus dem Internet geladen werden. Das Shell Kommando für Angular CLI ist ng. Mit ng --version kann nun die Lauffähigkeit der Installation überprüft werden.

# check the installation
ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0-rc.0
node: 7.6.0
os: linux x64 

Jetzt kann mit ng new ein Projekt generiert werden. 'angular' nehmen wir im Beispiel als Projektnamen.

ng new angular 

Angular CLI generiert einen lauffähigen Projektrumpf mit Beispiel Applikation und Tests. Da auch alle abhängigen Software Pakete geladen werden, dauert dies etwas. Das Ergebnis kann hier begutachtet werden: https://github.com/lammers/angular

installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'angular' successfully created.
 

 Nach dem Wechsel ins Projektverzeichnis angular, kann die Anwendung mit ng serve gestartet werden. Der Testserver ist unter localhost:4200 erreichbar.

# start the Live Development Server to run the generated Angular App
ng serve
** NG Live Development Server is running on http://localhost:4200 **
Hash: df46ca06ad7ee40e0d19                                                               
Time: 5890ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 153 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 4.04 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.69 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
 

Diese Adresse einfach im Browser eingeben und das Ergebnis der Testanwendung ist unmittelbar zu sehen.

That was easy, right ?

 

 In einem folgenden Blog Artikel werden wir untersuchen, wie die SAAS Entwicklungsplatform Eclipse Che auf Codenvy Angular Projekte unterstützt.

 

Author; Dirk Lammers Categories: Angular

About the Author

Dirk Lammers

Dirk Lammers

Software Architekt @ lvm.de

Software Developer | Spring/Java | Angular/JavaScript

Projektveteran aus unzähligen & weltweiten IT-Beratungsprojekten seit 1996

 

IBM Architecture Certification     The Open Group Master IT Architect

 

 

Leave a comment

You are commenting as guest.