mata utama
npm install -g @angular/cli@latest
HttpModule
untuk mengambil kesempatan daripada pemprosesan dan sokongan JSON automatik HTTPClient baru untuk pemintas HTTP. HttpClientModule
rxjs/operators
untuk menggunakan pengendali pipetable RXJS. .pipe()
Selepas ng serve
dalam elemen APP-Root. ng-version
Artikel ini adalah Bahagian 6 dari Tutorial SitePoint Angular 2, yang menggambarkan cara membuat aplikasi CRUD menggunakan CLI sudut.
Dalam Bahagian 2, kita mengkaji seni bina komponen yang lebih modular dan belajar bagaimana untuk memecahkan komponen tunggal ini ke dalam pokok komponen yang berstruktur dan lebih kecil yang lebih mudah difahami, digunakan semula, dan mengekalkan.
Dalam Bahagian 3, kami mengemas kini permohonan untuk berkomunikasi dengan backend API REST menggunakan perkhidmatan HTTP RXJS dan Angular.
Dalam Bahagian 4, kami memperkenalkan penghala sudut dan belajar bagaimana router mengemas kini aplikasi kami apabila URL pelayar berubah, dan bagaimana kami menggunakan penghala untuk menghuraikan data dari API Backend.
Dalam Bahagian 5, kami menambah pengesahan kepada aplikasi dan belajar bagaimana untuk melindungi pelbagai bahagian aplikasi dari akses yang tidak dibenarkan.
Jangan risau! Anda tidak perlu mengikuti bahagian 1, 2, 3, 4, atau 5 tutorial ini untuk memahami Bahagian 6. Anda hanya boleh mengambil salinan asas kod kami, lihat kod untuk Bahagian 5, dan gunakannya sebagai titik permulaan. Ini akan dijelaskan dengan lebih terperinci di bawah.
Untuk mula mengemas kini sasaran Angular, pastikan versi terkini CLI sudut dipasang. Jika tidak, anda boleh memasangnya dengan arahan berikut:
npm install -g @angular/cli@latest
Jika anda perlu memadamkan versi CLI sudut sebelumnya, anda boleh:
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest
, anda memerlukan salinan kod untuk Bahagian 5. Ini boleh didapati di GitHub. Setiap jawatan dalam siri ini mempunyai tag yang sepadan dalam repositori, jadi anda boleh bertukar -tukar antara negeri -negeri yang berbeza dari aplikasi ini.
Kod yang kami gunakan pada akhir Bahagian 5, dan kod yang kami mulakan dalam artikel ini, ditandakan bahagian 5. Kod yang kami gunakan untuk mengakhiri artikel ini ditandakan bahagian 6.
Anda boleh merawat tag sebagai alias untuk ID komit tertentu. Anda boleh bertukar di antara mereka menggunakan Git Checkout. Anda boleh membaca lebih lanjut mengenainya di sini.
Jadi, untuk bangun dan berjalan (pasang versi terkini sudut CLI), kami akan melakukan perkara berikut:
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
kemudian lawati https://www.php.cn/link/d111f133fa0ea545d48291f9b0a72b2d aplikasi todo.
Dalam artikel ini, apabila kita mengemas kini Angular, kita akan mempelajari perkara berikut:
Pada akhir artikel ini, anda akan belajar tentang:
mari kita mulakan!
Untuk menyokong ekosistem yang berkembang maju, Angular perlu stabil dan berkembang.
Di satu pihak, Angular direka untuk menyediakan kestabilan maksimum untuk aplikasi misi kritikal. Sebaliknya, ia perlu disesuaikan dan berkembang untuk menyokong perubahan terkini dalam teknologi web.
Oleh itu, pasukan sudut memutuskan untuk menggunakan kitaran pelepasan berasaskan masa dan versi semantik.Kitaran pelepasan berasaskan masa bermakna kita boleh mengharapkan versi sudut baru (sudut 5, sudut 6, sudut 7, dan lain-lain) untuk muncul setiap beberapa minggu atau bulan.
Versi semantik bermakna nombor versi Angular membolehkan kami meramalkan sama ada ia akan memecahkan aplikasi kami jika kami menaik tarafnya.
Pada dasarnya, versi semantik kelihatan seperti ini: versi utama.
Oleh itu, nilai versi utama versi v1.3.8 adalah 1, nilai versi sekunder adalah 3, dan nilai semakan ialah 1.
Apabila versi baru dikeluarkan, versi baru secara tersirat menunjukkan jenis perubahan yang dibuat kepada kod.
Apabila menambah versi semantik, peraturan berikut digunakan:
Setiap kenaikan akan meningkat berangka dalam kenaikan 1.
versi yang disemak akan ditambah apabila menetapkan kesilapan dan kod tetap bersesuaian ke belakang:
npm install -g @angular/cli@latest
Apabila menambah ciri dan kod tetap bersesuaian ke belakang, subversi akan ditambah dan semakan akan ditetapkan semula kepada sifar:
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest
Apabila melaksanakan perubahan yang menyebabkan kod menjadi tidak serasi (juga dikenali sebagai perubahan utama), versi utama ditambah dan versi kecil dan semakan semula menjadi sifar:
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
Jika anda tidak biasa dengan versi semantik, pastikan anda menyemak panduan versi semantik mudah ini.
Pasukan sudut menggabungkan versi semantik dengan kitaran pelepasan berasaskan masa, bertujuan untuk:
Pelan pelepasan tidak ditetapkan dalam batu, kerana mungkin terdapat cuti atau acara khas, tetapi ia adalah petunjuk yang baik tentang apa yang dapat kita harapkan.
Anda boleh mengikuti blog sudut rasmi dan log perubahan rasmi untuk terus dikemaskini dengan perkembangan terkini.
Manfaat besar versi semantik adalah bahawa kami dapat mengemas kini aplikasi sudut dengan semakan atau subversi tanpa perlu risau tentang melanggar aplikasi kami.
Tetapi apa yang berlaku jika versi utama baru muncul?
Satu cara ialah membaca log perubahan rasmi dan melihat senarai perubahan.
Cara yang lebih mudah ialah menggunakan panduan kemas kini sudut untuk mengemas kini Angular. Anda boleh memilih versi sudut semasa dan versi yang anda ingin naikkan, dan aplikasi akan memberitahu anda langkah -langkah yang tepat yang perlu anda ambil:
Untuk aplikasi Todo sudut kami, kami ingin menaik taraf dari sudut 4.0 ke sudut 5.0.
mari kita pilih tahap kerumitan aplikasi
majusupaya kita melihat semua langkah yang mungkin kita perlu ambil:
kami telah memperoleh gambaran lengkap tentang semua langkah yang perlu kami ambil untuk mengemas kini permohonan kami.
sebelum kemas kini
Dalam senarai Kemas Kini , hanya item terakhir yang digunakan untuk permohonan kami. Kita perlu mengemas kini kebergantungan kita, jadi mari kita jalankan perintah yang dicadangkan dalam akar projek:
npm install -g @angular/cli@latest
Kerana kami mengemas kini CLI sudut ke versi terkini di bahagian Up and Running , kami juga mengemas kini versi tempatan kami:
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest
Untuk mengesahkan bahawa aplikasi kami berjalan dengan betul, kami menjalankan:
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
Jika ng serve
gagal untuk memulakan, cubalah memadam direktori node_modules
anda dan package-lock.json
fail dan kemudian jalankan npm install
untuk mencipta semula direktori node_modules
yang bersih dan package-lock.json
fail.
selepas senarai kemas kini mengandungi empat item, yang pertama dan terakhir memohon kepada aplikasi kami:
mari kita selesaikan satu demi satu.
Panduan Kemas Kini Sudut memberitahu kita bahawa kita harus beralih dari httpmodule ke httpclientmodule.
Jika kita menyemak nota pelepasan untuk versi sudut 5.0.0, kita akan mengetahui bahawa sudut 4.3 dan kemudian dilengkapi dengan HTTPClient baru yang secara automatik mengendalikan respons JSON dan menyokong pemintas HTTP.
Ia menyatakan bahawa untuk mengemas kini kod kami, kami mesti menggantikan httpmodule dengan httpclientmodule, menyuntik perkhidmatan httpclient dan memadam semua panggilan map(res => res.json())
, kerana httpclient baru secara automatik menghidupkan respons JSON.
mari kita buka src/app/app.module.ts
dan ganti httpmodule:
<code> v0.0.3 // 修复错误前 v0.0.4 // 修复错误后</code>
menggunakan httpclientmodule:
<code> v0.2.4 // 添加新功能前 v0.3.0 // 添加新功能后</code>
Seterusnya, kita perlu menggunakan perkhidmatan HTTPClient dan bukannya perkhidmatan HTTP dan memadam semua map(res => res.json())
panggilan dalam kod, kerana HTTPClient baru akan secara automatik menghuraikan respons untuk kami.
Dalam Bahagian 3, kami menumpukan semua kod yang berkaitan dengan HTTP dalam perkhidmatan yang dipanggil Apiservice, dan kami kini menikmati manfaat pendekatan ini.
jadi kita hanya perlu mengemas kini satu fail, jadi mari kita buka src/app/api.service.ts
dan ganti:
<code> v7.3.5 // 实现向后不兼容的更改前 v8.0.0 // 实现向后不兼容的更改后</code>
Penggunaan:
$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2' $ npm install typescript@2.4.2 --save-exact
Kami menggantikan kelas lama dalam httpmodule dengan kelas baru dalam httpclientmodule.
lebih khusus, kami menggantikan:
import { Http, Headers, RequestOptions, Response } from '@angular/http';
untuk import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
Response
untuk HttpErrorResponse
Headers
untuk HttpHeaders
return new RequestOptions({ headers });
untuk return { headers };
jika kita berlari:
npm install -g @angular/cli@latest
dan navigasi penyemak imbas ke https://www.php.cn/link/03e03424a898e574153a10db9a4db79a httpclientmodule.
Sudah tiba masanya untuk menyelesaikan Projek 2: mengimport pengendali RXJS dari RXJS/pengendali dan menggunakan pengendali saluran paip RXJS.
Angular 5 telah dikemas kini untuk menggunakan RXJS 5.5.2 atau lebih baru.
Bermula dengan versi 5.5, RXJS dilengkapi dengan pengendali yang boleh dipasang. Dokumen rasmi mengatakan:
Operator Pipase adalah sebarang fungsi yang mengembalikan fungsi dengan tandatangan berikut:
<T, R>(source: Observable<T>) => Observable<R>
...
anda mengekstrak mana -mana pengendali yang diperlukan dari kedudukan (di bawah
rxjs/operators
(jamak!). Ia juga disyorkan untuk mengekstrak kaedah penciptaan yang dapat dilihat secara langsung, seperti yang ditunjukkan di bawah, skop penggunaan:
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latestSalin selepas log masukSalin selepas log masukSalin selepas log masukSalin selepas log masuk
Walaupun ini terdengar rumit, ia pada dasarnya bermakna di mana kita menggunakan kaedah dirantai sebelum:
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
sekarang kita harus mengimport pengendali dari rxjs/operators
dan memohon mereka menggunakan kaedah .pipe()
:
<code> v0.0.3 // 修复错误前 v0.0.4 // 修复错误后</code>
Manfaat utama pengendali yang boleh dipasang ialah:
.pipe()
meminimumkan kesan ke atas kod kami.
Terdapat dua projek dalam permohonan kami yang perlu ditakrifkan: Apiservice dan Todoscomponent kami.
Pertama, mari kita buka src/app/api.service.ts
untuk mengemas kini apiservice kami:
<code> v0.2.4 // 添加新功能前 v0.3.0 // 添加新功能后</code>
Kami mengimport pengendali pipetable rxjs/operators
dari map
dan mengemas kini semua kejadian map(fn)
ke pipe(map(fn))
.
Seterusnya, mari kita buka src/app/todos/todos.component.ts
untuk menggunakan perubahan yang sama pada todoskompon:
<code> v7.3.5 // 实现向后不兼容的更改前 v8.0.0 // 实现向后不兼容的更改后</code>
Begitu juga, kami mengimport pengendali pipetable rxjs/operators
dari map
dan mengemas kini map(fn)
ke pipe(map(fn))
.
itu sahaja! Pengendali rantaian dalam aplikasi kami telah digantikan oleh pengendali yang boleh dipasang, sama seperti panduan kemas kini sudut mengarahkan kami untuk melakukannya.
Jika kita menavigasi ke https://www.php.cn/link/668c7d9d4728fc9eebbe7a8202c95c26 .
Untuk mengesahkan bahawa kita memang menjalankan Angular 5, kita boleh membuka pemeriksa elemen:
ke ng-version
dengan nilai versi yang sedang dijalankan. Kami melihat app-root
, menunjukkan bahawa kita sedang menjalankan Angular 5.2.9. ng-version="5.2.9"
kita banyak meliputi, jadi mari kita semak apa yang telah kita pelajari.
Ringkasan
Dalam artikel ini tentang cara mengemas kini Angular, kami belajar:
ng-version
Properties Marilah kita mengesahkan versi sudut yang kita jalankan. Dalam pelepasan yang akan datang, CLI sudut akan memperkenalkan arahan ng update
untuk membantu mengemas kini aplikasi sudut. Sekali lagi butiran tersedia, kami akan menyediakan artikel susulan tentang bagaimana arahan baru ini dapat menjadikan kehidupan kita lebih mudah.
Sebelum ini, anda boleh menggunakan artikel ini sebagai panduan mengenai cara mengemas kini aplikasi sudut ke versi terkini.
Semua kod dalam artikel ini boleh didapati di GitHub.
Saya doakan yang terbaik!
Sebelum anda mula mengemas kini projek sudut anda, pastikan versi terkini Node.js dan NPM dipasang. Anda boleh menyemak versi anda dengan menjalankan node -v
dan npm -v
di terminal. Jika anda tidak memasangnya, atau versi anda tamat tempoh, sila lawati laman web rasmi Node.js untuk memuat turun dan memasangnya. Juga, pastikan CLI sudut anda adalah versi terkini. Anda boleh mengemas kini dengan menjalankan npm install -g @angular/cli
di terminal.
Untuk mengemas kini projek sudut anda ke versi tertentu, anda boleh menggunakan arahan ng update
diikuti dengan nama pakej dan nombor versi. Sebagai contoh, jika anda ingin mengemas kini ke Angular 9, anda akan menjalankan ng update @angular/core@9 @angular/cli@9
di terminal anda. Ingatlah untuk mengemukakan sebarang perubahan kepada projek sebelum menjalankan arahan kemas kini untuk mengelakkan kehilangan kerja.
Jika anda menghadapi ralat semasa proses kemas kini, cuba memahami mesej ralat terlebih dahulu. Ia biasanya mengandungi petunjuk tentang di mana ia salah. Jika anda tidak dapat menyelesaikan masalah ini, pertimbangkan untuk mendapatkan bantuan daripada komuniti sudut. Terdapat banyak pemaju berpengalaman di laman web seperti StackOverflow yang dapat membantu anda menyelesaikan masalah. Ingatlah untuk memberikan banyak perincian tentang masalah anda, termasuk mesej ralat dan langkah yang anda ambil sebelum anda menghadapi ralat.
Menurunkan projek sudut ke versi terdahulu boleh menjadi agak rumit, kerana biasanya lebih daripada sekadar menukar nombor versi dalam fail package.json
. Anda juga mungkin perlu menurunkan kebergantungan lain dan tweak kod anda untuk menjadikannya serasi dengan versi yang lebih lama. Sekiranya anda memerlukan penurunan, pertimbangkan untuk mendapatkan bantuan daripada komuniti sudut atau menyewa pemaju profesional untuk memastikan proses berjalan lancar.
Pasukan sudut menyediakan nota pelepasan terperinci untuk setiap kemas kini di laman web rasminya. Arahan ini termasuk ringkasan perubahan yang diperkenalkan dalam kemas kini, pembetulan pepijat, dan ciri -ciri baru. Anda juga boleh menggunakan perintah --dry-run
dengan pilihan ng update
untuk melihat perubahan yang akan dibuat dalam projek anda tanpa benar -benar memohonnya.
Selepas mengemas kini projek sudut, pastikan anda menguji dengan teliti untuk memastikan semuanya masih berfungsi seperti yang diharapkan. Anda boleh menggunakan alat ujian terbina dalam CLI sudut, seperti karma dan protractor, untuk menjalankan ujian unit dan ujian akhir-ke-akhir pada projek anda. Jika anda mempunyai sebarang masalah, rujuk mesej ralat dan dokumentasi sudut untuk menyelesaikannya.
kekerapan kemas kini bergantung kepada keperluan khusus projek dan kestabilan versi sudut yang anda gunakan. Walau bagaimanapun, biasanya lebih baik menggunakan versi stabil terkini untuk terus mengemas kini untuk memanfaatkan ciri dan penambahbaikan terkini. Ingatlah untuk menguji projek anda dengan teliti selepas setiap kemas kini untuk memastikan semuanya masih berfungsi seperti yang diharapkan.
Ya, versi boleh dilangkau apabila mengemas kini projek sudut. Walau bagaimanapun, adalah disyorkan untuk mengemas kini satu versi utama pada satu masa untuk mengelakkan masalah yang berpotensi. Sekiranya anda mengemas kini dari versi yang sangat lama, pertimbangkan untuk mendapatkan bantuan daripada komuniti sudut atau menyewa pemaju profesional untuk memastikan prosesnya berjalan lancar.
Kemas kini projek sudut untuk mendapat manfaat daripada ciri terkini, penambahbaikan, dan pembetulan pepijat. Ia juga membantu memastikan projek anda selamat dan serasi dengan teknologi moden yang lain. Walau bagaimanapun, ingatlah untuk menguji projek anda dengan teliti selepas setiap kemas kini untuk memastikan semuanya masih berfungsi seperti yang diharapkan.
Anda boleh menggunakan alat integrasi berterusan (CI) seperti Jenkins atau Travis CI untuk mengautomasikan proses kemas kini projek sudut. Alat ini secara automatik boleh menjalankan arahan ng update
dan ujian anda apabila anda menolak perubahan ke repositori. Ini dapat membantu memastikan projek anda sentiasa terkini dan berfungsi dengan baik.
Atas ialah kandungan terperinci Cara mengemas kini projek sudut ke versi terkini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!