After working with Angular for a bit on a project, I wanted to write something to help me solidify in my head the principles and patterns behind Angular JS.
Once you navigate to a url, routing component finds a view and a controller, both usually configured in a module configuration method. As part of controller creation new scope object is passed into its constructor. Controller is responsible for manipulating the scope by using its own logic and any services it depends on. Services are injected into controller’s constructor as well. So, key components of the typical screen creation are: view, controller, scope and any services. It is important to understand that if you navigate to a different view, then back to the original view, new instance of a controller will be created along with a new scope. However, service is implemented as a singleton in Angular, so the same instance of the service will be passed in. Hence, if you want to retain the state of a screen through navigation, you can persist some small amounts of data in the service. Alternatively, you could use rootScope object that is exposed in Angular. My preference now is to use a service, primarily because of my aversion to global variables.
It is also important to keep UI manipulation out of controller, as UI manipulation will break testability aspects of the controller. If you would like to manipulate HTML DOM, you should use directives. They offer functionality needed to create powerful and reusable UI manipulation components. if you need to manipulate the data itself in order to present it to the user, you should use filters, not controllers. They again offer a reusable way to create custom presentation of your data.
If you would like to see a mapping between Angular and XAML components, here is how I see that.
|Component and its role||XAML||Angular|
|View||XAML control||HTML view|
|ViewModel||ViewModel class, exposing methods and properties, including one property for the model. It will need to implement INotifyPropertyChanged as well.||Scope ($scope) object|
|Controller||Puts view and view model together. Likely called from the menu navigation or custom navigation||Controller is responsible for populating the scope (view model) with properties and methods and wiring services to provide the data layer. Also usually called from navigation.|
|UI manipulation||ViewModel through data binding, behaviors, and Visual State Manager||Directives|
Let me know what you think.