Angular js for enteprise application
-
Upload
vu-van-quyet -
Category
Technology
-
view
92 -
download
0
Transcript of Angular js for enteprise application
![Page 2: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/2.jpg)
Contents• I. AngularJS Overview
• II. AngularJS for Enterprise Application
![Page 3: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/3.jpg)
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
![Page 4: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/4.jpg)
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.”
![Page 5: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/5.jpg)
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
![Page 6: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/6.jpg)
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
![Page 7: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/7.jpg)
MVC in AngularJS Application• MVC in MVC
• Form include user controls in Window
![Page 8: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/8.jpg)
Component detail
• Bindings• Controller• Template
![Page 9: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/9.jpg)
Component-based Applications
Write app with your vocabulary!
![Page 10: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/10.jpg)
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…
![Page 11: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/11.jpg)
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
![Page 12: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/12.jpg)
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,…
![Page 13: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/13.jpg)
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
![Page 14: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/14.jpg)
Application Structure
Folders-by-Module Folders-by-Feature Structure
![Page 15: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/15.jpg)
UI Component• AngularUI
• Bootstrap UI
• Angular Material
• Commercial component• Telerik, Infragistic…
• Open source libs• Ng-modules, github• Stable, rate, commit date
![Page 16: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/16.jpg)
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
![Page 17: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/17.jpg)
Router• Default
o Simpleo Light weight
• ui-router• Multi level • Multi partial layout
• Resolve
• Parameter
![Page 18: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/18.jpg)
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;})
![Page 19: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/19.jpg)
Validation
• Built-in validation• Custom validation• Modify build-in validation
![Page 20: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/20.jpg)
Cache & Storage• Cache
• Expire Policy: By time, callback• Mode: Memory, Session or Storage• Put it in http request
• Storage• Local Storage• IndexDB• Cookie
![Page 21: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/21.jpg)
Testing Karma (Unit tests)
Jasmine Mocha, Chai, and Sinon Spec files, config karma files Inject, mockup
• Protractor (E2E tests)
![Page 22: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/22.jpg)
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
![Page 23: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/23.jpg)
Demo code• component
• Filter list
• Authentication
• Router
• Validation
• Storage
![Page 24: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/24.jpg)
![Page 25: Angular js for enteprise application](https://reader034.fdocuments.in/reader034/viewer/2022042723/58eebed71a28ab23448b46b1/html5/thumbnails/25.jpg)