IP calculator – prosta aplikacja w AngularJS

Zbudowanie szkieletu aplikacji webowej w jednym z popularnych framework’ów jest niezwykle proste, jeśli wykorzystamy dostępne generatory np. Yeoman, o którym pisałem w październiku. Poniżej w kilku krokach przedstawię przykład wykorzystania Yeoman, uruchomienia aplikacji i jej testów, a także zbudowanie paczki do umieszczenia na serwerze. Prosta aplikacja w AngularJS, którą zbudowałem, nazywa się IP calculator i jej głównym celem jest przeliczanie adresacji IP. 

Instalacja Yeoman oraz generatora aplikacji w AngularJS

$ npm install -g yo
$ npm install -g generator-fountain-angular2

Uruchomienie generatora

$ yo fountain-webapp

Uruchomienie aplikacji

$ npm run serve

> @ serve /Users/seba/Projects/js/angularjs/ip
> gulp serve

[21:56:13] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/browsersync.js
[21:56:13] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/karma.js
[21:56:13] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/misc.js
[21:56:13] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/webpack.js
[21:56:14] Using gulpfile ~/Projects/js/angularjs/ip/gulpfile.js
[21:56:14] Starting 'serve'...
[21:56:14] Starting 'webpack:watch'...
ts-loader: Using typescript@1.8.10 and /Users/seba/Projects/js/angularjs/ip/tsconfig.json
[21:56:23] Time: 9168ms
...
[21:56:23] Finished 'webpack:watch' after 9.21 s
[21:56:23] Starting 'watch'...
[21:56:23] Finished 'watch' after 154 ms
[21:56:23] Starting 'browsersync'...
[21:56:23] Finished 'browsersync' after 29 ms
[21:56:23] Finished 'serve' after 9.39 s
[BS] [BrowserSync SPA] Running...
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.1.11:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.11:3001
-------------------------------------
[BS] Serving files from: .tmp
[BS] Serving files from: src

Uruchomienie testów

$ npm run test:auto

> @ test:auto /Users/seba/Projects/js/angularjs/ip
> gulp test:auto

[22:00:14] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/browsersync.js
[22:00:14] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/karma.js
[22:00:15] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/misc.js
[22:00:15] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/webpack.js
[22:00:15] Using gulpfile ~/Projects/js/angularjs/ip/gulpfile.js
[22:00:15] Starting 'test:auto'...
[22:00:15] Starting 'karma:auto-run'...
ts-loader: Using typescript@1.8.10 and /Users/seba/Projects/js/angularjs/ip/tsconfig.json
...
Chrome 56.0.2924 (Mac OS X 10.12.3): Executed 29 of 29 SUCCESS (2.678 secs / 1.855 secs)

Zbudowanie aplikacji do umieszczenia na serwerze

$ npm run build

> @ build /Users/seba/Projects/js/angularjs/ip
> gulp

[22:49:24] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/browsersync.js
[22:49:24] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/karma.js
[22:49:25] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/misc.js
[22:49:25] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/webpack.js
[22:49:26] Using gulpfile ~/Projects/js/angularjs/ip/gulpfile.js
[22:49:26] Starting 'default'...
[22:49:26] Starting 'clean'...
[22:49:26] Finished 'clean' after 15 ms
[22:49:26] Starting 'build'...
[22:49:26] Starting 'other'...
[22:49:26] Starting 'webpack:dist'...
ts-loader: Using typescript@1.8.10 and /Users/seba/Projects/js/angularjs/ip/tsconfig.json
[22:49:31] Finished 'other' after 4.88 s
[22:49:55] Time: 28539ms
Asset Size Chunks Chunk Names
vendor-a96ac73feed584465431.js 1.06 MB 0 [emitted] vendor
app-a96ac73feed584465431.js 1.14 MB 1 [emitted] app
index-fda06395e49b6f452606f4ead775056a.css 359 bytes 1 [emitted] app
index.html 671 bytes [emitted]
...
Child extract-text-webpack-plugin:
[22:49:55] Finished 'webpack:dist' after 29 s
[22:49:55] Finished 'build' after 29 s
[22:49:55] Finished 'default' after 29 s

Skrypty NPM albo zadania Gulp

W zależności od upodobań można używać do uruchamiania czy testowania aplikacji skryptów NPM albo zadań Gulp. Poniżej krótka lista z podsumowaniem typów zadań:

• npm run build – budowanie aplikacji
• npm run serve – uruchomienie aplikacji na lokalnym komputerze
• npm run serve:dist – uruchomienie zoptymalizowanej wersji aplikacji na lokalnym komputerze
• npm run test – uruchomienie testów jednostkowym w Karmie
• npm run test:auto – uruchomienie testów jednostkowym w Karmie w trybie wykrywania zmian kodu (po zmianie w plikach testy automatycznie zostaną wykonane ponownie)

W przypadku Gulp będą to odpowiednio polecenia:

• gulp or gulp build
• gulp serve
• gulp serve:dist
• gulp test
• gulp test:auto