Introduction to Angular JS ~ is a programming blog which focused on Web Programming and development

Wednesday, 11 May 2016

Introduction to Angular JS

02:43:00 Posted by raviteja swayampu , No comments


In this article we are going to learn about basics of angular programming.We are going to teach complete Angular JS in step by step manner.The main objective of this is to learn about angular and how it helps us to create more flexible applications, maintainable and testable web applications without comprising productivity factors.

What is Angular JS

Angular JS is a light weight java script framework that used to create web applications (Single page Applications) in a structured manner (In MVC pattern).It is best suited for creating Single page applications that used HTTP service like RestFul services.It uses MV pattern (Model View).we can also say that MVVM.

Note: Using Angular does not mean not to use Jquery we can also use Jquery in our application.Angular also internally uses lite version of jquery "JQLite".Some developers might think that Angular is only for Single page application.It is not true we can also use it in any applications if that applications demands use of Angular.But ,Angular is best suited for SPA's(single page applications).The code in Angular is structured that not like in Jquery.

Angular Advantages

The main advantage of Angular is Separation of Concern. It is one of the good thing about Good architectured applications.In Angular framework the view is a plain HTML DOM code.Controller are the java script classes and Models objects data is stored in Controller objects.These Models in Angular represents the business logic code like in Controllers in ASP.NET MVC. And this business logic is used by Views to display.Here, Controllers are responsible for data manipulation between Models and Views.
The above diagram represents the strict Model View Controller architecture.But, Angular is not really strict.We can say that Angular fits to MV(Model View).Even some developers say that it is more than fits to MVVM. It depends on how we are using it.But , we can say that Angular does not provide great separation of concern but it is flexible enough to take the architectural approach.

Contents of Angular

An Angular application mainly contains Controllers,Models and views.Here View are plain HTML that take care of displaying data to user and acting to user actions.Controller will take care of all communication between server and client(Actually this communication is done by services which are part of Controller).These Controller and views are communicates by using a shared object called $scope .

For larger applications data communication is done between server and client using Angular services.Later we will know about services in Angular.These services are reusable in the angular application.

The other components Filter and directives.Filters are used to filter the data coming from services.Angular provides large number of filters as predefined to filter data.directives are extends the HTML attributes functionality by creating custom attributes to HTML Markup.

small Definition about Angular Componets

We will learn about every component of Angular in detail in future articles.For now just take a look briefly about components.
  • Views: Views are plain HTML containing html tags along with angular specific tags.
  • Controllers: Controller is a javascript class that contains all  business logic that used by Views.
  • Models: Models are the java script entity objects that contains data.
  • Services: Services are classes that contains reusable code.(That actually communicates with server)
  • Filters: filters are used to filter the data.
  • Directives: Angular directives are the mechanism that extend the functionality of HTML markup by creating new attributes.
I think you got some basic idea of why we are learning angular js. In next tutorial we are going to learn how to setup Angular in ASP.NET MVC web application. 
click below links  for new tutorials in Angualar
I think you got some basic idea of angular through this tutorial.If you recommend any modifications please comment.Please subscribe to on facebook and twitter to get daily tutorials and code samples.


Post a Comment