Rumah >hujung hadapan web >tutorial js >Meningkatkan aplikasi anda ke Sudut 1.5 komponen dan seterusnya!
Meningkatkan aplikasi anda ke Sudut 1.5 komponen dan seterusnya!
- Christopher Nolanasal
- 2025-02-18 11:37:10273semak imbas
Artikel ini dikaji semula oleh Dan Prince dan Michaela Lehr. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik boleh!
Dengan setiap pelepasan baru AngularJS, pasukan pembangunan cuba merapatkan jurang antara AngularJS 1.x dan 2. Dengan pembebasan AngularJS 1.5, pemaju akan dapat menulis aplikasi yang sama dengan AngularJS 2.0.Dalam tutorial ini, kami akan membuat arahan grid di AngularJS 1.4. Kami kemudian akan berjalan melalui langkah -langkah untuk menaik tarafnya menjadi 1.5, dan kemudian melihat bagaimana kami dapat menukarnya untuk bekerja dengan versi 2.0.
Takeaways Key
Mulakan dengan AngularJS 1.4: Mulailah dengan membuat arahan grid mudah di AngularJS 1.4 untuk memaparkan array JSON, menggunakan bootstrap untuk reka bentuk susun atur.
- Naik taraf ke AngularJS 1.5: Peralihan Arahan AngularJS 1.4 kepada 1.5 dengan menggantikan rujukan skrip dan menggunakan kaedah penolong arahan komponen baru, yang memudahkan konfigurasi dan bersiap sedia untuk peningkatan masa depan. Kelebihan Komponen dalam AngularJS 1.5: Komponen dalam AngularJS 1.5 menawarkan gula sintaksis ke atas arahan, menyediakan konfigurasi lalai dan pendekatan yang diselaraskan, yang bermanfaat untuk peralihan ke AngularJS 2.0.
- Peralihan ke AngularJS 2.0: Memahami keperluan bermula dari awal ketika berpindah ke AngularJS 2.0 kerana perbezaan seni bina dari versi 1.x, yang memerlukan perpustakaan tambahan dan persediaan baru.
- Gunakan komponen AngularJS 2.0: Melaksanakan komponen dalam AngularJS 2.0 menggunakan TypeScript, yang meningkatkan kebolehkerjaan dan kebolehlaksanaan kod, mengakui bahawa AngularJS 2.0 adalah berasaskan komponen dan menyokong ciri-ciri canggih seperti suntikan ketergantungan hierarki dan beban dinamik.
- Bermula
- mari kita mulakan dengan membuat direktori projek yang dipanggil AngularmigrateApp. Dalam folder ini, buat halaman HTML yang dipanggil Index.html. Inilah halaman yang sepatutnya kelihatan seperti:
Serta kerangka sudut, kami juga akan menggunakan bootstrap untuk merancang susun atur arahan kami. Kami termasuk kedua -dua fail ini langsung dari CDN.
Membuat arahan grid
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>Mari buat arahan grid mudah untuk memaparkan array JSON. Kami akan bermula dengan membuat modul AngularJS.
kami telah menentukan pekerja yang dipanggil tetap yang memegang pelbagai data contoh. Kami kemudian menyuntik array ini ke Homectrl, dan menjadikannya tersedia pada skop pengawal.
Mari buat arahan yang dipanggil MyGrid, yang akan kita gunakan untuk memaparkan array JSON di atas.
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span>
kami mahu menggunakan arahan melalui nama tag, seperti ini:
Jadi, kami akan menambah pilihan Had untuk menentukan bahawa:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span>
Seterusnya kami mahu lulus data pekerja dari pandangan ke arahan. Jadi, kami akan menambahnya sebagai pengikatan:
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span> </span>
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Sekarang kita akan dapat lulus data pekerja ke Arahan sebagai atribut:
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span>
Terakhir tetapi tidak kurang, kita memerlukan templat HTML untuk memaparkan data:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span>
tambahkan skrip template html berikut dalam badan index.html.
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span> </span>
seperti yang anda lihat dalam kod di atas, kami melelehkan harta maklumat dan memaparkan setiap item dalam senarai pekerja.
mari kita gunakan arahan MyGrid di dalam index.html. Tambahkan kod berikut:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E'
</span> <span>}
</span><span>})
</span>
kami telah menetapkan pengawal Homectrl dan di dalamnya menggunakan arahan kami. Simpan perubahan dan semak imbas ke halaman index.html. Berikut adalah demo grid data dalam tindakan:
Lihat pena AngularJS 1.4 demo oleh SitePoint (@SitePoint) pada codepen.
menaik taraf kepada 1.5
Setakat ini kami telah membuat arahan AngularJS menggunakan versi 1.4 dan ia berfungsi dengan baik. Sekarang, mari kita cuba menggunakan kod yang sama dengan AngularJS 1.5 dan lihat jika ada perkara yang pecah.
mari menggantikan rujukan skrip sedia ada dengan pautan CDN ke versi 1.5. Sekiranya anda mencuba menyegarkan halaman semuanya harus terus berfungsi dengan baik. Dengan pelepasan baris 1.x baru ini, rangka kerja semakin dekat dengan cara AngularJS 2.0 akan berfungsi, menggunakan komponen, dan kami dapat memanfaatkannya dalam kod kami yang membuat peralihan akhirnya ke versi 2.0 lebih mudah.
Dalam AngularJS 1.5, komponen adalah gula sintaks untuk arahan yang menjaga mungkir dan mempunyai konfigurasi yang lebih mudah. Mereka harus disukai sebagai pengganti, terutama bagi mereka yang ingin menaik taraf pada masa akan datang.
Apabila bekerja dengan AngularJS, pemaju umumnya cenderung untuk bekerja dengan pendekatan berasaskan pengawal, tetapi ini dapat menimbulkan banyak masalah ketika aplikasi mulai berkembang. Pendekatan berasaskan pengawal dan paparan membawa kepada NG-Controller/View yang berulang, tetapi pendekatan berasaskan komponen menyelesaikan masalah dengan membuat komponen yang boleh disusun menjadi komponen yang lebih besar tanpa mengulangi kod.
Mari cuba gunakan kaedah pembantu arahan komponen baru dan ubah suai kod sedia ada kami. Kami akan mulakan dengan membuat komponen:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E',
</span> <span>scope: {
</span> <span>info: '=info'
</span> <span>}
</span> <span>}
</span><span>})
</span>
Tidak seperti kaedah arahan - yang mengambil fungsi - kaedah komponen mengambil objek. Kami akan lulus objek yang sama yang kami ada dalam arahan kami dengan templat yang berbeza. Inilah templat HTML:
<span><span><span><my-grid</span> info<span>="employees"</span>></span><span><span></my-grid</span>></span> </span>
Berikut adalah kod komponen yang diubah suai:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E',
</span> <span>scope: {
</span> <span>info: '=info'
</span> <span>},
</span> <span>templateUrl : '/directiveGrid.html'
</span> <span>}
</span><span>})
</span>
Seperti yang dilihat dalam kod di atas, kami telah meluluskan semua pilihan yang kami ada dalam arahan lama kami.
Buat komponen yang dipanggil myComp dalam halaman index.html.
<span><span><span><script</span> type<span>="text/ng-template"</span> id<span>="/directiveGrid.html"</span>></span><span>
</span></span><span><span> <span><div class="panel panel-primary">
</span></span></span><span><span> <span><div class="panel-heading">Site Point Directive Grid</div>
</span></span></span><span><span> <span><table class="table">
</span></span></span><span><span> <span><thead>
</span></span></span><span><span> <span><tr>
</span></span></span><span><span> <span><th>FirstName</th>
</span></span></span><span><span> <span><th>Last Name</th>
</span></span></span><span><span> <span><th>Location</th>
</span></span></span><span><span> <span></tr>
</span></span></span><span><span> <span></thead>
</span></span></span><span><span> <span><tbody>
</span></span></span><span><span> <span><tr ng-repeat="employee in info">
</span></span></span><span><span> <span><td>{{ employee.firstName }}</td>
</span></span></span><span><span> <span><td>{{ employee.lastName }}</td>
</span></span></span><span><span> <span><td>{{ employee.location }}</td>
</span></span></span><span><span> <span></tr>
</span></span></span><span><span> <span></tbody>
</span></span></span><span><span> <span></table>
</span></span></span><span><span> <span></div>
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
simpan perubahan dan menyegarkan halaman dan anda harus dapat melihat bahawa data tidak dipaparkan tetapi tidak ada kesilapan dalam konsol penyemak imbas sama ada.
Jika kita melihat carta perbandingan antara komponen dan arahan dari laman web rasmi, kita dapat melihat bahawa skop sentiasa mengasingkan dalam komponen.
inilah kod yang diubah suai:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>Maklumat mengikat akan terikat kepada pengawal. Alias lalai untuk pengawal adalah $ ctrl dan di dalam templat kami akan menggunakannya untuk mengakses harta info:
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span> Sekarang jika anda menyegarkan semula halaman, anda sepatutnya dapat melihat data yang dipaparkan menggunakan komponen MyComp. Lihat pena angularjs 1.5 demo oleh sitepoint (@sitePoint) pada codepen.
menaik taraf ke 2.0
Nota: AngularJS 2.0 masih dalam beta. Versi yang kami gunakan ialah Angular2.0.0-beta.8.
mari menggantikan versi AngularJS yang ada dalam aplikasi kami dengan pautan ke versi 2.0 dari CDN dan lihat jika ada yang pecah:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span> selepas menyegarkan halaman tidak ada yang muncul di halaman dan jika kita menyemak konsol penyemak imbas kita dapat melihat beberapa kesilapan juga.
Seperti yang anda lihat, kod komponen kami tidak berfungsi dengan baik dengan Angular 2.0!
mari kita mulakan dari awal dan lihat bagaimana versi baru berfungsi, maka kami akan cuba untuk memasuki komponen kami.
sedangkan mungkin untuk memulakan dengan Angular 1.x dengan memasukkan rangka kerja dengan tag skrip tunggal, keadaan dengan Angular 2.0 telah berubah. Kami memerlukan beberapa perpustakaan lain untuk berfungsi. Semasa memuatkan ini secara berasingan melalui tag skrip adalah OK untuk pembangunan, mereka bertujuan untuk dibundel sebagai sebahagian daripada proses membina untuk pengeluaran.
Jika kita melihat panduan permulaan cepat rasmi, kita dapat melihat bahawa kita memerlukan beberapa perpustakaan dan kebergantungan pembangunan lain untuk memulakan dengan 2.0.
mari kita buat folder yang dipanggil AngularJS2.0ponent dan buat fail pakej.json seperti berikut:
Fail di atas menunjukkan semua kebergantungan yang diperlukan oleh aplikasi AngularJS 2.0. Simpan perubahan dan pasang kebergantungan yang diperlukan menggunakan NPM:
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span> </span>
Buat folder sub yang dipanggil aplikasi dan di dalam membuat fail yang dipanggil app.component.js dengan kod berikut:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E'
</span> <span>}
</span><span>})
</span>
Dalam kod di atas, kami menggunakan ruang nama teras sudut ng.core untuk membuat komponen. Kami telah menentukan pemilih untuk komponen kami sebagai my-comp. Kami menggunakan HTML, Grid.html yang sama, sebagai templat untuk aplikasi kami. Kami telah menentukan objek pekerja kami dalam pembina komponen.
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E',
</span> <span>scope: {
</span> <span>info: '=info'
</span> <span>}
</span> <span>}
</span><span>})
</span>
Buat fail yang dipanggil main.js dan tampal dalam kod berikut:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Ini memberitahu Angular untuk memuatkan komponen yang baru saja kita buat.
Seterusnya, buat fail yang dipanggil index.html di luar folder aplikasi, dan tampal dalam kod berikut:
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span>
Halaman index.html di atas adalah template starter untuk aplikasi AngularJS 2.0. Kami telah memasukkan semua kebergantungan yang diperlukan, dan dalam tag badan kami telah menggunakan komponen kami.
Simpan perubahan dan mulakan pelayan menggunakan NPM Mula. Perintah ini menjalankan pelayan pembangunan tempatan yang dipanggil Lite-Server yang memuat index.html dalam penyemak imbas.
tetapi masih data tidak muncul!
Dalam AngularJS 2.0 Sintaks untuk gelung agak berbeza. Ubah suai bahagian gelung dalam grid.html seperti yang ditunjukkan di bawah:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span>
simpan perubahan dan mulakan semula pelayan dan anda harus dapat melihat data pekerja yang dipaparkan dalam aplikasi.
membungkusnya
Komponen adalah sebahagian besar daripada AngularJS 2.0 dan ia adalah tepat untuk mengatakan ia adalah rangka kerja berasaskan komponen. Dengan setiap pelepasan baru baris 1.x, kami bergerak lebih dekat dengan bagaimana aplikasi dibangunkan menggunakan versi 2.0.
Dalam tutorial ini, kami mencipta arahan AngularJS menggunakan Verison 1.4 rangka kerja. Kami refactored arahan untuk memanfaatkan sintaks komponen versi 1.5. Akhirnya, kami menaik tarafnya untuk bekerja dengan versi sudut 2.0.
Untuk melihat lebih mendalam mengenai memindahkan aplikasi AngularJS anda, pertimbangkan untuk membaca panduan penghijrahan rasmi. Kod Angular 2 juga boleh ditulis dalam TypeScript dan Dart, dan jika anda berminat, saya akan mengesyorkan membaca panduan rasmi untuk memulakan dengan AngularJS 2 dalam Typescript atau Dart masing -masing.
Kongsi pendapat dan cadangan anda dalam komen di bawah!Soalan Lazim (Soalan Lazim) Mengenai Peningkatan ke Komponen Angular
Apakah perbezaan utama antara AngularJs dan Angular? Angular adalah penulisan semula lengkap dari pasukan yang sama yang membina AngularJS. Perbezaan utama termasuk bahasa, seni bina, sintaks ekspresi, sokongan mudah alih, dan penghalaan. Angular menggunakan typescript, yang lebih padat dan lebih cepat daripada JavaScript yang digunakan dalam AngularJS. Angular mempunyai suntikan pergantungan hierarki, pemuatan dinamik, dan kompilasi template asynchronous, yang menjadikannya lebih efisien.
Kenapa saya harus menaik taraf dari AngularJS ke Angular? Angular mempunyai prestasi yang lebih baik kerana suntikan pergantungan hierarki dan seni bina berasaskan komponen. Ia juga menyokong peranti mudah alih, tidak seperti AngularJS. Angular menggunakan typescript, yang menyediakan menaip statik, antara muka, dan kelas, menjadikan kod lebih banyak dipelihara dan boleh diuji. Angular juga telah meningkatkan suntikan ketergantungan, modulariti, dan kesesuaian. Pertama, anda perlu menyediakan aplikasi AngularJS anda untuk penghijrahan dengan mengikuti Panduan Gaya AngularJS, mengatur kod anda ke dalam struktur komponen, dan menggunakan loader modul. Kemudian, anda boleh memulakan proses penghijrahan dengan bootstrapping sudut ke dalam aplikasi anda, mewujudkan komponen sudut untuk komponen AngularJS anda, dan memindahkan perkhidmatan anda. Akhirnya, anda boleh mengeluarkan AngularJs dari aplikasi anda. , bahasa, dan sintaks. Anda mungkin menghadapi masalah dengan memindahkan kod AngularJS anda ke TypeScript, menyesuaikan diri dengan seni bina berasaskan komponen baru, dan mempelajari sintaks baru untuk ekspresi. Anda juga mungkin perlu menulis semula konfigurasi penghalaan anda dan menyesuaikan proses binaan anda untuk mengendalikan jenis -jenis. bersama -sama dalam permohonan yang sama semasa proses penghijrahan. Ini dikenali sebagai aplikasi hibrid. Anda boleh bootstrap kedua -dua sudut dan sudut dalam aplikasi anda, dan mereka boleh wujud bersama dan berinteraksi antara satu sama lain. Ini membolehkan anda memindahkan aplikasi anda secara bertahap, komponen oleh komponen, bukannya melakukan penulisan semula lengkap. Menyusun kepada JavaScript biasa. Dalam Angular, TypeScript menyediakan menaip statik, antara muka, dan kelas, yang menjadikan kod itu lebih dapat dipelihara dan boleh diuji. TypeScript juga menyediakan alat yang lebih baik dengan autocompletion, pemeriksaan jenis, dan sokongan peta sumber, yang meningkatkan pengalaman pembangunan. Senibina dalam sudut meningkatkan prestasi dengan membolehkan aliran data unidirectional dan pengesanan perubahan. Setiap komponen dalam sudut mempunyai antara muka yang jelas dan merangkumi tingkah laku dan renderingnya sendiri. Ini menjadikan aplikasi lebih mudah difahami, menguji, dan mengekalkan. Aliran data unidirectional memastikan bahawa pandangan sentiasa menjadi unjuran model, yang memudahkan model pengaturcaraan dan meningkatkan prestasi.
Bagaimana Peranti Mudah Alih Sokongan Sudut? Ia juga menyediakan pengoptimuman prestasi untuk peranti mudah alih, seperti pemuatan malas dan kompilasi template asynchronous. Angular juga menyokong aplikasi web progresif (PWAS), yang boleh dipasang pada peranti mudah alih dan berfungsi di luar talian.
Bagaimana saya boleh menguji aplikasi sudut saya? membolehkan anda membuat persekitaran ujian dinamik untuk komponen anda. Anda juga boleh menggunakan Jasmine, rangka kerja pembangunan yang didorong oleh tingkah laku untuk menguji kod JavaScript, dan Karma, pelari ujian. Angular juga menyokong ujian end-to-end dengan protractor.
sumber apa yang tersedia untuk pembelajaran sudut? buku, dan kursus. Komuniti sudut juga sangat aktif dan menyokong, dengan banyak forum, blog, dan soalan stackoverflow yang tersedia untuk rujukan.
Atas ialah kandungan terperinci Meningkatkan aplikasi anda ke Sudut 1.5 komponen dan seterusnya!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional