AngularJS Best Practices (Public) (1)
-
Upload
firdaus-hayabusa -
Category
Documents
-
view
387 -
download
5
description
Transcript of AngularJS Best Practices (Public) (1)
![Page 1: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/1.jpg)
![Page 2: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/2.jpg)
Best Practices
![Page 3: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/3.jpg)
Directory Structure
• Do you need it?o Not really, but...
o Why invent the wheel when you can generate?
o Working with others
o Not forgetting important components
• Use what is there:o Yeoman
o angular-seed
![Page 4: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/4.jpg)
ZEN
Use DI for everything
![Page 5: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/5.jpg)
Script Loading
• Options:o <script> tags at the bottom
ng-app bootstrap builtwith.angularjs.org
o AMD (such as require.js) manual bootstrap
![Page 6: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/6.jpg)
ZEN
Wrap callbacks for 3rd party API into $apply
![Page 7: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/7.jpg)
Flash of Unstyled Content
• Issue: User will see {{}} on index.html
• Solution:o hide it with ng-cloak directiveo use ng-bind instead of {{interpolation}}
![Page 8: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/8.jpg)
Minification and Compilation
• Do you need it?o Angular apps are smaller already
• Minification is an issue because...o Angular views use reflection to access model data.
basic minification only (no property rename)o Dependency injection uses reflection to assemble
the application Use proper annotation.
• Never compile angular.min.js (it's already compiled)o We are working on better jscompiler support
![Page 9: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/9.jpg)
ZENDon't fight the HTML, extend it
![Page 10: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/10.jpg)
Templates
• Extend your HTML and turn it into DSLo <my-component>o <div my-component>o <div class="my-component">o <!-- directive:my-component -->
• Use a prefixo <my-component>o <my:component> o broken on IE so use: <div my-component>
• Optionally make it valido <div x-my-component>o <div data-my-component>
![Page 11: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/11.jpg)
ZEN
Separate presentation and business logic
![Page 12: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/12.jpg)
Structuring Business Logic
• Controllerso should not reference DOMo should have view behavior
What should happen if user does X Where do I get X from?
• Serviceso should not reference DOM (mostly)o are singletonso have logic independent of view
Do X operation
PS: Do put DOM manipulation in Directives
![Page 13: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/13.jpg)
ZENTreat scope as read-only in
templatesTreat scope as write-only in
controllers
![Page 14: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/14.jpg)
Scope
• Treat scope as read-only in templates & write-only in controllerso The purpose of the scope is to refer to model not to
be the model.o The model is your javascript objects
• When doing bidirectional binding (ng-model) make sure you don't bind directly to the scope properties.o unexpected behavior in child scopes
![Page 15: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/15.jpg)
ZEN
The $watch getter function
must always be fast & idempotent
![Page 16: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/16.jpg)
Structuring modules
• Why multiple modules?
• Usually one module for application
• One module per third-party reusable library
• Possibly for testing o create test modules which override services
(mocks ngMock)o test portion of the app (*)
• Possibly for incremental code loading
• If you have multiple modules per appo Group by functionality / feature not by typeo You should group by view since views will be lazy
loaded in near future
![Page 17: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/17.jpg)
ZENDevelop with non-minified libraries
![Page 18: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/18.jpg)
Deployment Techniques
• minify and concatenate your JS
• gzip enable your server
• index.html (non-cachable)
• cache by version:
o views
o code
o images
o css
![Page 19: AngularJS Best Practices (Public) (1)](https://reader035.fdocuments.in/reader035/viewer/2022062719/55cf9d04550346d033abe8ed/html5/thumbnails/19.jpg)
Q&A