Angular js Best Practices presentation notes - misko
Youtube here
Useful best practices and insights especially 9 and 10
angularjs team believes in "configuration over construction" like RoR
"don't fight the html, extend it" - augment the html vocabulary using directives, html as a DSL which you can extend
- Use a bootstrap project. angular/angular-seed on github exists to bootstrap an app (you copy and run with it) BUT yeoman.io is recommended now
- script files just before the body
- angulars modules configure the injector and how objects are created; requirejs deals with how scripts tags are loaded into the browser only done once
- If you use something like require js then you must manually bootstrap angular e.g. angular.bootstrap()
- wrap callbacks for 3rd party api into $apply
- flash of unstyled content momentarily; caused because browser renders before angular. Options:
- ng-cloak on <body> but this will show nothing until angular runs
- a better options is to use ng-bind on the index.html only (just first page load since thats only where this could happen) and minimally since you want as much as the page to appear as soon as possible
- use proper annotation for fn and params when using minification because DI uses reflection
- don't fight the html, extend it
- 4 ways to include directives on your page
- prefix your directives e.g. myapp-component
- if supporting IE8 and below then use <div myapp-component>
- optionally can be valid with <div data-myapp-component>
- separate presentation from business logic
- easier to understand a controller since no rendering
- easier to test
- do not do DOM manipulation in Controllers
- Controllers are controlled with "what should happen if user does X", "where do I get X"
- every time you navigate to view you get a new instance of the Controllers; they're per view
- Services are singletons; good use case if you need to share across controllers OR for the lifecycle of the app. Services are more concerned with "Do operation X"
- Scope
- View scope should be read only; only reading from scope models, not writing
- Controller scope is write only; only writing into the scope models
- the purpose of scope is to refer to the model, not to be the model; you create the model classes and put them into the scope e.g. if you have a form you should have a form model with properties on it for the inputs
- scope references the model; should always have a dot in ng-model; if you don't have a dot then you're doing it wrong; (aka don't bind directly to scope properties)
- ...but I'd note you can put functions as well as models in $scope
- $watch getter function must be fast because called often; must always return the same result
- modules
- one module per app
- prefer to group by feature because controllers, services, views are often related e.g. login and registration, checkout etc.
- or prefer to breakup app by view (in future may be lazy loaded)
- performance
- develop with non minified code; deploy with minified
- use gzip
- make index.html non cacheable
- cache by version: js code, css, html
More from others
- "it is considered bad form for two controllers to share information via $scope inheritance" -- http://onehungrymind.com/angularjs-sticky-notes-pt-1-architecture/ A service should be used to share data between controllers instead.
Angular waits for DOMContentReady event and then looks for ngApp.
Comments
Post a Comment