Angular 8 ішінде не бар?

Мазмұны

• 01. Нұсқаны тексеруді іске қосыңыз
• 02. Бұрышты орнатыңыз
• 03. Жоба қаңқасын жасаңыз
• 04. Дифференциалды жүктеме
• 05. ... нәтижелерін көріңіз
• 06. Веб-қызметкердің уылдырығы
• 07. Кодты зерттеңіз
• 08. Тік тіректерді орнатыңыз
• 09. Конструктордың жоқтығына алаңдамаңыз
• 10. Шағын компиляторды орындаңыз
• 11. ... және нәтижесін табыңыз
• 12. Жұмысқа кірісіңіз
• 13. Айвиді зерттеңіз
• 14. Өзгертілген өңдеуге тырысыңыз
• 15. Көші-қонның жақсаруы
• 16. Жұмыс кеңістігін басқаруды зерттеңіз
• 17. Процесті жеделдетіңіз
• 18. Жүретін өліктерден аулақ болыңыз
• 19. Өзгерістер журналына қараңыз

Angular 8 - бұл Google-дің бұрыштық бұрышының ең соңғы нұсқасы - бұл ең жақсы JavaScript шеңберінің бірі. Бұл мақалада біз Angular 8-тің ерекшелігін қарастырамыз және сізге қалай бастау керектігін көрсетеміз. Біріншіден, осы уақытқа дейін рамамен не болғанын қысқаша қарау.

Angular-дың енгізілуі веб-дамудың парадигмалық өзгеруіне әкелді: көптеген кітапханалар архитектуралық әсері салыстырмалы түрде шектеулі әзірлеушілерге қолдау көрсетумен шектелсе, Angular’s ​​әзірлеушілер тобы басқа бағытта жүрді. Олардың өнімі ауытқулары қиыннан коммерциялық тұрғыдан мағынасызға дейінгі нақты архитектураны қолдануға мәжбүр етеді. Шын мәнінде, бұрыштық кодтың көпшілігі браузерге түспес бұрын салыстырмалы түрде күрделі транспиляция құралы арқылы жұмыс істейді.

Google Inc ішіндегі де, сыртындағы да Angular-дың үлкен жетістігі арқасында даму айтарлықтай тұрақтанды. Бұл дегеніміз, кодтың өзгеруі аз, ал жартыжылдық жаңартулар құрылымды веб-шолудың ландшафтының өзгеруіне бейімдеуге бағытталған.

Мысалы, Angular 8 жағдайында жаңа JavaScript компиляторы орналастырылған (эксперименталды түрде болса да). Ол көне браузерлер есебінен жасалған сыйысымдылық кодын едәуір кішірейтіп, тезірек етеді. Сонымен қатар, Web Worker қолдауы Angular өңдеу мүмкіндігін арттыру үшін біріктірілген. Қысқасы, көруге болатын көп нәрсе бар - ендеше суға батырайық.

Егер сіз сайтты кодсыз жасағыңыз келсе, осы қарапайым веб-сайт жасаушылардың бірін қолданып көріңіз. Заттарды біркелкі ету үшін веб-хостинг қызметін дұрыс орнатыңыз.

01. Нұсқаны тексеруді іске қосыңыз

Angular's құралы NodeJS ортасында өмір сүреді. Осы жазбадан бастап Node.js 10.9 немесе одан да жақсырақ нұсқасы қажет - егер сіз өзіңізді ескі нұсқада тапсаңыз, Node.js веб-сайтына кіріп, жаңартыңыз. Төмендегі код осы машинадағы нұсқа күйін көрсетеді.

tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0

02. Бұрышты орнатыңыз

Angular’s ​​құралы командалық жолдың утилитасында орналасқан нг. Оны танымал NPM арқылы орнатуға болады.

tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng нұсқа

Төмендегі суретте көрсетілген сұраққа мұқият болыңыз.

Нұсқа туралы ақпаратты құралдан алу өте қиын - синтаксис тек ерекше болып қана қоймай, оның нәтижесі де мағыналы болады (төмендегі суретті қараңыз).

03. Жоба қаңқасын жасаңыз

нг біз үшін бұрыштық тіректер жасайды. Келесі қадамдарда біз маршруттауды қосқымыз келеді және CSS транспиляциясы үшін Sass қолданамыз. Егер орналастыру қандай да бір себептермен сәтсіз болса, жұмыс каталогын босатып, қайта қосыңыз нг супер пайдаланушы құқығымен.

tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng жаңа жұмыс сынағы

04. Дифференциалды жүктеме

Бұрыштың жаңа нұсқасы әсердің төмендеуі үшін кері үйлесімділік кодын оңтайландырады - файл деп аталады шолушылар тізімі қай браузерлерге қолдау көрсетілетінін шешуге мүмкіндік береді. Ашық шолушылар тізімі және сөзді алып тастаңыз емес IE 9 алдында IE11 дейін.

. . . > 0.5% соңғы 2 нұсқасы Firefox ESR өлмеген IE 9-11 # IE 9-11 қолдау үшін ‘not’ алып тастаңыз.

05. ... нәтижелерін көріңіз

Жобаның компиляциясына тапсырыс беріңіз, тарату қалтасына ауысыңыз және қажет емес карта файлдарын тазалаңыз.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls

Нәтижелерін көру үшін ағашты шақырыңыз - нг әртүрлі код файлдарының бірнеше нұсқаларын жасайды (төмендегі суретті қараңыз).

06. Веб-қызметкердің уылдырығы

Веб-жұмыскерлер JavaScript-ті жергілікті қосымшалардың соңғы шекарасына енгізуге мүмкіндік береді: тапсырмаларды жаппай параллель өңдеу. Angular 8 көмегімен веб-жұмысшыны ыңғайлы уақытта жасауға болады нг командалық жолдың утилитасы.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng веб-жұмыскерді құру myscreer CREATE tsconfig.worker.json (212 байт) CREATE src / app / myworker.worker.ts (157 байт) UPDATE tsconfig.app.json (236 байт) ЖАҢАРТУ angular.json (3640 байт)

07. Кодты зерттеңіз

нгШығарылымы, бір қарағанда, қорқынышты болып көрінеді. Файлды ашу src / app / myworker.worker.ts код редакторында сіз жақсы білетін кодты ашады WebWorker сипаттама. Негізінде жұмысшы хабарламаларды қабылдайды және оларды қажеттілікке қарай өңдейді.

/// сілтеме lib = «webworker» /> addEventListener (’хабарлама’, ({data}) => {const response = `$ {data} үшін жұмысшы жауабы;« postMessage (жауап);});

08. Тік тіректерді орнатыңыз

Бұрыштық қосымшалар компоненттерден тұрады. Біздің веб-қызметкерді жұмыстан шығару ең жақсы жағдайда жасалады AppComponentүшін тыңдаушыны қосатын кеңейтілген OnInit іс-шара. Әзірге ол тек күй туралы ақпаратты шығарады.

импорттау {Component, OnInit} '@ angular / core'; @Component ({..}) Экспорттау сыныбы AppComponent OnInit {title = ’workertest 'іске асырады; ngOnInit () {console.log («AppComponent: OnInit ()»); }}

09. Конструктордың жоқтығына алаңдамаңыз

Тәжірибелі TypeScript әзірлеушілері өздеріне сұрақ қояды, неге біздің код бағдарламалау тілінде берілген конструкторды қолданбайды. Мұның себебі сол ngOnInit бұл инициализация оқиғасы болған кезде өртенетін өмір циклінің оқиғасы, мұны сынып шақырумен байланыстырудың қажеті жоқ.

10. Шағын компиляторды орындаңыз

Осы уақытта бағдарлама іске қосылуға дайын. Біз оны ішіндегі серверден орындаймыз нг, оны қызмет ету командасы арқылы шақыруға болады. Бұл тәсілдің ұқыпты жағы - бағдарлама өзгерістерді анықтап, жобаны тез арада қайта компиляциялайды.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve

Төмендегі суретте мұны іс жүзінде көру үшін суретке назар аударыңыз.

11. ... және нәтижесін табыңыз

қызмет ету әдетте жергілікті веб-сервердің мекен-жайын қояды http: // localhost: 4200 /. Күйдің нәтижесін көру үшін веб-парақты ашып, әзірлеуші ​​құралдарын ашыңыз. Мұны есте сақтаңыз console.log деректерді шолғыш консоліне шығарады және NodeJS данасының консолін өзгертусіз қалдырады.

12. Жұмысқа кірісіңіз

Осы уақытта біз жұмысшының данасын құрамыз және оны хабарламамен қамтамасыз етеміз. Содан кейін оның нәтижелері шолғыш консолінде көрсетіледі.

if (typeof Worker! == ’undefined’) {// Create new const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’бет хабарлама алды: $ {data }’); }; worker.postMessage (‘сәлем’); } else {console.log («Жұмысшыларға қолдау жоқ»); }

13. Айвиді зерттеңіз

Angular-дың болашақ нұсқаларында жетілдірілген компилятор қолданылады, бұл тіпті кішігірім көріністерге әкеледі. Өнім әлі аяқталмаған кезде, шырмауық тәрізді сүйек қаңқасын ұрықтандыруға болады жаңа шырмауық-жоба - шырмауық. Сонымен қатар, компилятордың параметрлерін үзіндіде көрсетілгендей етіп өзгертіңіз.

«angularCompilerOptions»: {«enableIvy»: шын}

Ескерту: шырмауық таңғажайып мөлшердің азаюына әкеледі, бірақ бұл тегін емес. Өнім әлі тұрақталмаған, сондықтан оны өнімді ортада пайдалану ұсынылмайды.

14. Өзгертілген өңдеуге тырысыңыз

Бұрыштық нг командалық жол құралы ішкі сценарийлерді біраз уақыт ішінде қолданды. Бұрыштық 8-ге дейін жоғарылайды, енді сіз өзіңіздің тапсырмаңызды орындау үшін осы қондырғыны қолдана аласыз, себебі сіздің қосымшаңыз жинақталған және құрастырылған.

«сәулетші»: {«құрастыру»: {«құрылысшы»: «@ angular-devkit / build-angular: шолғыш»,

Бір ұқыпты қолдану нг сценарийлер бұлтты қызметтерге қосымшаларды тікелей жүктеуді қамтиды. Git репозиторийі сіздің жұмысыңызды Firebase тіркелгісіне жүктейтін пайдалы сценарий ұсынады.

15. Көші-қонның жақсаруы

Angular 1.x-тен алшақтайтын, AngularJS деп аталатын әзірлеушілерде навигаторды 'біріктірілген' қосымшаларда дұрыс жұмыс істеуге мүмкіндік беретін мәселелер жеткілікті болды. Жаңа бірыңғай орналасу қызметі осы процесті тегіс етуге бағытталған.

16. Жұмыс кеңістігін басқаруды зерттеңіз

Ірі жобалар жұмыс кеңістігінің құрылымын динамикалық түрде өзгерте алады. Бұл Angular 8.0-де енгізілген жаңа Workspace API арқылы жасалады - бұл қадаммен бірге жүретін үзінді мінез-құлыққа жылдам шолу жасайды.

async функциясы demonstrate () {const хост = жұмыс кеңістігі. createWorkspaceHost (жаңа NodeJsSyncHost ()); const жұмыс кеңістігі = жұмыс кеңістігін күтеді. readWorkspace (’path / to / workspace / directory /’, хост); const жоба = жұмыс кеңістігі.жобалар. алу (‘my-app’); const buildTarget = project.targets. алу ('салу'); buildTarget.options.optimization = true; жұмыс кеңістіктерін күту.writeWorkspace (жұмыс кеңістігі, хост); }

17. Процесті жеделдетіңіз

Ірі JavaScript код базаларын құру өте қиын. Болашақ AngularJS нұсқалары процесті жеделдету үшін Google-дің Bazel құрастыру жүйесін қолданады - өкінішке орай, жазу кезінде ол алғашқы уақытқа дайын болмады.

18. Жүретін өліктерден аулақ болыңыз

Google кодты бұзбауға ерекше назар аударса да, кейбір функцияларды жою қажет, өйткені олар қажет емес. Болдырмау керек мүмкіндіктер туралы көбірек білу үшін осы амортизациялар тізімін тексеріңіз.

19. Өзгерістер журналына қараңыз

Әдеттегідей, бір мақала бүкіл шығарылымға ешқашан әділдік жасай алмайды. Бақытымызға орай, бұл өзгертулер журналы барлық өзгерістердің егжей-тегжейлі тізімін ұсынады - егер сіз өзіңіз үшін қымбат функцияның импульсін тексергіңіз келсе.

Сіздің сайтыңызға жүктеуге дайын көптеген файлдарыңыз бар ма? Олардың сақтық көшірмесін ең сенімді бұлт қоймасында жасаңыз.

Бұл мақала бастапқыда веб-дизайн журналында жарияланған Веб-дизайнер.