AngularJS dan Angular 2: Perbandingan terperinci

Perbezaan utama antara AngularJS dan Angular 2

Artikel ini membandingkan perbezaan utama antara angularjs generasi pertama dan sudut 2. Jika anda sedang menggunakan projek AngularJS dan tidak pasti jika anda perlu berhijrah, artikel ini akan membantu anda memulakan. Dalam tahun-tahun kebelakangan ini, Angular telah berkembang pesat sebagai rangka kerja dan platform untuk membangunkan aplikasi tunggal halaman (SPA) dan aplikasi web progresif (PWA).

AngularJS adalah konsep pandangan bangunan berdasarkan pengaturcaraan deklaratif. Ini memerlukan operasi dom decoupling dari logik perniagaan aplikasi, yang mempunyai banyak manfaat dalam dirinya sendiri. Walau bagaimanapun, AngularJS mempunyai banyak kekurangan dari segi prestasi dan bagaimana ia berfungsi di bahagian bawah. Oleh itu, pasukan pembangunan menghabiskan setahun menulis semula kod dari awal dan mengeluarkan Angular 2 pada akhir 2016. Kebanyakan pemaju menganggap Angular 2 menjadi platform yang berbeza yang mempunyai sedikit persamaan dengan AngularJs asal. Mari kita bandingkan dan membandingkan AngularJS dan Angular 2.

Arkitek Rangka Kerja

AngularJS mengikuti seni bina tradisional MVC (model-view-controller), termasuk model, pandangan dan pengawal:

• pengawal: mengendalikan interaksi pengguna, model mengikat dan pandangan.
• Lihat: mewakili lapisan persembahan dan UI sebenar.
• Model: Perwakilan data abstrak.

Beberapa pemaju percaya bahawa AngularJs mengikuti corak MVVM dan menggantikan pengawal dengan model paparan. Model paparan adalah fungsi JavaScript yang serupa dengan pengawal. Apa yang menjadikannya istimewa ialah ia menyegerakkan data antara pandangan dan model. Perubahan yang dibuat kepada elemen UI secara automatik disebarkan kepada model dan sebaliknya. Angka berikut menunjukkan bagaimana pelbagai komponen AngularJS disambungkan bersama.

Angular mengamalkan seni bina berasaskan komponen. Setiap aplikasi sudut mempunyai sekurang -kurangnya satu komponen yang dipanggil komponen akar. Setiap komponen mempunyai kelas yang berkaitan yang mengendalikan logik perniagaan dan templat yang mewakili lapisan paparan. Komponen yang berkait rapat boleh disusun bersama -sama untuk membuat modul, setiap modul sendiri membentuk unit berfungsi.

Seperti yang anda lihat dalam angka itu, komponen terikat pada templat. Komponen disusun menggunakan kelas TypeScript dan lampirkan templat kepada mereka menggunakan anotasi @komponen. Perkhidmatan boleh disuntik ke dalam komponen menggunakan subsistem suntikan pergantungan Angular. Konsep modul dalam sudut sangat berbeza dari modul AngularJS. Ngmodule adalah bekas yang mentakrifkan unit berfungsi. Ngmodule boleh mengandungi komponen, perkhidmatan, dan fungsi lain. Unit modul kemudian boleh diimport dan digunakan dengan modul lain.

template

Dalam AngularJS, templat ditulis dalam HTML. Untuk menjadikannya dinamik, anda boleh menambah kod khusus AngularJS seperti sifat, tag, penapis, dan kawalan bentuk. Di samping itu, ia menyokong teknologi pengikat data dua hala yang disebutkan di atas. Coretan kod berikut menunjukkan penggunaan arahan dan pendakap berganda dalam templat:

<code class="language-html"><div ng-app>
  <div ng-controller="MyController">
    <input ng-model="foo" value="bar">
    <button ng-click="changeFoo()">{{buttonText}}</button>
  </div>
  
</div></code>

Dalam sudut, struktur template angularjs telah diperbaiki dan banyak ciri baru telah ditambah ke templat. Perbezaan utama ialah setiap komponen mempunyai templat yang dilampirkan. Semua elemen HTML berfungsi dalam templat kecuali <script></script>, <style></style>, <base>, dan <title></title>. Di samping itu, terdapat juga fungsi seperti mengikat templat, interpolasi templat, pernyataan templat, mengikat atribut, mengikat peristiwa dan mengikat dua hala. Arahan atribut terbina dalam (seperti NGCLASS, NGSTYLE, dan NGMODEL) dan arahan struktur terbina dalam (seperti NGIF, NGFOROF, NGSWITCH) juga merupakan sebahagian daripada templat.

Suntikan Ketergantungan

Suntikan ketergantungan adalah corak reka bentuk yang bertanggungjawab untuk memuaskan kebergantungan dan menyuntiknya ke dalam komponen apabila diperlukan. Ini mengelakkan keperluan untuk bergantung kepada kod hardcode ke dalam komponen. AngularJS mempunyai subsistem penyuntik yang bertanggungjawab untuk membuat komponen, menyuntik kebergantungan, dan menguraikan senarai semua kebergantungan. Komponen berikut boleh disuntik seperti yang diperlukan:

• nilai
• Kilang
• Perkhidmatan
• Pembekal
• berterusan

Perkhidmatan, arahan dan penapis boleh disuntik menggunakan kaedah kilang. Berikut adalah contoh kaedah kilang. Kaedah kilang didaftarkan dengan modul bernama MyModule:

<code class="language-javascript">angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
  // ...
}])
.directive('directiveName', ['depService', function(depService) {
  // ...
}])
.filter('filterName', ['depService', function(depService) {
  // ...
}]);</code>

Walaupun kaedah tetap sama, sudut mempunyai sistem suntikan ketergantungan baru yang berbeza daripada mod DI lama. Suntikan ketergantungan Angular diuruskan melalui pelbagai @ngmodule yang mengandungi penyedia dan pengisytiharan. Arahan pengisytiharan adalah ruang untuk mengisytiharkan komponen dan arahan. Ketergantungan dan perkhidmatan didaftarkan melalui pelbagai penyedia.

Katakan anda mempunyai perkhidmatan yang mengambil senarai kenalan yang dipanggil ContactListService dan menyediakannya kepada komponen ContactList. Anda perlu mendaftarkan ContactListService dalam array app.module.ts di providers. Seterusnya, anda perlu menyuntik perkhidmatan ke dalam komponen seperti berikut:

<code class="language-typescript">import { Component }   from '@angular/core';
import { Contact }        from './contact';
import { ContactListService } from './contactlist.service';

@Component({
  selector: 'app-contacts-list',
  template: `
    <div contact of contacts>
      {{contact.id}} - {{contact.name}} - {{contact.number}}
    </div>
  `
})
export class ContactListComponent {
  contacts: Contact[];

  constructor(contactlistService: ContactListService) {
    this.contacts = contactlistService.getcontacts();
  }
}</code>

di sini, kami memberitahu Angular untuk menyuntik perkhidmatan ke dalam pembina komponen.

JavaScript vs typescript

AngularJS adalah rangka kerja JavaScript tulen. Ini menjadikan keseluruhan proses persediaan projek lebih mudah. Mana -mana pemaju dengan beberapa pengalaman JavaScript asas boleh mula menggunakan rangka kerja. Oleh kerana itu, lengkung pembelajaran Angular 1.0 sangat lancar berbanding dengan kerangka depan yang lain.

Angular 2 memperkenalkan TypeScript sebagai bahasa lalai untuk membina aplikasi. TypeScript adalah superset sintaks JavaScript, disusun menjadi JavaScript biasa. Pasukan sudut memilih TypeScript melalui JavaScript kerana ciri anotasi jenis, yang membolehkan anda melakukan pemeriksaan jenis statik pilihan. Pemeriksaan jenis menghalang kesilapan masa kompilasi daripada menyelinap ke dalam kod anda yang mungkin diabaikan. Ini menjadikan kod JavaScript anda lebih diramalkan.

Di samping itu, TypeScript juga popular untuk kelas, antara muka, dan penghias (penghias kelas, penghias atribut dan penghias parameter). Angular menggunakan kelas TypeScript untuk menentukan komponen. @Component adalah contoh yang popular tentang cara melampirkan metadata kepada komponen menggunakan penghias kelas. Biasanya, ini termasuk butiran konfigurasi komponen seperti tag pemilih templat, templateurl, dan penyedia array supaya anda boleh menyuntik sebarang kebergantungan yang berkaitan ke dalam komponen:

<code class="language-html"><div ng-app>
  <div ng-controller="MyController">
    <input ng-model="foo" value="bar">
    <button ng-click="changeFoo()">{{buttonText}}</button>
  </div>
  
</div></code>

Sokongan Alat

Sokongan alat yang lebih baik membantu pemaju membina perkara lebih cepat dan menambahnya ke aliran kerja pembangunan keseluruhan. Sebagai contoh, antara muka baris arahan (CLI) dapat mengurangkan masa yang diperlukan untuk membuat aplikasi dari awal. Begitu juga, terdapat alat lain seperti IDE, editor teks, kit ujian, dan lain -lain yang dapat membantu anda membuat pembangunan lebih mudah.

AngularJS tidak mempunyai CLI rasmi, tetapi terdapat banyak penjana dan alat pihak ketiga yang tersedia. Untuk IDE, WebStorm dan Aptana adalah pilihan popular di kalangan pemaju. Jika anda seperti saya, anda boleh menyesuaikan editor teks biasa seperti editor teks submlime dan tambahkan plugin yang betul kepadanya. AngularJS mempunyai lanjutan penyemak imbas untuk debug dan ujian yang dipanggil NG-Inspector. Struktur AngularJS membolehkan akses kepada modul pihak ketiga. Anda boleh menemui semua modul NG yang popular di ngmodules.org, projek sumber terbuka untuk menganjurkan modul AngularJS.

Angular mempunyai lebih banyak sokongan alat daripada AngularJS. Terdapat CLI rasmi yang membolehkan anda memulakan projek baru, melayani mereka, dan membina pakej yang dioptimumkan untuk pengeluaran. Anda boleh membaca CLI sudut di GitHub untuk maklumat lanjut. Kerana sudut menggunakan TypeScript dan bukannya JavaScript, Visual Studio disokong sebagai IDE. Itu bukan semua. Terdapat juga banyak pemalam IDE dan alat mandiri yang dapat membantu anda mengautomasikan dan mempercepatkan aspek tertentu kitaran pembangunan anda. Augury untuk debugging, ngrev untuk analisis kod, codelyzer untuk pengesahan kod, dan lain -lain adalah semua alat yang sangat berguna.

Ringkasan

AngularJS mempunyai banyak kelemahan-kebanyakannya berkaitan dengan prestasi-tetapi ia digunakan untuk menjadi pilihan untuk prototaip pesat. Walau bagaimanapun, tidak masuk akal untuk kembali ke AngularJS sekarang atau mengekalkan projek AngularJS. Sekiranya anda belum berhijrah, anda harus mempertimbangkan untuk melakukannya.

Dalam artikel ini, kami memperkenalkan lima perbezaan utama antara AngularJS dan Angular 2. Hampir segala -galanya kecuali struktur templat dan kaedah suntikan ketergantungan telah diperbaiki. Banyak ciri -ciri Sudut 1.0 yang popular, seperti pengawal, skop, arahan, definisi modul, dan lain -lain, telah digantikan oleh alternatif lain. Di samping itu, bahasa asas telah diubah dan struktur telah diubahsuai.

AngularJS dan Soalan Lazim Angular (Soalan Lazim)

(bahagian Soalan Lazim ditinggalkan di bawah kerana terlalu lama dan tidak sepadan dengan keperluan pseudo-asal. Bahagian FAQ boleh disimpan secara pilihan atau disusun semula seperti yang diperlukan, dan pemprosesan pseudo-asal seperti sinonim diganti .)

Atas ialah kandungan terperinci AngularJS dan Angular 2: Perbandingan terperinci. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!