Angular adalah kerangka kerja aplikasi web sumber terbuka untuk membangun aplikasi web seluler dan desktop. Itu ditulis dalam TypeScript/JavaScript dan dibuat pada tahun 2009 oleh Google. Ini dirancang khusus untuk membangun aplikasi skala kecil hingga besar dari awal. Muncul dengan utilitas Angular CLI yang membantu Anda membuat, mengelola, membangun, dan menguji aplikasi Angular.
Dalam tutorial ini, kami akan menunjukkan cara menginstal Angular di Ubuntu 20.04.
Prasyarat
- Server yang menjalankan Ubuntu 20.04.
- Kata sandi root dikonfigurasi di server.
Instal Node.js
Sebelum memulai, Anda perlu menginstal Node.js dan npm di sistem Anda. Secara default, versi terbaru Node.js tidak tersedia di repositori default Ubuntu 20.04. Jadi, Anda perlu menambahkan repositori Node.js ke sistem Anda.
Pertama, tambahkan repositori Node.js dengan perintah berikut:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Setelah ditambahkan, instal Node.js dengan perintah berikut:
apt-get install nodejs -y
Setelah diinstal, verifikasi versi Node.js yang diinstal dengan perintah berikut:
node --version
Anda akan melihat output berikut:
v14.7.0
Selanjutnya, update versi npm ke versi terbaru dengan menjalankan perintah berikut:
npm install [email protected] -g
Selanjutnya, verifikasi versi npm dengan perintah berikut:
npm --version
Anda akan mendapatkan output berikut:
6.14.7
Instal Sudut
Anda dapat menginstal Angular menggunakan npm seperti yang ditunjukkan di bawah ini:
npm install -g @angular/cli
Setelah diinstal, verifikasi versi Angular yang diinstal menggunakan perintah berikut:
ng version
Anda akan melihat output berikut:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
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
Buat Proyek Sudut
Pada titik ini, Angular diinstal di sistem Anda. Saatnya membuat proyek baru dengan Angular.
Pertama, ubah direktori ke /opt dan buat proyek baru bernama myproject dengan perintah berikut:
cd /opt
ng new myproject
Selanjutnya, ubah direktori ke myproject dan layani proyek dengan perintah berikut:
cd myproject
ng serve --host your-server-ip --port 8088
Anda akan melihat output berikut:
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.
Akses Antarmuka Web Sudut
Pada titik ini, proyek Angular dikerahkan dan mendengarkan pada port 8088. Anda dapat mengaksesnya menggunakan URL http://your-server-ip:8088. Anda akan melihat layar berikut:
Kesimpulan
Selamat! Anda telah berhasil menginstal Angular di Ubuntu 20.04. Sekarang Anda dapat mulai menerapkan proyek pertama Anda dengan Angular. Salah satu fitur hebat Angular adalah webpack hot reload yang menyebarkan perubahan secara langsung dan menghemat banyak waktu Anda.