angular js for enteprise application
TRANSCRIPT
Contents• I. AngularJS Overview
• II. AngularJS for Enterprise Application
Story in client side• Simple story with todo –app
• Show active tasks• Mark completed/undo• Show remain tasks• Filter active/completed
• How to do with ajax and jQuery?• $(‘.list-todo .list’).append(htmlTodoList)• $(‘.list-todo .remainCount’).text(count)• $(‘.list-todo .task’).css(‘completed’);• What happend if you need show todo-list for two people
on same screen?• What happened if design said that they want have a class
named as list-item because they already have that class
Philosophy
• “AngularJS lets you extend HTML vocabulary for your application”
• ”AngularJS is built around the philosophy that declarative code is better than imperative code while building UIs and wiring different components of web application together.”
Key Features• Templates• Data-binding : Synchronize data between view and model
• $apply and $digest
• Scope: a glue between controller and view.
• Controller: bound to a particular scope.
• Directives: • AngularJS has built-in directives (ngBind, ngModel...)• Component
Key Features• Routing − It is concept of switching views.
• Deep Linking
• Dependency Injection
• Services• Built-in services for example $http to make a XMLHttpRequests. • Custom service or factory
• Filters
MVC in AngularJS Application• MVC in MVC
• Form include user controls in Window
Component detail
• Bindings• Controller• Template
Component-based Applications
Write app with your vocabulary!
Angular cons• Page rendering heavily in browser
• not a great fit for use cases with more than 2,000 bindings• One-time bindings with ::fieldname
• SEO• Google crawlers support JS from 2014• Prerender.io
• Difficulty in learning: New concepts such as scope, binding, factory, provider…
II. Enterprise Angular Application• Angular 1 or Angular 2• Style Guide• Application Structure• UI Components• Component communication• Router
• Localization• Validation• Cache, Storage• Unit test and E2E testing• Versioning• Minification & Bundle
Angular 1.x or Angular 2• Third party
• TypeScript
• Typing
• Your team
• Your project
- Performance- Mobile support- Component based required- MVC- Less concepts: Scope,
controller,…
Style Guide• Google: https://
google.github.io/styleguide/angularjs-google-style.html
• John Papa: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
• Minko Gechev: https://mgechev.github.io/angularjs-style-guide/
• …
• Chose one and keep your team follow
Application Structure
Folders-by-Module Folders-by-Feature Structure
UI Component• AngularUI
• Bootstrap UI
• Angular Material
• Commercial component• Telerik, Infragistic…
• Open source libs• Ng-modules, github• Stable, rate, commit date
Component communication• Binding properties
Oneway or two-way Static value Watch property
• Broadcast/Emit Event On scope or rootScope Destroy event
• Shared Service/Data Via get/set pattern Control shared data via methods
Router• Default
o Simpleo Light weight
• ui-router• Multi level • Multi partial layout
• Resolve
• Parameter
Localization
• Translate by directive• <ANY translate="TRANSLATION_ID"></ANY>
• Translate service
• Use filter• <ANY>{{'TRANSLATION_ID' | translate}}</ANY>
• Loader• Config translation • staticFilesLoader• urlLoader• Partial loader• Custom Loader
$translate('HEADLINE').then(function (headline) { vm.headline = headline;})
Validation
• Built-in validation• Custom validation• Modify build-in validation
Cache & Storage• Cache
• Expire Policy: By time, callback• Mode: Memory, Session or Storage• Put it in http request
• Storage• Local Storage• IndexDB• Cookie
Testing Karma (Unit tests)
Jasmine Mocha, Chai, and Sinon Spec files, config karma files Inject, mockup
• Protractor (E2E tests)
Minification, versioning and bundle• Minification
• Dependence Injection• Global JS var
• Bundle• Gulp-watch• Gulp-concat• Gulp-order• Gulp-print• Handle debug/production test/release mode• Config in each mode for your
• Versioning• Gulp-rev, gulp-rev-replace• Write your own version service manager
Demo code• component
• Filter list
• Authentication
• Router
• Validation
• Storage
