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.

angular16

 

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.

angular17

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.

angular18

 

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.

Thanks,
Rahul
Happy Coding

1,810 total views, no 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

angular12

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.

Thanks,
Rahul
Happy Coding

1,044 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.
Model-View-Controller.
Routing of the Views.
Testing.
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 http://angularjs.org. 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

 

angular1

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

angular2

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.

angular3

 

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.

angular6

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.

angular7

 

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

angular8

 

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.

angular9

 

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 http://docs.angularjs.org/api

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.

Thanks,
Rahul
Happy Coding

1,294 total views, no views today