Notes from AngularJS MTV Meetup (2012)

I recently started playing with angularjs and am really excite about it. I am currently watching video tutorials on plural sight and youtube about it and want to document my notes for my own reference.

Here is the link to the Angular JS Meetup Video

Best Practices
—————-

Directory Structure
——————-
Angular-seed
– sets up a directory structure
– app/test/etc folder structure

Yeoman
– strongly recommended
– dynamic directory structure
– commands to add/remove controller, manage dependencies, etc

Dependency Injection
———————
– Embrace it
– Core of angular

Script Loading (2 options)
————————–

– script tag (synchronous bootstrapping)
– put at bottom

– require js (async)
– we can’t use ng-app with async loading
– we have to use angular.bootstrap(document, [‘myApp’]);

Flash of UNstyled COntents
– user can see {{}} before angular kicking in
– use ng-cloak on body (good but has a delay)
– use ng-bind (recommended at least on the index.html)

Minification and Compilation
—————————-
– dom manipulation is minimum in angular already
– renaming minifier will break binding
– Talked about DI related stuff with renamin ( search for DI on angularjs.org)
– don’t recompile angular.min.js – its already good

Extend HTML
———–

Ways to use your directives
– <my-component>
– < div my-component >
– <div class=”my-component”>
– <!– directive:my-component –>

Use a prefix
<my-component>
<my:component>
broken on IE so ier <div my-component>

Optionally Make html valid
– <div data-ng-DIRECTIVEHERE>

Separate Presentation and Business Logic
—————————————-

– controllers
– should not refer to DOM
– controller should have the behavior of the view
– what should happen if user does X

– Service
– Should not reference DOM
– singleton
– have logic independent of view
– Do x opertaion

– Put DOM manipulation in Directive

scope
—–

– from controllers point of view, scope should be write only
– from views perspection, scope should be readonly

– scope is not the model, it refers to a model
– model is your js object

– when doing bidirectional binding (ng-model), don’t bind directly to the scope properties dues to unexpected behavior in child scopes
– whenever you have ng-model the value of it should have a . in it 🙂

$watch/ dirty checking
———————-

– should be fast and idempotent

Structuring modules
——————-
– create modules by feature
– may be for creating modules for testing configuration
– can use for lazy loading of parts of the app. modularize by view.

Develop with non-minified version
———————————
– not fun to try to read mangled names and meaningless line numbers

Deployment Techniques
———————-
– minify and concatenate your JS
– gzip enable your server
– index.html (non-cacheable) – allows you to change the versions of the js libs
– cache by version:
– view
– code
– images
– css

Research to do for myself
————————-

– scope events – use for decoupling components
– $watch
– ng-include