Concepts while working with Angular JS Application

Share this article

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 `Module.run` 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" >
<head>
<title>AngularJS Demo – Dot Net Stuff – Angular JS Tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<script>
var myApp = angular.module("exampleApp", []);
myApp.controller("dayCtrl", function ($scope) {
// controller statements will go here
});
</script>
</head>
<body>


AngularJS App

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

</body>
</html>

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

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.

Preparing the Example Project

AngularJS App

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

Recommended Articles!