Saya perkenalkan dengan mengatakan, saya berasumsi Anda dan semua orang yang akan membaca ini sudah nyaman dengan Angular 1 ( sekarang disebut sebagai AngularJS , bukan hanya Angular untuk versi yang lebih baru). Yang sedang berkata, mari kita masuk ke beberapa tambahan dan perbedaan utama dalam Angular 2+.
- Mereka menambahkan sudut
cli.
Anda dapat memulai proyek baru dengan menjalankan ng new [app name]. Anda dapat melayani proyek Anda dengan menjalankan ng serve
pelajari lebih lanjut di sini: https://github.com/angular/angular-cli
- Kode sudut Anda ditulis dalam ES6 Typescript dan dikompilasi saat runtime ke Javascript di browser.
Untuk mendapatkan pemahaman penuh tentang ini saya sarankan memeriksa beberapa daftar sumber daya yang saya miliki di bagian bawah jawaban saya.
- Struktur Proyek
Dalam struktur dasar, Anda akan memiliki app/tsfolder di mana Anda akan melakukan sebagian besar pekerjaan Anda dan app/jsAnda akan menemukan di app/jsfolder file dengan .js.mapekstensi. Mereka "memetakan" file ".ts" Anda ke browser Anda untuk debug karena browser Anda tidak dapat membaca naskah asli.
Perbarui : Ini kehabisan beta. Struktur proyek berubah sedikit, dalam banyak kasus dan jika Anda menggunakan cli sudut, Anda akan bekerja di
src/app/folder. Dalam proyek pemula, Anda akan memiliki yang berikut ini.
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.component.css : File CSS yang harus Anda gunakan khusus untukcomponent.html
app.component.html : Tampilan (variabel dideklarasikan di app.component.js)
app.component.spec.ts : digunakan untuk pengujianapp.component.ts
app.component.ts : Kode Anda yang mengikatapp.component.html
app.module.ts : Ini yang memulai aplikasi Anda dan di mana Anda menentukan semua plugin, komponen, layanan, dll. Ini setara dengan app.jsdi dalam Angular 1
index.ts digunakan untuk mendefinisikan atau mengekspor file proyek
Informasi tambahan:
Kiat pro: Anda dapat menjalankan ng generate [option] [name]untuk menghasilkan layanan baru, komponen, pipa, dll.
Juga tsconfig.jsonfile ini penting karena mendefinisikan aturan kompilasi TS untuk proyek Anda.
Jika Anda berpikir saya harus belajar bahasa yang sama sekali baru? ... Uh ... agak, TypeScript adalah superset dari JavaScript. Jangan diintimidasi; itu ada untuk membuat pengembangan Anda lebih mudah. Saya merasa seperti memiliki pemahaman yang baik tentang itu setelah hanya beberapa jam bermain dengannya, dan semuanya turun setelah 3 hari.
- Anda mengikat HTML Anda sama seperti yang Anda lakukan jika dalam arahan 1 Sudut. Jadi variabel suka
$scopedan $rootScopesudah usang.
Yang ini Anda mungkin tersirat. Angular 2 masih berupa MV * tetapi Anda akan menggunakan ' komponen ' sebagai cara untuk mengikat kode ke templat Anda, misalnya, ambil yang berikut
import { Component } from '@angular/core';
@Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
Pikirkan importpernyataan ini sebagai injeksi ketergantungan Anda pada pengontrol v1. Anda menggunakan importuntuk mengimpor paket Anda, di mana import {Component}kata Anda akan membuat componentAnda ingin mengikat Anda HTML.
Perhatikan @Componentdekorator yang Anda punya selectordan template. Di sini pikirkan selectorsebagai Anda $scopeyang Anda gunakan seperti Anda menggunakan v1 di directivesmana nama selectoradalah apa yang Anda gunakan untuk mengikat HTML Anda seperti begitu
<my-app> </my-app>
Di mana <my-app>nama tag khusus yang akan Anda gunakan yang akan bertindak sebagai pengganti untuk apa yang dinyatakan dalam template Anda. yaitu) <h1> Hello World! </h1>. Sedangkan ini akan terlihat seperti berikut di v1:
HTML
<h1>{{hello}}</h1>
JS
$scope.hello = "Hello World!"
Anda juga dapat menambahkan sesuatu di antara tag ini untuk menghasilkan pesan pemuatan, seperti ini:
<my-app> Loading... </my-app>
Maka akan muncul " Memuat ... " sebagai pesan pemuatan.
Perhatikan bahwa yang dinyatakan dalam templateadalah jalur atau HTML mentah yang akan Anda gunakan di tag HTMLAnda selector.
Implementasi Angular 1 yang lebih lengkap akan terlihat seperti ini:
HTML
<h1 ng-controller="myCtrl">{{hello}}</h1>
Di v1 ini akan terlihat seperti
JS
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
Inilah yang saya sangat suka tentang v2. Saya menemukan arahan adalah kurva belajar yang curam bagi saya di v1 dan bahkan ketika saya menemukan mereka, saya sering CSSmembuat render tidak seperti yang saya maksudkan. Saya menemukan ini cara yang lebih sederhana.
V2 memungkinkan skalabilitas aplikasi Anda lebih mudah karena Anda dapat memecah aplikasi Anda lebih mudah daripada di v1. Saya suka pendekatan ini karena Anda dapat memiliki semua bagian Anda bekerja dalam satu file sebagai lawan memiliki beberapa di v1 sudut.
Bagaimana dengan mengonversi proyek Anda dari v1 ke v2?
Dari apa yang saya dengar dari tim pengembangan jika Anda ingin memperbarui proyek v1 Anda untuk v2 Anda hanya akan melalui dan menghapus gumpalan usang dan mengganti Anda $scopes dengan selectors. Saya menemukan video ini bermanfaat. Ini dengan beberapa tim Ionic yang bekerja berdampingan dengan tim sudut karena v2 memiliki fokus yang lebih kuat pada ponsel https://youtu.be/OZg4M_nWuIk Semoga ini bisa membantu.
UPDATE: Saya memperbarui dengan menambahkan contoh sebagai implementasi resmi Angular 2 telah muncul.
UPDATE 2: Ini sepertinya masih menjadi pertanyaan yang populer jadi saya hanya berpikir saya punya sumber daya yang saya temukan sangat membantu ketika saya mulai bekerja dengan angular 2.
Sumber Daya Bermanfaat:
Untuk lebih lanjut tentang ES6, saya sarankan untuk memeriksa Tutorial Fitur Baru ECMAScript 6 / ES6 The New Boston - Daftar Putar YouTube
Untuk menulis fungsi Scriptese dan melihat bagaimana mereka mengkompilasi ke Javascript memeriksa Playground bahasa Typext
Untuk melihat fungsi dengan fungsi rincian dari apa yang setara Angular 1 di Angular 2 lihat Angular.io - Cookbook -A1 A2 Referensi Cepat