Modules in Angular JS

Hi Friends,

Now in this section we’ll see how modules can actually be used to create other things like controllers, routes, factories and services, and then how all this fits together.



so, basically the above diagram is the simplified version of angular that how angular really fits different things together to produce a big picture. So, a module can have something like config function and which in return is used to define different routes. Now routes again are really important from the SPA perspective because if we have different views and those views need to be loaded into the shell page then we need some mechanism to understand what route we’re on and what view that’s associated with and then what controller goes with that view.

so, here in this case we need to understand this fact that modules basically act as containers as shown below in the diagram.


Now,here is a module object say angular.module – and from this module we can configure the routes, create custom filters, custom directives. we can get data from different sources using Factories, Services, Providers or Values. we can then even create Controllers using the module. So, basically modules act as really just an object container.



so, as you can see in the code snippet above, i have declared the module name @ the top of the page in “<html data-ng-app=”basicApp”>” so that my page will come to know about the module being invoked. later on the module’s body is being declared at the bottom section of the page. also, you could have noticed that we have created our controller in the module itself and the same has been called with “data-ng-controller=”basicController”“.

So, in the next section we’ll see Routes and Factories. Till then stay tuned and Happy Coding.

Happy Coding

1,943 total views, 1 views today

Views, Controllers and Scope in Angular

Hi friends,

In this section we will see that how Views, Controllers and Scope are tied together. Scope is basically another term for ViewModel. In angular, we term it as scope. If i have to summarize scope, it’s basically a pipeline between view and controller. The way it works like we have a view, so instead of maintaining the in memory objects in there in the view, we will have one controller which will be injected in the page, and with this scope, we will fetch the data from the controller. So, it’s a basically nice separation which is required indeed because it will promise maintainability and test-ability of the code.

The glue between the View and the Controller is called the Scope, and in Angular we’re going to see a lot of objects  that start with $. $scope represents the scope object. Frankly speaking, Views really don’t know anything about the controller and vice versa. But, when it comes to the data association, there should be a medium so that data can be transferred that is termed as scope here. we’ll see that view can know about the controller by using the directive @ the top of the page.

Creating a basic Controller


You’ll notice here in the parameter signature we pass $scope. This is dependency injection that’s built into AngularJS. What is going to happen is it will automatically inject a scope object in. and on the top of that you can add different kinds of properties in there.

so, when this controller gets initialized, the scope gets automatically passed in. so, basically when you see the below snippet i have called the controller explicitly by using data-ng-controller attribute so that controller gets initialized and then in the ng-repeat directive I looped in the property name which i made using $scope object, in this case it is $scope.employee. Also, i have retained the filtering option. so you can see that both the directives are working simultaneously.

angular13 angular14 angular15



Now, in the next section we will see that how to use Modules, Routes and Factories. Till then stay tuned.

Happy Coding

1,124 total views, no views today

Angular unleashed

As mentioned already, in my last blog that Angular is really a full-featured SPA framework. It performs various operations underneath. Some of the basic operations like

Two-way data binding.
Routing of the Views.
DOM manipulation jQLite is built-in which is kind of lighter version of jQuery. However, if you want to use more advanced stuff you can even use jQuery in here.
History’s built in. We can share code through factories and services and other things.

So, to get started we, will be starting the same from From here, we will do download the required angular.js or minified version of the same file and use the same for later developments

The very 1st thing which we are going to discuss here is talk about



So, once we have grabbed the script as shown below in our web page. so, now we can start with Directives, Filters and Databinding


so, basically directives are a way to instruct about Angular or in short they teach HTML New tricks.

so, in the below snippet I have used basic built in Directives just to print whatever is getting typed in input text box.



we have used ng-app at the top of the page. we use  ng- to instruct that it is  Angular directive. It’s a built-on directive. we can also write custom directives.

This particular directive is very important because the script that’s now loaded at the bottom of the page which will initialize the Angular app.

So for example, this is an example of another directive called ng-model.
What ng-model does is behind the scenes it’s going to add a property up in the memory called “name” into what’s called “the scope”. This is like a ViewModel as in Knockout. what this is really doing behind the scenes is making an empty ViewModel but then filling it with a name property. Now if I want to write out that value then I can simply come over and add a data binding expression. Now, in angular databinding expression is always wrapped in between {{data-binding expression}} .

angular4 angular5

so, as you see in the above demo, whenever am typing in any input in the textbox that is coming as it is in the databinding expression. Let’s trick this a bit and let’s do one more demo with input type = password and then try what it takes out. again the same output will appear as shown below.


since, am using the Visual studio editor, so in order to get rid of little warning kind of thing on every ng- attribute, am going to prefix the same with data-ng- attribute and this will take out the little warning like shown below.



Now, lets try looping in a set of data or ViewModel with ng-repeat directive.



so, basically data-ng-init=”names=[‘Rahul’,’Sahay’,’Bob’,’Walter’,’Charles’]” is in memory collection of names and this one <li data-ng-repeat=”loop in names”>{{loop}}</li> is going to loop through each names container and take out and print one by one as shown below.



so, as you can notice that earlier binding is also working properly. Likewise, we can go ahead and test many other cases. same can be referred on the link

Now, next thing is how to use filters. Filters are again very useful tool to get the output in a precised manner. we use this using “filter” keyword and separates the directives using symbol like “|” .

angular10 angular11


Now, in the next session we will see how to use Views, Controllers and Scope in conjunction. Till then stay tuned.

Happy Coding

1,404 total views, no views today