Offshore AngularJS- development- Hire-AngularJS-Developers- Outsource-AngularJS-Development
Modular Test-driven SPAs with Spring and AngularJS
-
Upload
gunnar-hillert -
Category
Technology
-
view
1.408 -
download
2
description
Transcript of Modular Test-driven SPAs with Spring and AngularJS
![Page 1: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/1.jpg)
CREATING MODULAR TEST DRIVEN SPAS WITH SPRING ANDANGULAR JS
Created by / Gunnar Hillert @ghillert
![Page 2: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/2.jpg)
GOALSAngularJS OverviewBuild and DeploymentIntegration with SpringTestingModularizationUI Considerations
![Page 3: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/3.jpg)
ME(Java) Web developer since 2005Struts 1+2, Spring MVC, GWT, FlexSpring Integration + XD committerAngularJS since Jan 2014
![Page 4: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/4.jpg)
AUDIENCE - WHAT DO YOU USE?AngularJS? 50%Backbone? 20%JQuery? 90%Are you using any other SPA Framework? ExtJSSpring MVC? 60%Spring Boot? 10%
![Page 5: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/5.jpg)
WHAT ARE SPAS?A single-page application (SPA), also known assingle-page interface (SPI), is a web application
or web site that fits on a single web page with thegoal of providing a more fluid user experience
akin to a desktop application.
Wikipedia
![Page 6: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/6.jpg)
WHAT ARE SPAS?
![Page 7: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/7.jpg)
JAVASCRIPT WTF 1/2http://wtfjs.com/
parseInt('crap'); // NaNparseInt('crap', 16); // 12
NaN
12
![Page 8: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/8.jpg)
JAVASCRIPT WTF 2/2http://wtfjs.com/
(2 + "3"); // 23(2 + +"3"); // 5(+""); // 0
23
5
0
![Page 9: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/9.jpg)
![Page 10: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/10.jpg)
FROM BACKBONE TO ANGULARToo many moving parts, choices
Boilerplate Code
Marionette, Backbone.ModelBinder, Backbone.Relational
![Page 12: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/12.jpg)
ANGULAR JS BASICSModel
View (Templates)
Controller
Expressions
Directives
Modules
See also: AngularJS Concepts
![Page 13: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/13.jpg)
¡HOLA!<div ng-app ng-init="firstName='Angular';lastName='rocks'"> <div> First Name: <input type="text" ng-model="firstName"> </div> <div> Last Name: <input type="text" ng-model="lastName"> </div> <div> <b>Complete Name:</b> {{firstName + ' ' + lastName | uppercase}} </div></div>
Demo
![Page 14: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/14.jpg)
MODEL 1/2Angular is very flexible about your model
Ultimately expressed via the $scope
$scope = Glue between Controller and View
$scope mimics DOM (Hierarchical, one $rootScope)
$watch, $apply
![Page 15: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/15.jpg)
MODEL 2/2Killer Feature: Data-Binding
Model === single-source-of-truth
View reflects model changes automatically
![Page 16: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/16.jpg)
VIEWHTML is your templating Engine
Minimize logic as much as possible
Consider Custom Directives
![Page 17: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/17.jpg)
CONTROLLERUsed to "setup" your $scope
Add behavior to your $scope
Don't do UI work using controllers!!
Use directives and filters instead
![Page 18: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/18.jpg)
¡HOLA! V2.0 - VIEW<div ng-app="hola" ng-controller="NameController"> <div> First Name: <input type="text" ng-model="firstName"> </div> <div> Last Name: <input type="text" ng-model="lastName"> </div> <div> <b>Complete Name:</b> {{firstName + ' ' + lastName | uppercase}} </div></div>
Demo
![Page 19: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/19.jpg)
¡HOLA! V2.0 - CONTROLLER<script>
</script>
(function(){ var app = angular.module('hola', []); app.controller('NameController', function($scope){ $scope.firstName='Angular'; $scope.lastName='rocks'; }); })();
Demo
![Page 20: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/20.jpg)
app.controller('NameCtrl', function($scope){ ... });app.controller('NameCtrl', ['$scope', function($scope){ ... }]);
DEPENDENCY INJECTIONConsider using array notation
Or use ngmin
grunt-ngmin, gulp-ngmin
![Page 21: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/21.jpg)
EXPRESSIONS{{ expression }}
No Control Flow Statements
Can use filters inside expressions:
{{ 'abcd' | uppercase }}
![Page 22: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/22.jpg)
DIRECTIVESAre markers on a DOM element
Attach behavior/transform DOM elements
ng-controller, ng-app ...
![Page 23: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/23.jpg)
TYPES OF DIRECTIVESAttribute (default)
Element
Class
See: https://gist.github.com/CMCDragonkai/6282750
![Page 24: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/24.jpg)
MODULESBear with me ...
![Page 25: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/25.jpg)
BUILD AND DEPLOYMENT
![Page 26: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/26.jpg)
STRATEGIES - JAVA TOOLING
Spring 4.1 (SPR-10310, SPR-10933)See
Wro4jJawr
Blog PostWebJars
![Page 27: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/27.jpg)
STRATEGIES - JAVASCRIPT TOOLINGNode (Npm)Grunt (Gulp)BowerYeoman (angular-seed)
![Page 28: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/28.jpg)
MAKE MAVEN AND GRADLE GRUNTPlugins exist for Gradle and MavenSpring XD uses Gradle integrationbotanic-ng uses Maven integrationSpring Boot plus Maven Frontend Plugin
![Page 29: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/29.jpg)
INTEGRATION WITHSPRING (BOOT)
![Page 30: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/30.jpg)
HELLO WORLD FITS INTO TWEET@Controllerclass ThisWillActuallyRun { @RequestMapping("/") @ResponseBody String home() { "Hello World!" }}
![Page 31: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/31.jpg)
RAPID PROTOTYPINGSpring Scripts ( )Starter POMsÜber-Jars support (can create WARs also)Maven + Gradle PluginsAutoConfiguration support
Samples
![Page 32: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/32.jpg)
MAIN IS BACK@EnableAutoConfiguration @ComponentScan @EnableSchedulingpublic class MainApp extends RepositoryRestMvcConfiguration { @Override protected void configureRepositoryRestConfiguration( RepositoryRestConfiguration config) { config.exposeIdsFor(Image. class, Garden.class, Plant.class); config.setBaseUri(URI.create("/api")); } public static void main(String[] args) { final ConfigurableApplicationContext context = SpringApplication.run(MainApp. class, args); ... } @Bean MultipartConfigElement multipartConfigElement() { ... } ...}
![Page 33: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/33.jpg)
SERVING STATIC CONTENT/META-INF/resources/
/resources/
/static/
/public/
Also supports WebJars
![Page 34: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/34.jpg)
MAKE BOOT MODULES (UI) PLUGGABLE
![Page 35: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/35.jpg)
DEMO BACKEND
![Page 36: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/36.jpg)
MODULARIZATION
![Page 38: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/38.jpg)
ANGULARJS MODULEShttps://docs.angularjs.org/guide/module
Compartmentalize sections of your application
Does not deal with script loading
angular.module('myModule', []). config(function(injectables) { // provider-injector // This is an example of config block. }). run(function(injectables) { // instance-injector // Like a Main method });
![Page 40: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/40.jpg)
MODULARIZATION FUTUREECMAScript 6 modules
is being written in ES6AngularJS 2
Web Components
![Page 41: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/41.jpg)
MORE COOLNESS
![Page 42: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/42.jpg)
FILTERS...<tr ng-repeat= "item in jobDefinitions | filter:filterQuery | orderBy:'name'">...
![Page 43: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/43.jpg)
FILE UPLOADangular-file-upload (nervgh)
angular-file-upload (danialfarid)
File Reader
Traditional Post
![Page 44: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/44.jpg)
ROUTINGngRoute (built-in)
Routing on steroids using ui-router
![Page 45: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/45.jpg)
ROUTING USING UI-ROUTERstate machine
nested views
Spring XD's routes.js
![Page 46: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/46.jpg)
TESTINGE2E testing with Protractor
Unit Testing using and Karma Jasmine
![Page 47: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/47.jpg)
UI CONSIDERATIONSBootstrap
Keep your CSS maintainable with and Less Sass
![Page 48: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/48.jpg)
RESOURCES
![Page 49: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/49.jpg)
![Page 50: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/50.jpg)
![Page 51: Modular Test-driven SPAs with Spring and AngularJS](https://reader033.fdocuments.in/reader033/viewer/2022042613/54b72de84a7959772f8b465b/html5/thumbnails/51.jpg)
THANK YOU!!Source Code + Preso:
https://github.com/ghillert/botanic-ng