AngularJS Overview with MVC model, feature list Apply AngularJS in Enterprise Application cover most enterprise concerns: 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

1. AngularJS for Enteprise Application
Vũ Văn Quyết @StoxPlus Corporation
QuyetVV@gmail.com
27-10 .Net Open Group

2. Contents
• I. AngularJS Overview
• II. AngularJS for Enterprise Application

3. 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

4. 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.”

5. 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

6. 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

7. MVC in AngularJS Application
• MVC in MVC
• Form include user
controls in Window

8. Component detail
• Bindings
• Controller
• Template

9. Component-based Applications
Write app with your vocabulary!

10. 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…

11. 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

12. 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,…

13. 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

14. Application Structure
 Folders-by-Module
 Folders-by-Feature Structure

15. UI Component
• AngularUI
• Bootstrap UI
• Angular Material
• Commercial component
• Telerik, Infragistic…
• Open source libs
• Ng-modules, github
• Stable, rate, commit date

16. 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

17. Router
• Default
o Simple
o Light weight
• ui-router
• Multi level
• Multi partial layout
• Resolve
• Parameter

18. 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;
})

19. Validation
• Built-in validation
• Custom validation
• Modify build-in validation

20. Cache & Storage
• Cache
• Expire Policy: By time, callback
• Mode: Memory, Session or Storage
• Put it in http request
• Storage
• Local Storage
• IndexDB
• Cookie

21. Testing
 Karma (Unit tests)
 Jasmine
 Mocha, Chai, and Sinon
 Spec files, config karma files
 Inject, mockup
• Protractor (E2E tests)

22. 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

23. Demo code
• component
• Filter list
• Authentication
• Router
• Validation
• Storage