Angular je open-source webový aplikační rámec pro vytváření mobilních a desktopových webových aplikací. Je napsán v TypeScript/JavaScript a byl vytvořen v roce 2009 společností Google. Je speciálně navržen pro vytváření malých i velkých aplikací od začátku. Dodává se s nástrojem Angular CLI, který vám pomůže vytvářet, spravovat, sestavovat a testovat aplikace Angular.
V tomto tutoriálu vám ukážeme, jak nainstalovat Angular na Ubuntu 20.04.
Předpoklady
- Server se systémem Ubuntu 20.04.
- Na serveru je nakonfigurováno heslo uživatele root.
Instalovat Node.js
Než začnete, budete muset do systému nainstalovat Node.js a npm. Ve výchozím nastavení není nejnovější verze Node.js dostupná ve výchozím úložišti Ubuntu 20.04. Budete tedy muset do svého systému přidat úložiště Node.js.
Nejprve přidejte úložiště Node.js pomocí následujícího příkazu:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Po přidání nainstalujte Node.js pomocí následujícího příkazu:
apt-get install nodejs -y
Po instalaci ověřte nainstalovanou verzi Node.js pomocí následujícího příkazu:
node --version
Měli byste vidět následující výstup:
v14.7.0
Dále aktualizujte verzi npm na nejnovější verzi spuštěním následujícího příkazu:
npm install [email protected] -g
Dále ověřte verzi npm pomocí následujícího příkazu:
npm --version
Měli byste získat následující výstup:
6.14.7
Instalovat Angular
Angular můžete nainstalovat pomocí npm, jak je znázorněno níže:
npm install -g @angular/cli
Po instalaci ověřte nainstalovanou verzi Angular pomocí následujícího příkazu:
ng version
Měli byste vidět následující výstup:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 10.0.5
Node: 14.7.0
OS: linux x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1000.5
@angular-devkit/core 10.0.5
@angular-devkit/schematics 10.0.5
@schematics/angular 10.0.5
@schematics/update 0.1000.5
rxjs 6.5.5
Vytvořit úhlový projekt
V tomto okamžiku je ve vašem systému nainstalován Angular. Je čas vytvořit nový projekt s Angular.
Nejprve změňte adresář na /opt a vytvořte nový projekt s názvem myproject pomocí následujícího příkazu:
cd /opt
ng new myproject
Dále změňte adresář na myproject a obsluhujte projekt pomocí následujícího příkazu:
cd myproject
ng serve --host your-server-ip --port 8088
Měli byste vidět následující výstup:
WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.65 MB [initial] [rendered]
Date: 2020-08-09T14:10:36.644Z - Hash: a053188b5496361814a2 - Time: 14873ms
** Angular Live Development Server is listening on 69.87.218.220:8088, open your browser on http://69.87.218.220:8088/ **
: Compiled successfully.
Přístup k webovému rozhraní Angular
V tomto okamžiku je projekt Angular nasazen a naslouchá na portu 8088. Můžete k němu přistupovat pomocí adresy URL http://ip-ip-vašeho-serveru:8088. Měli byste vidět následující obrazovku:
Závěr
Gratulujeme! úspěšně jste nainstalovali Angular na Ubuntu 20.04. Nyní můžete začít nasazovat svůj první projekt s Angular. Jednou ze skvělých funkcí Angularu je rychlé opětovné načtení webpacku, které nasadí změnu do živého vysílání a ušetří vám spoustu času.