Easy Code Stuff: My First AngularJS Application

AngularJS is a JavaScript Library which helps us to create a single page application very easily using data binding technology. To start learning Angular, you should have good knowledge about JavaScript and JQuery. One thing you need to understand is this is not an alternative for JQuery or anything. It is another data binding framework such as KnockoutJS.

First of all to start download the AngularJS Library from their website or else you can reference to the online library which is shown below. But make sure you always reference to a latest stable version of it.

1	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Initially to start first take a simple idea about following AngularJS directives.

ng-app : This defines the AngularJS application.
ng-model : This binds the value of HTML control to the AngularJS application data.
ng-bind : This binds the AngularJS application data to the HTML controls.

Lets Start Developing Our Simple AngularJS Application. In This Application Ill Have A Text Field To Enter The Name. The Text Which I Enters Will Come With "Hello ".

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
    Name: <input type="text">
    <br/>
  </body>
</html>

Now I Should Tell Angular To Treat This Page As An Angular Application. In-order To That Use The "ng-app" Directive. As We Are In The Begining Of The Application I Will Define It In My <Body> Tag.

If You Want Give An Application Name To It. But It's Not Important Right Now. Because We Wont Be Doing All Controllers And Stuff In This Article. If You Want Make It Like HTML5 Attribute.

Use Any Of The Following Ways To Define You Application.

1	<body ng-app>

1	<body ng-app="">

1	<body data-ng-app="">

Now Lets Define A Model For The Name.

1	Name: <input type="text" ng-model="name">

You Can Use Any Name For The Model. But In The Application You Have To Use The Same Model Name. So Give A Meaningful Name.Lets Bind The Data To A Tag.

1	<span ng-bind="name"></span>

Lets See The Full Code Now.

Name:

Now Run And Happy.

Hope You Had Good Start With AngularJS.

Check My Next Article Regarding AngularJS Expressions And Variables.

Easy Code Stuff

Nov 28, 2015

My First AngularJS Application

No comments:

JWT Token Decode Using Jquery