Download to read offline
Uploaded byvu van quyet
Angular js for enteprise application
The document provides a comprehensive overview of using AngularJS for enterprise applications, covering key features like templates, data-binding, and MVC architecture. It discusses the pros and cons of AngularJS, including difficulties in learning and performance issues, while also highlighting best practices like style guides and application structure. Additional topics include component communication, routing, localization, validation, and testing, alongside examples of demo code for building applications.
Angular js for enteprise application
- 1. AngularJS for EntepriseApplication Vũ Văn Quyết @StoxPlus Corporation QuyetVV@gmail.com 27-10 .Net Open Group
- 2. Contents • I. AngularJSOverview • II. AngularJS for Enterprise Application
- 3. Story in clientside • 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 letsyou 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 AngularJSApplication • MVC in MVC • Form include user controls in Window
- 8. Component detail • Bindings •Controller • Template
- 9. Component-based Applications Write appwith your vocabulary!
- 10. Angular cons • Pagerendering 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 AngularApplication • 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 orAngular 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 • Bindingproperties 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 oLight weight • ui-router • Multi level • Multi partial layout • Resolve • Parameter
- 18. Localization • Translate bydirective • <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 (Unittests) Jasmine Mocha, Chai, and Sinon Spec files, config karma files Inject, mockup • Protractor (E2E tests)
- 22. Minification, versioning andbundle • 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
Editor's Notes
- #4 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
- #5 Imperative programming A programming language that requires programming discipline such as C/C++, Java, COBOL, FORTRAN, Perl and JavaScript. Programmers writing in such languages must develop a proper order of actions in order to solve the problem, based on a knowledge of data processing and programming. Declarative programming A computer language that does not require writing traditional programming logic; Users concentrate on defining the input and output rather than the program steps required in a procedural programming language such as C++ or Java. Declarative programming examples are CSS, HTML, XML, XSLT, RegX.
- #6 Directive: markers on DOM elements (such as elements, attributes, css, and more). Component: a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.
- #7 Deep Linking − Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state. Model View Whatever − MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model View Whatever. Dependency Injection: AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.
- #8 Model is where the application’s data objects are stored Controller is the decision maker and the glue between the model and view. View: what's presented to the users and how users interact with the app.
- #9 Advantages of Components: simpler configuration than plain directives promote sane defaults and best practices optimized for component-based architecture writing component directives will make it easier to upgrade to Angular 2 When not to use Components: for directives that need to perform actions in compile and pre-link functions, because they aren't available when you need advanced directive definition options like priority, terminal, multi-element when you want a directive that is triggered by an attribute or CSS class, rather than an element https://docs.angularjs.org/guide/component
- #20 Angular provides basic implementation for most common HTML5 input types: (text, number, url, email, date, radio, checkbox), as well as some directives for validation (required, pattern, minlength, maxlength, min, max). https://plnkr.co/edit/zNF3ZopeZHiel1TOpHpY?p=info
- #24 file:///D:/Code/angular-slide-example/todoapp/index.html http://localhost:6070/#/login Compilation, $Q, interceptor