Tarkib
- 01. Tugun bilan boshlang
- 02. Yangi loyihani o'rnating
- 03. Versiya versiyasini tekshiring
- 04. Burchak 4 ga ko'taring
- 05. O'quv qo'llanmasini yuklab oling
- 06. Gul do'konini 4.0 ga ko'taring
- 07. O'zaro bog'liqlikni tuzatish
- 08. Ismlarning o'zgarishiga e'tibor bering
- 09. Versiyalarni tekshiring
- 10. Ishingizni tekshiring
Mart oyida Angular jamoasi 4-versiyasini chiqardi va shu bilan birga qiziqarli yangi xususiyatlarni o'rganish kerak edi. Ushbu o'quv qo'llanmada biz sizga ushbu yangi xususiyatlardan ba'zilari yordamida qanday qilib dastur yaratishni, shuningdek, ishlashni yaxshilaydigan, qalpoq ostidagi o'zgarishlarni namoyish etishni ko'rsatamiz.
Nima yangiliklar?
Burchak jamoasi buni "ko'rinmas makiyaj" deb atamoqda, chunki o'zgarishlarning aksariyati asosiy kodlash funktsiyasi bilan emas, balki fonda. To'g'ri ishlatilganda ishlashni keskin yaxshilash imkoniyatiga ega bo'lgan standart o'zgarishlardan oldin kompilyatsiyaga o'tish muhim o'zgarishdir. TypeScript 2.1+ endi qo'llab-quvvatlanadi, bu bizga ES2015-ning barcha yangi xususiyatlaridan foydalanish imkoniyatini beradi.
Boshlang'ich narsalarda sezilarli o'zgarishlar bo'lmadi deyish mumkin emas - masalan, kodni soddalashtirishga imkon beradigan foydali yangi shablonni majburiy sintaksis mavjud. boshqa variant ngIfva an ichida mahalliy o'zgaruvchilarni tayinlash qobiliyati ngFor.
3.0 ni sog'indimmi?
Burchak 4 - bu semantik versiya qabul qilingan ramkaning birinchi asosiy versiyasi. Shunday qilib, xavotir olmang, siz 3.0 ni o'tkazib yubormadingiz - ikkita katta yangilanish bor edi va ikkalasi ham 4.0 versiyasiga kiritildi.
Shuni ham unutmangki, burchakli 1.x endi AngularJS deb nomlanadi va burchakli 2+ oddiygina burchakli deb nomlanadi. Ehtiyot bo'ling, chunki ba'zi bir uchinchi tomon o'quv qo'llanmalari va kutubxonalari ushbu shartlardan foydalanishni yangilamagan bo'lishi mumkin.
O'quv fayllarini oling
Ushbu qo'llanmada biz Gullar do'koni dasturi bilan ishlaymiz. Misol dasturni yuklab olish uchun FileSilo-ga o'ting, o'quv qo'llanmasi yonida Bepul narsalar va Bepul tarkibni tanlang. Eslatma: FileSilo-dan foydalanish uchun birinchi marta foydalanuvchilar ro'yxatdan o'tishlari kerak. Tizimga kirganingizdan so'ng, misol dasturni bu erdan yuklab olishingiz mumkin.
Qani boshladik!
01. Tugun bilan boshlang
Noldan boshlaylik va Hello World dasturini yaratish uchun Angular CLI-dan foydalaning. Agar siz mavjud dasturni yangilamoqchi bo'lsangiz, 4-bosqichga o'ting. Agar siz hali tugamagan bo'lsangiz, oldindan npm bilan to'ldirilgan tugunni yuklab oling. Agar sizda allaqachon tugun bo'lsa, buyruq satridan kamida 6.9.x tugun va npm 3.x.x ekanligini tekshiring.
$ node -v v6.10.2 $ npm -v 3.10.10
02. Yangi loyihani o'rnating
Endi bizda paket menejeri mavjud, biz uni burchakli va burchakli CLI-ni o'rnatish uchun ishlatamiz. Boshqa narsalar qatori, CLI sizga yangi loyihalar va tarkibiy qismlarni osongina yaratishga imkon beradi.
$ npm install -g @ angular / cli $ ng new my-first-angular4-app # Angular CLI buyruqlari 'ng' dan foydalanadi $ ng serveri -open # Ushbu buyruq sizning ilovangizni yuklaydi va brauzerda ishga tushiradi.
03. Versiya versiyasini tekshiring
Agar siz ilgari burchakli loyihani ko'rmagan bo'lsangiz, CLI tomonidan yaratilgan fayl tuzilishi bilan tanishishga vaqt ajrating. Bizning yangi loyihamiz uchun, bizning pack.json 4.0.0 versiyali burchakli paketlarni ro'yxatlashi kerak.
"qaramliklar": {"@ angular / common": "^ 4.0.0", "@ angular / compiler": "^ 4.0.0", "@ angular / core": "^ 4.0.0", "@angular / formalar ":" ^ 4.0.0 "," @ angular / http ":" ^ 4.0.0 "," @ angular / platform-browser ":" ^ 4.0.0 "," @ angular / platform-brauzer-dinamik ":" ^ 4.0.0 "," @ angular / router ":" ^ 4.0.0 "[...]}
04. Burchak 4 ga ko'taring
Agar sizda mavjud bo'lgan 2.x versiyalarga ega bo'lgan burchakli dastur mavjud bo'lsa, aksariyat hollarda 4-versiyaga yangilash haqiqatan ham oson. Biz faqat buyruq satridan tegishli paketlarni o'rnatishimiz va yangilashimiz kerak. Mac:
$ npm install @ angular / {common, compiler, compiler-cli, core, formlar, http, platform-brauzer, platforma-brauzer-dinamik, platforma-server, yo'riqnoma, animatsiyalar} @ so'nggi uslublar yozuvi @ so'nggi - saqla
Windows:
> npm o'rnatish @ angular / common @ latest @ angular / compiler @ latest @ angular / compiler-cli @ latest @ angular / core @ latest @ angular / form @ latest @ angular / http @ latest @ angular / platform-browser @ latest @ burchakli / platforma-brauzer-dinamik @ so'nggi @ angular / platforma-server @ eng so'nggi @ burchakli / yo'riqnoma @ so'nggi @ burchakli / animatsiyalar @ so'nggi yozuvlar skripti @ so'nggi - saqlanadigan
05. O'quv qo'llanmasini yuklab oling
Bundan buyon biz FileSilo-dan yuklab olishingiz mumkin bo'lgan Angular 2 misol dasturi bilan ishlaymiz (buni qanday qilish haqida to'liq eslatmalar uchun yuqoridagi tanishishga qarang). Shuni esda tutingki, ushbu dastur faqat tushuntirish maqsadida yaratilgan.TheFlower Shop dasturini ildiz katalogingizga yuklab olgandan so'ng, bog'liqliklarni o'rnating va brauzerda ishga tushiring.
$ npm install $ ng service --open
06. Gul do'konini 4.0 ga ko'taring
Ichida gullar do'koni katalog, 4.0 ga ko'taring. Bizda bor Tengdoshlarning mustaqilligi yangilanishdan keyin xatolar.
07. O'zaro bog'liqlikni tuzatish
O'zaro bog'liqlik - bu bir xil bog'liqlikning turli xil versiyalariga asoslangan paketlarga ega bo'lgan loyihalarni boshqarish uchun. Siz ularni o'zingiznikiga qo'lda qo'shishingiz kerak pack.json fayl. Flower Shop-ga kerak bo'lgan tengdoshlik bog'liqligi eski versiyalarini o'z ichiga oladi @ angular / {core, http}, rxjs va zone.js.
Terminal chiqishidagi xatolarni ko'rib chiqing va har bir etishmayotgan bog'liqlikni qo'shing pack.json.
"peerDependencies": {"@ angular / core": "> = 2.0.0", "@ angular / http": "> = 2.0.0", "rxjs": "^ 5.0.0", "zone.js ":" 0.7.8 "},
08. Ismlarning o'zgarishiga e'tibor bering
Bizning Flower Shop dasturimiz ochiq manbali maxsus komponentdan foydalanadi ng2-modal. Shu bilan birga, muallif ularning nomlanish konventsiyasini yangilagan ngx-modal. Bizga bog'liqlik nomini o'zgartirishimiz kerak va ng-modul tegishli ravishda import.
pack.json: "dependencies": {[...] "ngx-modal": "0.0.25", [...]}, app / app.module.ts: import {ModalModule} 'ngx-modal ';
09. Versiyalarni tekshiring
Bizning maxsus modal komponentimiz ham so'nggi versiyasini yangilashni talab qiladi, shuning uchun uni npm bilan yangilang.
$ npm install ngx-modal @ latest --save
10. Ishingizni tekshiring
Endi biz o'zimizga bog'liqliklarni tuzatdik, tozalab tashlash yaxshidir tugun_modullari va uni yana biznikidan qurish pack.json. Agar barchasi yaxshi bo'lsa, siz toza binoga ega bo'lishingiz kerak! Agar shunday qilmasangiz, qaramlik versiyalarida hali biror narsa etishmayotgan bo'lishi mumkin. Yana bir qarang.
$ rm -rf node_modules / $ npm keshni tozalash $ npm install $ ng service --open
Keyingi sahifa: 11-20-qadamlar
