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

Posted in AngularJS | Leave a comment

Enterprise Library – StringLengthValidator [Validation Attribute] is not an Attribute Class

If you are trying to use Enterprise Library 5.0 Validation Application block and are seeing an error in visual studio when you add the StringLengthValidator attribute to a property you want to be validated then you need to add a reference to System.ComponentModel.DataAnnotations assembly to your project. This is needed in addition to the Mircrosoft.Practices.EnterpriseLibrary.Validation assembly you would normally add. This is mentioned in the Enlib 5.0 Breaking changes.
“If you used validator attributes in your code you must now reference the System.ComponentModel.DataAnnotations assembly.” Too bad I didn’t read it and spend quite some time figuring this out. The System.ComponentMode.DataAnnotations namespace gives access to attribute class that are used to define the metadata for the validators.

Posted in Uncategorized | Leave a comment