Guys,

Today we are going to learning Hello world in Angularjs .

AngularJS, a JavaScript M-V-W (Model-View-What ever) framework developed by a Googler and supported by Google.
if you are using jquery in your application , Angular will amaze you. We are writing very less code in jquery , angular will minify it again !!

Angularjs is giving amazing support to AJAX and we can make a very interactive website with angularjs.

Angular can be defined as a client side javascript framework adding intractivity to HTML. As i mention on top angular is MVW framework
which means ,model view and what ever. There are many software architecture patterns like MVC,MVP (Model View-presenter).

But angular doesn’t care about software architecture . A basic concept of MVW is that all definitions are associated with a named Module.
Angular come with a rich set of APIs to defined and this modules can be linked together by dependency injection.

Hello world in Angular js

let us try a simple hello world in angular js

in order to write angular js in our application we need to include angular js in our HTML page,
We can download and include or we can directily include from CDN

Here i am including


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.16/angular.min.js"></script>
<div  ng-app>  
  Write some text in textbox:
    <input type="text" ng-model="text" />
 
    <h1>Hello {{ text}}</h1>
</div>

Note that we didn’t write a single line of JavaScript and still this example works like a charm! Live example

Write some text in textbox:

Hello {{ text}}

Let us check step by step

Here i had included “ng-app” after. This tell angular that , angular need to monitor this section if we want angular to monitor one part of our application we can wrap with a div and we can write “ng-app” there. So angular will only monitor that part.

Now we defined ng-model=”text” in text box ng-model bind the state with model value.if we made any changes in the
textbox it will reflect {{text}}.

This is twoway binding. Angular will always keep an eye in ng-model defined and when ever it is changing ,
it will reflect on the ng-model value in double curly braces. .

This is a simple hello world application in angularjs

948 total views, 1 views today