Dot Net Stuff

Concepts while working with Angular JS Application

As we know AngularJS applications follow the MVC pattern. But while developing Angular JS Application it requires a wide range of building blocks. There are, of course, the headline building blocks—the model, the views, and the controllers—but there are lots of other moving parts in an AngularJS app as well while developing Angular JS application which includes modules, directives, filters, factories, and services. During development you use these smaller components to flesh out the bigger MVC pattern.

The different types of AngularJS component are tightly integrated, and to demonstrate one feature, Understanding the structure of an Angular JS application is very important. Because we will often have to use several others. In this article we will learn several concepts which allow us to develop applications with AngularJS as well as reshape your application using different building blocks as the functionality grows and becomes more complex.

We will try to understand the broader AngularJS environment, written from the perspective of the top-level component: the module. This article also explain the different roles that modules play in an AngularJS application, show you how to create them, and demonstrate how they act as gateways to the major AngularJS features that you will come to know. Since, we are going to learn several concepts. That’s why I have broken this article into several small article. Which allow us to easily understand several Angular JS features and concepts. Following are the list of articles.

Problems Solutions
Create an AngularJS module. Use the angular.module method.
Set the scope of a module. Use the ng-app attribute.
Define a controller. Use the Module.controller method.
Apply a controller to a view. Use the ng-controller attribute.
Pass data from a controller to a view. Use the $scope service.
Define a directive. Use the Module.directive method.
Define a filter. Use the Module.filter method
Use a filter programmatically. Use the $filter method.
Define a service. Use the Module.service, Module.factory, or Module.provider method.
Define a service from an existing object or value. Use the Module.value method.
Add structure to the code in an application. Create multiple modules and declare dependencies from the module referenced by the ng-app attribute.
Register functions that are called when modules are loaded. Use the Module.config and methods.

Preparing the Example Project

Let’s create an example project which will use throughout this article as well as the other tutorials which is related to this article. Create an HTML file called example.html and set the content to match above mentioned listing.

<!DOCTYPE html>
<html ng-app="exampleApp" >
<title>AngularJS Demo – Dot Net Stuff – Angular JS Tutorial</title>
<script src=""> </script>
var myApp = angular.module("exampleApp", []);
myApp.controller("dayCtrl", function ($scope) {
// controller statements will go here

Today is {{day || "(unknown)"}}

</body> </html>

Save this html file and open in browser you will see following output.

Concepts while working with angular js

Summary: You should read above mentioned articles in order to completely understanding to developing an Angular JS application. This article is divided in to pieces of tutorials in order to understand easily. The next tutorial suggested to continue this article is create an AngularJS module. I hope you will like this article and find it useful.

Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus