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!
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>
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>
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>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>
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1659
14
1416
52
1310
25
1258
29
1233
24
Demystifying JavaScript: Apa yang berlaku dan mengapa penting
Apr 09, 2025 am 12:07 AM
JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan
Apr 10, 2025 am 09:33 AM
Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Enjin JavaScript: Membandingkan Pelaksanaan
Apr 13, 2025 am 12:05 AM
Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.
JavaScript: meneroka serba boleh bahasa web
Apr 11, 2025 am 12:01 AM
JavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.
Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)
Apr 11, 2025 am 08:22 AM
Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan
Python vs JavaScript: Keluk Pembelajaran dan Kemudahan Penggunaan
Apr 16, 2025 am 12:12 AM
Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.
Dari C/C ke JavaScript: Bagaimana semuanya berfungsi
Apr 14, 2025 am 12:05 AM
Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.
Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)
Apr 11, 2025 am 08:23 AM
Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing
