Angular Best Practices - издание август 2017 г.

(Тази публикация е кръстосано публикувана от https://fluin.io/blog/angular-best-practices-august-2017)

Още един месец, още едно резюме на най-добрите практики. Този месец се върнахме към някои основи на инструмента и конфигурирането на IDE и някои принципи на реактивно програмиране, които ще ви създадат за бъдещ успех.

Най-добра практика 1: Използвайте CLI

Днес Angular CLI е най-добрият начин за изграждане на Angular приложения. Много разработчици започнаха с Angular преди CLI да е готов за първо време, но CLI е страхотно за огромното мнозинство от разработчици, стартиращи фирми и големи корпоративни екипи.

Стартирате нов проект? Създайте го с CLI.

Работите по съществуващ проект? Създайте нов проект с CLI и след това преместете съществуващия си код в / src / app /.

npm инсталирайте -g @ angular / cli
нов мой проект

CLI има инструменти за скеле (известни още като схеми) за създаване на нови проекти и генериране на нов код за вас, но това не е основната полза. Основното предимство на CLI е начинът, по който той автоматизира изграждането на тръбопровода както за живото развитие с ng обслужване, така и за производствения код, който ще изпратите до браузъри с ng build -prod

ng build -prod винаги ще се възползва от най-добрите практики, тъй като екипът на Angular може да се включи автоматично. Това означава, че тази команда с времето ще стане по-мощна с функции като Service Workers или The Angular Optimizer.

Най-добра практика 2: Инсталирайте разширението на Vs Code на Джон Папа

Visual Studio Code е страхотно IDE за изграждане на ъглови приложения. Едно от най-големите предимства, което можете да направите за себе си, е да инсталирате основния ъглов удължителен пакет на Джон Папа.

Това прави работата с Angular в Visual Studio Code по-добра от всякога.

Този пакет включва следните страхотни инструменти:

  1. The Angular Language Service - Осигурява завършване и проверка на грешки при проверка на приложението и при проверка на грешките в приложението
  2. EditorConfig - Свързва конфигурацията на VSCode с вашата .editorconfig, която генерираме автоматично за вас като част от нов проект на CLI
  3. Bracket Pair Colorizer - Вместо стандартно подчертаване на синтаксиса, това разширение оцветява скобите, скобите и къдравите скоби въз основа на вложения им слой. Визуалните индикации за гнездене са огромна помощ при работа със сложен код.

Най-добра практика 3: Не се абонирайте за вашите наблюдения в компоненти

Много разработчици, които работят с Observables за първи път, искат да се абонират и да запишат данните на места някъде.

Това обикновено е антипатерн, защото ви принуждава разработчика да управлява жизнения цикъл на компонентите и абонаментите, вместо да оставя рамката да направи това вместо вас.

По-добрият начин да направите това е да използвате асинхронната тръба във вашите шаблони и да оставите Angular да управлява всичко за вас. Нека да разгледаме някакъв примерен код.

Не правете това:

...
шаблон: `
    {{localData | JSON}}
`)
експорт клас MyComponent {
    localData;
    конструктор (http: HttpClient) {
        http.get ( "път / до / моята / api.json")
        .отпишете се (данни => {
            this.localData = данни;
        });
    }
}

Вместо това направете това

...
шаблон: `
    {{данни | async | JSON}}
`)
експорт клас MyComponent {
    данни;
    конструктор (http: HttpClient) {
        this.data = http.get ('път / до / моя / api.json');
    }
}

Като запазвате наблюдаемото и се абонирате през шаблона, избягвате течове на памет, тъй като Angular автоматично се отписва от Observable, когато компонентът се развали. Това може да не изглежда толкова важно за HTTP, но това е хубаво поради няколко причини.

Async тръбата ще анулира HTTP заявки, ако данните вече не са необходими, вместо да завърши, обработи и след това да не прави нищо с нея.

Най-накрая тръбата Async означава, че можем да изградим по-ефективни приложения чрез превключване на вашия ChangeDetectionStrategy в OnPush. Когато преминете към OnPush, много нови и подобрени стратегии могат да предизвикат необходимостта от откриване на промени, които вашият ръчен абонамент няма да задейства автоматично.

Ето няколко примера за по-модерни наблюдаеми стратегии:

Async тръбата означава, че по-късно, ако замените обикновено HTTP обаждане с нещо по-сложно като набор от данни в реално време като Firebase, кодът на шаблона ви няма нужда да се променя.

Много от функциите / правомощията на Observables се губят, когато ръчно се абонирате. Наблюдаваните могат да бъдат обогатени с поведение като повторен опит, startWith (за неща като офлайн кеширане) или опресняване на базата на таймера.

Най-добра практика 4: Не забравяйте за SEO и Analytics

Уебсайтовете и приложенията са мощни поради начина, по който търсачките като Google могат да ги индексират и споделят вашето съдържание със света.

Продуктите от Google Анализ могат да ви помогнат да разберете нуждите и поведението на потребителите си.

За да настроите и двете, включете фрагмента на Google Analytics в нашия index.html и заменете проследяващия код, като премахнете първоначалния изглед на страница, който те включват по подразбиране.

<Скрипт>
  (Функция (I, S, О, G, R, A, m) {I [ "GoogleAnalyticsObject '] = R; и [R] = I [R] || функция () {
  (i [r] .q = i [r] .q || []). push (аргументи)}, i [r] .l = 1 * new Date (); a = s.createElement (o),
  m = s.getElementsByTagName (о) [0]; a.async = 1; a.src = грам; m.parentNode.insertBefore (а, т)
  }) (Прозорец, документ, "сценарий", "HTTPS: //www.google-analytics.com/analytics.js','ga ');
  ga ('създаване', 'UA-00000000-0', 'auto');

Сега нека продължим и добавяме събития към нашия app.module.ts.

Искаме да изслушаме всички събития на рутера, да разберем кога успешното приключване на навигационното събитие (NavigationEnd) и да актуализираме заглавието на страницата и да изпратим аналитично събитие.

Ще използваме абонамент (о, не!), Но в този контекст е добре, защото ще имаме точно един абонамент и искаме той да работи и да работи през целия живот на нашето приложение в браузъра.

За SEO ще четем заглавието на страницата от някои допълнителни данни, които включваме в нашата конфигурация на маршрута.

app.module.ts

декларирайте var ga;
...
RouterModule.forRoot ([
    ...
    {path: 'bio', компонент: Bio, data: {title: 'About'}},
    {path: 'Проекти', компонент: Проекти, данни: {заглавие: 'Проекти'}},
])
...
конструктор (рутер: Рутер, активиранРуте: АктивиранРуте, заглавие: Заглавие) {
    router.events.filter (e => e instanceof NavigationEnd) .пишете абонамент ((събитие) => {
        нека pageTitle = router.routerState.snapshot.root.children [0] .data ['title'];
        ако (pageTitle) {
            title.setTitle (PAGETITLE);
        } else if (pageTitle! == false) {
            title.setTitle („Моето заглавие по подразбиране“);
        }
        ga ('изпрати', 'преглед на страница', event.urlAfterRedirects);
    });
}