Mám jednu appku, trošku zanedbanú, ale rozhodol som sa si na nej vyskúšať prechod na nový Angular 2+. K dnešnému dňu 4.2.4.

Ide o jednoduchú appku s formulárom, ktorý robí requesty na vyhľadávací formulár v dpmz.sk. Čisto iba kvôli UX, lebo stránka dpmz.sk vôbec nieje mobile friendly.

Aplikácia je postavená javascriptovým frameworkom Angular, verzia 1.5.x. Na UI som použil Bootstrap a tým pádom som využil komponenty Bootstrap-ui. Routing je cez ui-router.

Build aplikácie je spravený cez Gulp. A toho som sa teraz chytil. Keďže pre prechod na najnovší Angular potrebujem module loader, rád by som použil aj typescript a chcem spraviť postupný prechod a nie big bang tak ako prvý krok prehodím build z Gulp na webpack.

Rozhodoval som sa nad rôznymi variantami, jednou z nich bolo nechať build cez Gulp a dorobiť transpilovanie typescript a použiť systemjs. Ale nakoniec, keď som videl ako všetci prechádzajú na webpack a aj Angular cli naň prešiel, tak, že to vyskúšam aj ja.

Na najnovší Angular sa dá prejsť dvoma spôsobmi. Big bang, čiže prepíšem celú aplikáciu rovno na najnovší Angular alebo postupne. Súbor po súbore. Čo je vhodnejšie pre veľký projekt. Angular 1.x.x vie súčasne bežať spolu s Angular 2+. A ich súčasti vedia navzájom komunikovať. A toto si chcem vyskúšať na tomto malom projekte.

Teraz k tomu prechodu na webpack. Na githube som našiel AngularJs projekt s webpackom ktorý som si vyklonoval a použil jadro. https://github.com/preboot/angularjs-webpack
Môj pôvodný rootovský modul vyzeral takto

angular.module('mhdApp', ['ngResource', 'ngSanitize', 'ui.router', 'ui.select', 'ui.bootstrap', 'mhd.templates', 'mhd.home'])

    .config(function($urlRouterProvider) {
        $urlRouterProvider.otherwise("/home");
    })

    .run(function () {

    });

A po prepísaní do nového štýlu vyzerá takto:

import 'bootstrap/dist/css/bootstrap.css';
import 'ui-select/dist/select.css';
import '../style/main.css';

import angular from 'angular';
import ngResource from 'angular-resource';
import ngSanitize from 'angular-sanitize';
import uiRouter from 'angular-ui-router';
import uiSelect from 'ui-select';
import uiBootstrap from 'angular-ui-bootstrap';

import HomeModule from './home/home.module.js';
import DataResource from './resources/dataresource.service'



const AppModule = angular.module('mhdApp', [ngResource, ngSanitize, uiRouter, uiSelect, uiBootstrap, HomeModule.name])

    .factory('DataResource', DataResource)

    .config(['$urlRouterProvider', function($urlRouterProvider) {
        $urlRouterProvider.otherwise("/home");
    }])

    .run(function () {

    });

export default AppModule;

Predtým môj index.html bol nekonečný súbor so všetkými javascriptami, teraz je to vpodstate prázdny html a všetky dependency sa definujú ako importy tam, kde sa aj používajú.

HomeModul vyzeral nasledovne:

angular.module('mhd.home', [])

    .config(function ($stateProvider) {
        'use strict';

        $stateProvider
            .state('zilina', {
                url: "/home",
                templateUrl: "app/views/home.html",
                controller: 'HomeCtrl',
                controllerAs: 'ctrl'
            });
    });

a teraz:

import angular from 'angular';
import template from './home.html';

import HomeController from './home.controller';

const HomeModule = angular.module('mhd.home', [])

    .config(['$stateProvider',function ($stateProvider) {
        'use strict';

        $stateProvider
            .state('home', {
                url: "/home",
                template: template,
                controller: 'HomeController',
                controllerAs: 'ctrl'
            });
    }])


.controller('HomeController', HomeController);

export default HomeModule;

Controller (aspoň jeho časť) pred tým vyzerala takto

angular.module('mhd.homepage').controller('HomeController ', HomeController);

function HomeController ($scope, $state, $location) {

 $scope.dateOptions = {
 formatYear: 'yy',
 startingDay: 1
 };

 $scope.status = {
 opened: false
 };
}

a teraz vyzerá takto

export default class HomeController {

    /* @ngInject */
    constructor($scope, DataResource, $location) {

        $scope.dateOptions = {
            formatYear: 'yy',
            startingDay: 1
        };

        $scope.status = {
            opened: false
        };

Pre správnu minifikáciu resourcov používam ng-annotate, ktorý zabezpečí, že aj po builde aplikácie bude správne fungovat dependency injection. Pre správne fungovanie je potrebné pridať anotáciu ngInject. Minimálne vtedy, keď nepíšete aplikáciu v starom dobrom javascripte, ale v novšj verzií.

Pre správne fungovanie ng-annotate pod webpackom som pridal do package.json dev dependency ng-annotate-loader a vo webpack configu som namiesto js loaderu

loader: 'babel-loader',

použil

loader: [
    'ng-annotate-loader',
    'babel-loader'
],

Pre komplexnejší pohľad na to ako je aplikácia postavená mám v pláne dať na github starter projekt, kde bude všetko rozbehané a budu tam použité aktuálne best-practice tak „Stay tunned“