Skip to main content

Going back to Angularjs 1

In general, Angularjs1 works in 2 phases :-

a) Configuring

b) Binding / Runtime

During the configuration phases, Angular has concepts like module, controller, services, providers and components (ui components)

Typically we worked with App -> Controller -> Services / Factory etc

Why use Factory and Value recipes? 

Long, long time ago, we have factory and we have values recipes. These becomes the cornerstone for laying down other components in angularjs (again we are repeating ourselves - module, controller, services, providers and components (ui components)

Because Angular injects various dependencies.

Factory recipes allows :-

- Lazy initialization
- Leverage on other services from a module or modules
- Service initialization

Value recipes is something like a key value pair that gives key / value definition for data-binding in angularjs.

Example of value recipes are as follows :-

var myApp = angular.module('myApp', []);
myApp.value('valueType', 'TestApi);

Provider = $get

Service instance are singleton in Angularjs

Angular Directives 

What the heck is angular directives. Good exmples would be html element types that you laid down on your html mark up like ngmodel, ngbind.

Also note that  the following means the same thing, ng-model

1. ng-bind
2. ng:bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind

Directive 'restrict' options that is available :-

  • 'A' - only matches attribute name
  • 'E' - only matches element name
  • 'C' - only matches class name
  • 'M' - only matches comment

Angular Decorators


Angular bootstrapping processes -> module loading, walking through the DOM and then

Only One Ng-App 

You cannot have more than on ng-App in your application.

What happens when Angularjs bootstrap?

  • load the module associated with the directive.
  • create the application injector
  • compile the DOM treating the ngApp directive as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an Angular application.
A simple example of Angularjs directive can be found here.


$compile is used when you trying to rebind (adding behaviour, events) or other dynamic content or template into an existing controller. In other words, say you created a static directive and then loads it  in to DOM. If you wanna make any changes to its behaviour, you can't. This is where $compile comes in.

Take a look at the example here.


$observe - is for observing attribute. It only available from attribute level, $watch is available in the scope level. Only if there are changes in the attribute level, events associated with a watch gets fired away.

For a quick example, click here.


Popular posts from this blog

Android Programmatically apply style to your view

Applying style to your view (button in this case) dynamically is pretty easy. All you have to do is place the following in your layout folder (res/layout)
Let's call this file : buttonstyle.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=""> <item android:state_pressed="true" > <shape> <solid android:color="#449def" /> <stroke android:width="1dp" android:color="#2f6699" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#449def" a…

DataTable does not have AsEnumerable

I have problem locating my AsEnumerable extension method in my DataTabe (System.Data). Thank god for this post by Angel

I was able to find this method once i have added reference to the following assembly.

C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Data.DataSetExtensions.dll

Try to do a dummy Build and you should be able to get it.

OpenCover code coverage for .Net Core

I know there are many post out there getting code coverage for .dotnetcore. I'm using opencover to address this needs.

In case, you do no want to use opencover and wanted to stick with vs2015 code coverage, you can try to copy Microsoft.VisualStudio.CodeCoverage.Shim.dll from C:\Program Files (x86)\Microsoft Visual Studio 14.0\Team Tools\Dynamic Code Coverage Tools\coreclr\ and drop it into your project "bin\Debug\netcoreapp1.0" folder.  Please note : you need to be on VS2015 Enterprise to do this. 

To get started, I guess we need to add OpenCover and ReportGenerator for our test projects, as shown in diagram below :-

When nuget packge gets restored, we will have some binaries downloaded to our machine and we going to use this to generate some statistics. I think the biggest issue is to getting those command lines work.

In dotnetcore, we run test project using "dotnet test" (assuming you are in the test project folder - if not please go there)  So we add this …