Beberapa bulan yang lalu, saya memutuskan untuk belajar Angular. Ketika saya melakukan beberapa kemajuan dan membuat beberapa aplikasi menggunakannya, saya menyadari bahwa Angular 2 ada dalam pratinjau Pengembang, jadi tinggal menunggu waktu sebelum akan dirilis. Karena Angular 2 tidak akan kompatibel dengan Angular 1, dan ada banyak perubahan, pertanyaannya adalah, apakah lebih baik untuk terus berkembang dengan Angular 1.x atau mulai mengembangkan Angular 2?

Itu fakta bahwa kita tidak selalu harus menggunakan versi terbaru atau bahasa terbaru di pasaran, tetapi dalam kasus ini, aplikasinya masih kecil sehingga saya bisa berubah tanpa masalah.

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+.

1. 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

2. 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.

3. 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.

4. 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

Mungkin membantu Anda untuk memahami perbandingan Angular 1 vs Angular 2.

The Angular 2 terbukti memiliki banyak manfaat dibandingkan Angular 1:

• Ini sepenuhnya berbasis komponen.
• Deteksi perubahan yang lebih baik
• Kompilasi Ahead of Time (AOT) meningkatkan kecepatan rendering.
• TypeScript terutama digunakan untuk mengembangkan aplikasi Angular 2.
• Angular 2 memiliki kinerja yang lebih baik daripada Angular 1.
• Angular 2 memiliki sistem templating yang lebih kuat daripada Angular 1.
• Angular 2 memiliki API yang lebih sederhana, pemuatan malas, debugging lebih mudah.
• Angular 2 jauh lebih mudah diuji daripada Angular 1.
• Angular 2 menyediakan komponen bersarang.
• Angular 2 menyediakan cara untuk mengeksekusi lebih dari dua sistem secara bersamaan.
• Dan seterusnya...

Angular 2 dan Angular 1 pada dasarnya adalah kerangka kerja yang berbeda dengan nama yang sama.

angular 2 lebih siap untuk kondisi standar web saat ini dan status web di masa mendatang (ES6 \ 7, imutiablity, komponen, shadow DOM, pekerja layanan, kompatibilitas seluler, modul, naskah dan sebagainya dan seterusnya ...)

sudut 2 membunuh banyak fitur utama di sudut 1 seperti - pengendali, $ lingkup, arahan (diganti dengan @component annotations), definisi modul, dan banyak lagi, bahkan hal-hal sederhana seperti ng-repeat tidak tetap sama seperti sebelumnya.

Bagaimanapun, perubahan itu baik, sudut 1.x sudah ada kekurangannya, dan sudut 2 lebih siap untuk persyaratan web di masa depan.

Singkatnya - saya tidak menyarankan Anda untuk memulai proyek sudut 1.x sekarang - ini mungkin waktu terburuk untuk melakukannya karena Anda harus bermigrasi nanti ke sudut 2, saya menetapkan pikiran tentang sudut daripada memilih sudut 2, google telah meluncurkan proyek dengan sudut 2, dan pada saat Anda menyelesaikan proyek sudut 2 sudah harus dalam sorotan. jika Anda menginginkan sesuatu yang lebih stabil, Anda dapat berpikir tentang react \ elm dan flux dan redux sebagai framework JS.

sudut 2 akan menjadi luar biasa, itu tidak diragukan lagi.

Tidak ada kerangka yang sempurna. Anda dapat membaca tentang kelemahan dalam Angular 1 di sini dan di sini . Tapi itu tidak berarti itu buruk. Pertanyaannya adalah masalah apa yang Anda selesaikan. Jika Anda ingin meluncurkan aplikasi sederhana dengan cepat, yang ringan, dengan penggunaan pengikatan data yang terbatas, maka lanjutkan dengan Angular 1. Angular 1 dibangun 6 tahun yang lalu untuk menyelesaikan pembuatan prototipe cepat yang berfungsi cukup baik. Bahkan jika use case Anda masih kompleks, Anda dapat menggunakan Angular 1 tetapi Anda harus menyadari nuansa dan praktik terbaik dalam membangun aplikasi web yang kompleks. Jika Anda mengembangkan aplikasi untuk tujuan belajar, saya sarankan untuk pindah ke Angular 2 karena di situlah masa depan Angular.

Satu-satunya fitur yang menonjol di Angular v2 dan juga di ReactJs adalah mereka berdua telah memeluk arsitektur pengembangan Web-Components yang baru. Apa artinya ini adalah bahwa kita sekarang dapat membuat Komponen Web independen dan plug-and-play mereka ke situs web mana pun di dunia yang memiliki tumpukan teknologi yang sama dari Komponen Web ini. Keren! ya sangat keren. :)

Perubahan lain yang paling menonjol dalam Angular v2 adalah bahasa pengembangan primernya tidak lain adalah TypeScript. Meskipun TypeScript milik Microsoft, dan merupakan superset dari JavaScript 2015 (atau ECMAScript6 / ES6), tetapi memiliki beberapa fitur yang sangat menjanjikan. Saya akan merekomendasikan pembaca untuk checkout TypeScript dengan sedikit detail (yang tentu saja menyenangkan) setelah membaca tutorial ini.

Di sini saya akan mengatakan bahwa orang-orang yang mencoba untuk menghubungkan Angular v1 dan Angular v2 lebih lanjut membingungkan pembaca, dan menurut pendapat saya yang sederhana, Angular v1 dan Angular v2 harus diperlakukan sebagai dua kerangka kerja yang berbeda. Di Angular v2, kami memiliki konsep Web-Components untuk mengembangkan aplikasi web, sementara di Angular v1 kami harus bermain dengan Controllers, dan (sayangnya atau untungnya) tidak ada pengendali yang hadir di Angular v2.

Satu hal yang perlu diperhatikan adalah angular2 menggunakan naskah.

Saya melakukan angular1 dengan cordova di magang saya dan sekarang saya melakukan angular 2. Saya pikir angular2 akan menjadi tren karena lebih terstruktur dalam pendapat saya tetapi kekurangannya adalah ada beberapa sumber daya untuk merujuk ketika Anda memiliki masalah atau kesulitan. angular 1.x memiliki banyak arahan khusus yang dapat digunakan dengan sangat mudah.

Semoga ini bisa membantu.

Angular 2 jauh lebih baik daripada 1, setidaknya dalam apa yang ditawarkannya: dukungan untuk komponen web, menggunakan naskah, kinerja, dan kesederhanaan antarmuka secara keseluruhan, adalah alasan saya memutuskan untuk memulai sebuah proyek menggunakan sudut 2. Namun, dari awal , Saya menyadari ada masalah dalam sudut 2 (misalnya routing dengan apache) yang sangat sedikit atau tidak ada dokumentasi tersedia, sehingga dokumentasi dan komunitas sudut 2 adalah perangkap terbesar untuk sudut 2, karena tidak cukup berkembang.

Saya akan mengatakan, jika Anda perlu menaikkan situs dengan cepat untuk tenggat waktu yang singkat, gunakan sudut 1 yang terkenal, jika Anda berada dalam proyek yang lebih lama, dan dapat memberikan waktu untuk menyelidiki masalah baru (bahwa Anda mungkin menjadi orang pertama yang ditemui) , yang bisa menjadi bonus jika Anda memikirkan kontribusi, Anda dapat memberikan kepada komunitas sudut 2) daripada pergi dengan sudut 2.