Angular 2 Development Framework 1.

0 Features Draft

Folder Organization / Project Organization

Work in progress

Project Building

LINKS
http://stackoverflow.com/questions/39585612/build-angular-2-project-in-maven
http://stackoverflow.com/questions/35704973/how-to-configure-angular2-application-using-
typescript-with-maven

Project Testing

Work in progress

Component Organization

- Visual Part : Must be in a separate “html” file,

- Component Part (Controller) : Declares as @Component with

o Selector: ‘name_of_the_component’ -> for reflection and visual declaration
purposes
o Template: declare visual part
o Providers: Injectors (singletons) : Services and Models
 All references to the model must be through the Model component from
Component itself
 All referentes to the service must be thorugh the Service component from
Component itself
o Constructor : declare Providers as parameters
o Internal Events
 ngOnChanges (if any bindings have changed)
 ngOnInit (after the first check only)
 ngOnDestroy (at the very end before destruction) Implement this interface to
get notified when any data-bound property of your directive changes
 ngDoCheck
 ngAfterContentInit
 ngAfterContentChecked
 ngAfterViewInit
 ngAfterViewChecked
o Directives (TODO)
o @RouteConfig: Routes must be declared outside component (need to study if AOP
and reflection goes on)

- Model Part
o Must be @Injectable and must have correlation name for component

- Service Part
 - Routes

- Internal Events

- Renderer

- ElementRef
LINKS

https://julienrenaux.fr/2015/12/13/angular2-series-component-directive-pipe-and-service/

Boot Manager

Loading control (Visual first page loading)

Bootstraping modules, see and control of modules (need AOP??)
System.config.js
Tsconfig.json
Package.json

LINKS
https://www.cc28tech.com/angular-2-multi-step-wizard-ui-router-part-1/
https://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen-in-angular-2-rc-
1.htm

Objects (Constructor Factory)

https://auth0.com/blog/angular-2-series-part-2-domain-models-and-dependency-injection/

Module Manager

Module Managing
Multi Module Apps

LINKS

http://stackoverflow.com/questions/37069609/show-loading-screen-when-navigating-between-
routes-in-angular-2
http://stackoverflow.com/questions/38144655/angular-2-loader-on-each-http-request

Model Manager

Keep State of Model when leaving component (@Injectable Model)

Double Binding Managing

Storage Manager
localStorage (must be a StorageManager which encapsules all the localstorage calls)
webStorage
cache Manager

LINKS
https://github.com/PillowPillow/ng2-webstorage
https://github.com/phenomnomnominal/angular-2-local-storage
http://stackoverflow.com/questions/36293938/angular2-easiest-way-to-cache-http-responses
http://stackoverflow.com/questions/34104277/caching-results-with-angular2-http-service
View Manager
Get All Views and can change view (route to another component)
Get All ListViews
Can show popup

LINKS
http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box

Security Manager
http Services authenticated with localstorage
timeout session reauthentication
login panel in timeout session an rearrange state
CanActivate (Feature Angular 2)

LINKS
https://auth0.com/blog/creating-your-first-real-world-angular-2-app-from-authentication-to-
calling-an-api-and-everything-in-between/

http://youknowriad.github.io/angular2-cookbooks/stateless-authentication.html

http://stackoverflow.com/questions/39840457/how-to-store-token-in-local-or-session-storage-
in-angular-2

http://4dev.tech/2016/03/login-screen-and-authentication-with-angular2/

http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial

http://jasonwatmore.com/post/2016/12/08/angular-2-redirect-to-previous-url-after-login-with-
auth-guard

http://jasonwatmore.com/post/2016/09/29/angular-2-user-registration-and-login-example-
tutorial

Event Bus Manager

Send events between components and subscribe to an Event Bus

Internal MQ
@Input
@Output
Suscription Events
Promises
Async
React
Ajax Capable
EventEmitter

LINKS
http://www.concretepage.com/angular-2/angular-2-custom-event-binding-eventemitter-example
http://lishman.io/angular-2-event-binding
http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-
with-observable-subject
https://www.npmjs.com/package/ng2-simple-mq
http://embed.plnkr.co/e8Crbf/
http://embed.plnkr.co/rXSepV1PpxaHNfBdwUEW/

http://embed.plnkr.co/rXSepV1PpxaHNfBdwUEW/
http://plnkr.co/edit/8MDO2GsCGiOJd2y2XbQk?p=preview

http://victorroblesweb.es/2016/11/07/input-output-angular-2/
http://www.processinginfinity.com/weblog/2016/08/18/MessageBus-Pattern-in-Angular2-
TypeScript
http://blog.rangle.io/observables-and-reactive-programming-in-angular-2/

Layout Manager

Simple layout

Header Section
<outlet-router>
Footer

Layout Manager for change component positions

Services Manager
progress popup when service call
http interceptor
http calls manager with response and error handling
Observable
Retrieve delayed data
rx subscriptions manager
Interceptor for secure calls (

LINKS
http://embed.plnkr.co/QRoowb/
https://biznas.io/blog/2016/12/20/angular-2-http-interceptor/
http://www.adonespitogo.com/articles/angular-2-extending-http-provider/
https://pub.scotch.io/@kashyapmukkamala/using-http-interceptor-with-angular2
https://blog.slinto.sk/angular-2-http-interceptors-7e2d74b7f14e#.bfgm6nwhy
https://www.illucit.com/blog/2016/03/angular2-http-authentication-interceptor/

https://www.metaltoad.com/blog/angular-2-http-observables-and-concurrent-data-loading

https://long2know.com/2017/01/angular2-http-interceptor-and-loading-indicator/
https://dpopescu.me/2016/10/08/using-http-interceptors-in-angular-2/

http://embed.plnkr.co/QRoowb/ (See Suscription and Observable)

http://restlet.com/company/blog/2016/04/12/interacting-efficiently-with-a-restful-service-with-
angular2-and-rxjs-part-2/
http://www.syntaxsuccess.com/viewarticle/caching-with-rxjs-observables-in-angular-2.0

Location Manager
Multi language configuration

Routing Manager

Get all routes from module and declare

Outlet router (navigation in Application)
Redirect from components

LINKS
https://auth0.com/blog/creating-your-first-real-world-angular-2-app-from-authentication-to-
calling-an-api-and-everything-in-between/

Configuration Manager
Get configuration from file , http for configuring http REST Services, layout, language
Properties global (from Configuration)
Inject Properties in Components
ONE APP, MULTIPLE ENVIRONMENT

LINKS
http://stackoverflow.com/questions/35267146/accessing-a-property-in-a-parent-component-in-
angular2-with-typescript
http://stackoverflow.com/questions/34700438/global-events-in-angular-2
https://plnkr.co/edit/o88z1FFYcZsNebbcGBsF?p=preview
http://www.jvandemo.com/how-to-configure-your-angularjs-application-using-environment-
variables/
https://blog.sstorie.com/providing-external-data-when-bootstrapping-angular-2/
http://stackoverflow.com/questions/41003875/how-do-i-read-the-config-files-entries-in-angular-
2
http://stackoverflow.com/questions/35991484/angular2-read-from-configuration-file
https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9
https://medium.com/@hasan.hameed/reading-configuration-files-in-angular-2-
9d18b7a6aa4#.wj83mf41b

Error Handling Manager

Interceptor for capturing errors and offer a popup with the detail

LINKS
https://dpopescu.me/2016/10/21/catching-global-errors-in-angular-2/

Visual Features Manager

PopUp Manager (get all Components and show PopUp from another Component) with Close Button
capable

Keyboard Event Managing

Mouse Event Managing
Drag and Drop Managing
Busy Indicator when loading

LINKS
http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box
http://lishman.io/angular-2-event-binding
https://github.com/devyumao/angular2-busy
http://devyumao.github.io/angular2-busy/demo/asset/
http://akserg.github.io/ng2-webpack-demo/#/dnd
http://akserg.github.io/ng2-webpack-demo/#/toasty
http://stackoverflow.com/questions/37158928/angular-2-http-progress-bar

3rd Party Managing

jQuery integration
Ajax
WebWorks Capable

LINKS
http://stackoverflow.com/questions/38855891/angular-cli-webpack-how-to-add-or-bundle-
external-js-files

https://github.com/christiannwamba/scotch-ng-router/blob/master/package.json

Skins and Themes

Angular 2 Material Design Official
BootStrap
Ng2-admin

LINKS
https://material.angular.io

Components

Form-> FORM DIRECTIVES

Tabs (keep states)
PDF Managing
iFrame Managing
Table (Datatable integration)

LINKS
https://github.com/swimlane/ngx-datatable
http://stackoverflow.com/questions/40596304/how-to-use-angular2-data-table
http://4dev.tech/2016/02/tutorial-angular-2-datatable-with-sorting-filtering-and-resizable-
columns/

COMPLETE SAMPLES
https://github.com/maiyaporn/angular2-wizard-demo
http://4dev.tech/2016/03/login-screen-and-authentication-with-angular2/
https://dzone.com/articles/getting-started-and-testing-with-angular-cli-and-angular-2-rc5-part-1
https://github.com/mrholek/Prime-Bootstrap-4-Admin-Template-with-AngularJS-and-Angular-2-
support
http://onehungrymind.com/build-a-simple-website-with-angular-2/
https://www.sitepoint.com/angular-2-tutorial/
https://github.com/hasanhameed07/angular2-dashboard-starter

Angular2 Reflection
Create Own Annotations
GET all Components

LINKS
https://github.com/voliva/angular2-interceptors

Angular 2 built in Modules

HttpModule
BrowserModule
FormsModule
RouterModule
JsonPModule

LINKS

https://angular.io/docs/ts/latest/

Angular 2 built Features Managing

RX
Deep Linking
Decorators
Injectors
Directives
Lazy Loading
Parent Child communication

Lazy Loading
https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee#.u7bf18nbe

RX Reactive

Decorators -> Annotation Interceptors

support AOP annotation interceptors by using A2 decorators

http://stackoverflow.com/questions/41044425/custom-angular2-decorators-for-creating-
urlsearchparams
http://myrighttocode.org/blog/typescript/angular2/decorators/angular2-custom-decorators
http://stackoverflow.com/questions/39750250/angular-2-custom-annotations

Injectors -> Singleton

ViewChild

http://learnangular2.com/viewChild/