Post
Ask Question

AngularJS First Application: Part 1

Before to start creating an Application, We need to go threw very basic things about AngularJS.

Actually what is AngularJS ?

AngularJS, Which was built by Google in 2009 by Adam Abrons and Misko Heverym, who was engineers in Google at that time. AngularJS is basically an open source web development framework which is helpful for creating both front end and testing easier development for web developers. The main goal of AngularJS is to elongate web applications with MVC (Model-View-Controller) capability. It is a client side JavaScript MVC/MVVM framework, that is very extensible and also work great with other libraries.

You even can change or modify it’s every feature as per your need. As per the official website it is “Structural framework for dynamic web apps” which is best suited to a single page client side application which only required JavaScript, CSS and HTML. It allows you to expand HTML's syntax in order to express the components of your web application neatly and concisely. AngularJS helps you structure your JavaScript code better and makes it easy to test.

Let’s create a structural syntax for AngularJS application…

Before that one important thing I want to tell, If You are not able to access [ng-*] attribute in your html application then please Update your [commonHTML5Types.xsd] file with the latest one, which link you can find below

http://madskristensen.net/posts/files/2013%2f2%2fcommonHTML5Types.xsd

And replace it with existing commonHTML5Types.xsd, you can find this file at following path

C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\Packages\schemas\html\

Now let’s move ahead...



Snapshot -1

Here in the above snapshot we can see the AngularJS syntax. Now we use some attributes (ng-app, ng-controller) which extends HTML elements also known as directives, and these directives prefix with (ng-). Let’s take a quick view on that.



Snapshot – 2

As you can see in above snapshot there are some circle areas. And I even mentioned steps which tell step by step what are our requirements to create an AngularJS application, Hope it would be running fast in your mind what are these. So let’s quickly move ahead ng-app = The ng-app directives initialize the AngularJS application. We can use it anywhere in the whole application where we want to see angular effect. We used it inside <html> element, which means AngularJS effect will be apply on whole application. If you want to use ng-app somewhere inside body or in particular <div> or on particular <table> then we can use this directive there, as you can see in below snapshot.



Snapshot -3

If I use it on table then AngularJS effect will be only on table, If I will use on body then effect will be everywhere inside body, overall you can say ng-app defines the root element of application.

ng-controller: AngularJS application are controlled by ng-controller which is a JavaScript object. Here we use ng-controller=”HelloController”, and we created a model on behalf of this controller.

  1. function HelloController($scope)  
  2. {  
  3.     $scope.SomeText = "AngularJS tutorial: My first App Hello World";  
  4. } 

As till now we have created Controller and Model, Now we need to create a View.

{{SomeText}}: As in Snapshot -1 you saw we use {{SomeText}}. What actually it means

This expression is basically an AngularJS Data Binding Expression. AngularJS expression will bind it with actual data.

Now let’s create some applications and see how does it bind with actual data.



Snapshot -4

Now one more application we will create and for that I want to explain one more directive i.e. ng-model ng-model: ng-model directive bind the data with html controls like (input, text, select etc.)

It also do many things but we will talk on that in my next articles… let’s have an example with ng-model.



Snapshot -5



Snapshot -6



Snapshot -7

As we will type name in textbox, that text will be shown in paragraph {{name}} expression.



Snapshot -8

Hope this article helps you to explain, what actually I wanted to explain about AngularJS.

I will explain a bit more about AngularJS in my next article.

Thanks, and suggestions would be heartily welcome.


Similar Articles