HWS: instal

Jika anda membaca tulisan saya tentang Pengertian angular cli dan single page application, maka setidaknya anda akan paham apa itu angular cli. Artikel ini akan membahas sisi praktis dari artikel sebelumnya yaitu bagaimana cara menginstall angular 6 serta membuat project pertama anda dengan angular. Kebutuhan Installasi node, hingga saat artikel ini ditulis node telah mencapai versi 10.12.0 dengan versi LTS nya 8.12.0. Saya menyarankan anda menggunakan versi LTS. npm (node package manager), package manajer untuk node. Nantinya penggunaan library tambahan dalam angular memakai npm. Kedua kebutuhan diatas dapat di install sekaligus melalui node. Masuklah ke laman node untuk mendowload installernya. Installasi node cukup mudah, cukup ikuti wizard hingga selesai. Untuk memastikan node telah terinstall di komputer anda, gunakan perintah berikut pada terminal. <div class="crayon-syntax crayon-theme-prism-like crayon-font-ubuntu-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" id="crayon-5d5cdd2b62d38429049700" style="background: rgb(245, 245, 245) !important; border-color: rgb(222, 222, 222) !important; border-image: initial; border-radius: 5px; border-style: solid !important; border-width: 1px !important; box-sizing: border-box; color: #333333; direction: ltr !important; font-family: Monaco, MonacoRegular, "Courier New", monospace; font-size: 18px !important; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; height: auto; line-height: 25px !important; margin: 14px 0px; overflow: hidden !important; padding: 0px; position: relative !important; text-size-adjust: none; width: 762.344px;"> <table class="crayon-table" style="background: none !important; border-collapse: collapse !important; border-spacing: 0px !important; border: none !important; box-sizing: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 0px !important; margin-left: -23px; margin-right: 0px !important; margin-top: 0px !important; max-width: 100%; padding: 0px !important; table-layout: auto !important; vertical-align: top; width: auto !important;"> <td class="crayon-nums " data-settings="hide" style="background-attachment: initial; background-clip: initial; background-color: rgb(238, 238, 238) !important; background-image: initial; background-origin: initial; background-position: 0px center; background-repeat: initial; background-size: initial; border: 0px; box-sizing: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px !important; padding: 0px !important; vertical-align: top !important;"> <div class="crayon-num" data-line="crayon-5d5cdd2b62d38429049700-1" style="background: 0px center; border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 1px solid rgb(222, 222, 222) !important; border-top: 0px; box-sizing: inherit; color: rgb(170, 170, 170) !important; font-family: inherit; font-size: inherit !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit !important; height: inherit; line-height: inherit !important; margin: 0px; min-width: 1.2em !important; padding: 0px 5px; text-align: right !important;"> 1 <div class="crayon-pre" style="background: none !important; border: none !important; box-sizing: inherit; font-size: 18px !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 25px !important; margin: 0px; overflow: visible; padding-bottom: 3px !important; padding-left: 0px; padding-right: 0px; padding-top: 5px !important; tab-size: 4; white-space: pre;"> node - v Cara menginstall angular 6 Ketikkan perintah berikut pada terminal anda untuk menginstall angular cli. <div class="crayon-syntax crayon-theme-prism-like crayon-font-ubuntu-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" id="crayon-5d5cdd2b62d49735962625" style="background: rgb(245, 245, 245) !important; border-color: rgb(222, 222, 222) !important; border-image: initial; border-radius: 5px; border-style: solid !important; border-width: 1px !important; box-sizing: border-box; color: #333333; direction: ltr !important; font-family: Monaco, MonacoRegular, "Courier New", monospace; font-size: 18px !important; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; height: auto; line-height: 25px !important; margin: 14px 0px; overflow: hidden !important; padding: 0px; position: relative !important; text-size-adjust: none; width: 762.344px;"> <table class="crayon-table" style="background: none !important; border-collapse: collapse !important; border-spacing: 0px !important; border: none !important; box-sizing: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 0px !important; margin-left: -23px; margin-right: 0px !important; margin-top: 0px !important; max-width: 100%; padding: 0px !important; table-layout: auto !important; vertical-align: top; width: auto !important;"> <td class="crayon-nums " data-settings="hide" style="background-attachment: initial; background-clip: initial; background-color: rgb(238, 238, 238) !important; background-image: initial; background-origin: initial; background-position: 0px center; background-repeat: initial; background-size: initial; border: 0px; box-sizing: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px !important; padding: 0px !important; vertical-align: top !important;"> <div class="crayon-num" data-line="crayon-5d5cdd2b62d49735962625-1" style="background: 0px center; border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 1px solid rgb(222, 222, 222) !important; border-top: 0px; box-sizing: inherit; color: rgb(170, 170, 170) !important; font-family: inherit; font-size: inherit !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit !important; height: inherit; line-height: inherit !important; margin: 0px; min-width: 1.2em !important; padding: 0px 5px; text-align: right !important;"> 1 <div class="crayon-pre" style="background: none !important; border: none !important; box-sizing: inherit; font-size: 18px !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 25px !important; margin: 0px; overflow: visible; padding-bottom: 3px !important; padding-left: 0px; padding-right: 0px; padding-top: 5px !important; tab-size: 4; white-space: pre;"> npm install - g @ angular / cli Tunggu hingga proses installasi selesai, lalu ketikkan perintah di bawah ini untuk memastikan angular cli berhasil di install. <div class="crayon-syntax crayon-theme-prism-like crayon-font-ubuntu-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" id="crayon-5d5cdd2b62d4f009506637" style="background: rgb(245, 245, 245) !important; border-color: rgb(222, 222, 222) !important; border-image: initial; border-radius: 5px; border-style: solid !important; border-width: 1px !important; box-sizing: border-box; color: #333333; direction: ltr !important; font-family: Monaco, MonacoRegular, "Courier New", monospace; font-size: 18px !important; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; height: auto; line-height: 25px !important; margin: 14px 0px; overflow: hidden !important; padding: 0px; position: relative !important; text-size-adjust: none; width: 762.344px;"> <table class="crayon-table" style="background: none !important; border-collapse: collapse !important; border-spacing: 0px !important; border: none !important; box-sizing: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 0px !important; margin-left: -23px; margin-right: 0px !important; margin-top: 0px !important; max-width: 100%; padding: 0px !important; table-layout: auto !important; vertical-align: top; width: auto !important;"> <td class="crayon-nums " data-settings="hide" style="background-attachment: initial; background-clip: initial; background-color: rgb(238, 238, 238) !important; background-image: initial; background-origin: initial; background-position: 0px center; background-repeat: initial; background-size: initial; border: 0px; box-sizing: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px !important; padding: 0px !important; vertical-align: top !important;"> <div class="crayon-num" data-line="crayon-5d5cdd2b62d4f009506637-1" style="background: 0px center; border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 1px solid rgb(222, 222, 222) !important; border-top: 0px; box-sizing: inherit; color: rgb(170, 170, 170) !important; font-family: inherit; font-size: inherit !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit !important; height: inherit; line-height: inherit !important; margin: 0px; min-width: 1.2em !important; padding: 0px 5px; text-align: right !important;"> 1 <div class="crayon-pre" style="background: none !important; border: none !important; box-sizing: inherit; font-size: 18px !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 25px !important; margin: 0px; overflow: visible; padding-bottom: 3px !important; padding-left: 0px; padding-right: 0px; padding-top: 5px !important; tab-size: 4; white-space: pre;"> ng - v Jika gambar di atas muncul di terminal, maka proses pemasangan angular cli di komputer anda telah berhasil. Membuat project pertama anda di angular Pertama, tentukan direktori tempat anda ingin membuat project, di sini saya akan menyimpan project di direktori /Documents. Lalu ketikkan perintah di bawah ini untuk membuat project. <div class="crayon-syntax crayon-theme-prism-like crayon-font-ubuntu-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" id="crayon-5d5cdd2b62d59535739182" style="background: rgb(245, 245, 245) !important; border-color: rgb(222, 222, 222) !important; border-image: initial; border-radius: 5px; border-style: solid !important; border-width: 1px !important; box-sizing: border-box; color: #333333; direction: ltr !important; font-family: Monaco, MonacoRegular, "Courier New", monospace; font-size: 18px !important; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; height: auto; line-height: 25px !important; margin: 14px 0px; overflow: hidden !important; padding: 0px; position: relative !important; text-size-adjust: none; width: 762.344px;"> <table class="crayon-table" style="background: none !important; border-collapse: collapse !important; border-spacing: 0px !important; border: none !important; box-sizing: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 0px !important; margin-left: -23px; margin-right: 0px !important; margin-top: 0px !important; max-width: 100%; padding: 0px !important; table-layout: auto !important; vertical-align: top; width: auto !important;"> <td class="crayon-nums " data-settings="hide" style="background-attachment: initial; background-clip: initial; background-color: rgb(238, 238, 238) !important; background-image: initial; background-origin: initial; background-position: 0px center; background-repeat: initial; background-size: initial; border: 0px; box-sizing: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px !important; padding: 0px !important; vertical-align: top !important;"> <div class="crayon-num" data-line="crayon-5d5cdd2b62d59535739182-1" style="background: 0px center; border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 1px solid rgb(222, 222, 222) !important; border-top: 0px; box-sizing: inherit; color: rgb(170, 170, 170) !important; font-family: inherit; font-size: inherit !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit !important; height: inherit; line-height: inherit !important; margin: 0px; min-width: 1.2em !important; padding: 0px 5px; text-align: right !important;"> 1 <div class="crayon-pre" style="background: none !important; border: none !important; box-sizing: inherit; font-size: 18px !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 25px !important; margin: 0px; overflow: visible; padding-bottom: 3px !important; padding-left: 0px; padding-right: 0px; padding-top: 5px !important; tab-size: 4; white-space: pre;"> ng new hello - angular ng new adalah command cli untuk men-generate project baru di angular, selanjutnya adalah nama untuk project anda, pada contoh di atas saya menggunakan hello-angular untuk nama project. Tunggu beberapa saat hingga proses generate selesai, lamanya bergantung pada spesifikasi dan jaringan internet pada komputer anda. Jika berhasil, selanjutnya anda dapat menjalankan aplikasi angular pertama anda. Masuklah ke dalam direktori project, karna direktori project saya adalah hello-angular maka saya akan masuk ke direktori hello-angular. <div class="crayon-syntax crayon-theme-prism-like crayon-font-ubuntu-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" id="crayon-5d5cdd2b62d62782196304" style="background: rgb(245, 245, 245) !important; border-color: rgb(222, 222, 222) !important; border-image: initial; border-radius: 5px; border-style: solid !important; border-width: 1px !important; box-sizing: border-box; color: #333333; direction: ltr !important; font-family: Monaco, MonacoRegular, "Courier New", monospace; font-size: 18px !important; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; height: auto; line-height: 25px !important; margin: 14px 0px; overflow: hidden !important; padding: 0px; position: relative !important; text-size-adjust: none; width: 762.344px;"> <table class="crayon-table" style="background: none !important; border-collapse: collapse !important; border-spacing: 0px !important; border: none !important; box-sizing: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 0px !important; margin-left: -23px; margin-right: 0px !important; margin-top: 0px !important; max-width: 100%; padding: 0px !important; table-layout: auto !important; vertical-align: top; width: auto !important;"> <td class="crayon-nums " data-settings="hide" style="background-attachment: initial; background-clip: initial; background-color: rgb(238, 238, 238) !important; background-image: initial; background-origin: initial; background-position: 0px center; background-repeat: initial; background-size: initial; border: 0px; box-sizing: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px !important; padding: 0px !important; vertical-align: top !important;"> <div class="crayon-num" data-line="crayon-5d5cdd2b62d62782196304-1" style="background: 0px center; border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 1px solid rgb(222, 222, 222) !important; border-top: 0px; box-sizing: inherit; color: rgb(170, 170, 170) !important; font-family: inherit; font-size: inherit !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit !important; height: inherit; line-height: inherit !important; margin: 0px; min-width: 1.2em !important; padding: 0px 5px; text-align: right !important;"> 1 <div class="crayon-pre" style="background: none !important; border: none !important; box-sizing: inherit; font-size: 18px !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 25px !important; margin: 0px; overflow: visible; padding-bottom: 3px !important; padding-left: 0px; padding-right: 0px; padding-top: 5px !important; tab-size: 4; white-space: pre;"> cd hello - angular Kemudian ketikkan perintah di bawah ini. <div class="crayon-syntax crayon-theme-prism-like crayon-font-ubuntu-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" id="crayon-5d5cdd2b62d68340969580" style="background: rgb(245, 245, 245) !important; border-color: rgb(222, 222, 222) !important; border-image: initial; border-radius: 5px; border-style: solid !important; border-width: 1px !important; box-sizing: border-box; color: #333333; direction: ltr !important; font-family: Monaco, MonacoRegular, "Courier New", monospace; font-size: 18px !important; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; height: auto; line-height: 25px !important; margin: 14px 0px; overflow: hidden !important; padding: 0px; position: relative !important; text-size-adjust: none; width: 762.344px;"> <table class="crayon-table" style="background: none !important; border-collapse: collapse !important; border-spacing: 0px !important; border: none !important; box-sizing: inherit; font-size: 12px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 0px !important; margin-left: -23px; margin-right: 0px !important; margin-top: 0px !important; max-width: 100%; padding: 0px !important; table-layout: auto !important; vertical-align: top; width: auto !important;"> <td class="crayon-nums " data-settings="hide" style="background-attachment: initial; background-clip: initial; background-color: rgb(238, 238, 238) !important; background-image: initial; background-origin: initial; background-position: 0px center; background-repeat: initial; background-size: initial; border: 0px; box-sizing: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px !important; padding: 0px !important; vertical-align: top !important;"> <div class="crayon-num" data-line="crayon-5d5cdd2b62d68340969580-1" style="background: 0px center; border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 1px solid rgb(222, 222, 222) !important; border-top: 0px; box-sizing: inherit; color: rgb(170, 170, 170) !important; font-family: inherit; font-size: inherit !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit !important; height: inherit; line-height: inherit !important; margin: 0px; min-width: 1.2em !important; padding: 0px 5px; text-align: right !important;"> 1 <div class="crayon-pre" style="background: none !important; border: none !important; box-sizing: inherit; font-size: 18px !important; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 25px !important; margin: 0px; overflow: visible; padding-bottom: 3px !important; padding-left: 0px; padding-right: 0px; padding-top: 5px !important; tab-size: 4; white-space: pre;"> ng serve Jika command di atas berhasil, anda akan melihat gambar berikut di terminal anda. Sebagai bukti bahwa project hello-angular telah siap dibuka di jendela browser. Selanjutnya, buka browser anda dan ketikkan alamat locahost:4200 pada bagian url. Maka laman browser anda akan menampilkan hasil dari project baru anda. Sampai di sini anda telah berhasil menginstall angular cli dan membuat project pertama anda dengan angular. Semoga bermanfaat.

Artikel Terbaru

Cara install Angular 6 dengan mudah