First application in AngularJS

In this tutorial, we are learning to create a First application in AngularJS. Before creating your first application you first need to first now about AngularJS .For these, you can check out my previous tutorial here. Here is a short introduction to it.

AngularJS is a JavaScript MVC framework  developed by Google that lets you build well structured, easily testable,  declarative and maintainable front-end applications which provides solutions to  standard infrastructure concerns.

First application in AngularJS


Contents

  1. Get started
    1. Defining ng-app
    2. Create Struture
  2. Some more

 


 

1. Get Started

Create a new HTML file name it, for example, index.html and then include AngularJS library (which you can download it from it Offical website) within your page same as we include a jQuery library or any other JavaScript file.

<script type="text/javascript" src="angular.min.js"></script>

Or you can directly include from CDN <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

Defining ng-app

Angular Framework first checks the ng-app directive within the HTML page. If its found then Angular bootstrap itself and starts to manage the section of the page that have a ng-app directive.

We are defining the ng-app directive within <html> tag. Everything within the HTML tag section will be managed by Angular.

<html ng-app=''> </html>

If you want to enable Angular only at the specific location on your web page then you can define ng-app directive to any <div> or other tags.

Create Structure

We are creating an input, select and Textarea elements in BODY section.

In structure you have been noticed some new attributes

  • ng-model,
  • ng-bind and {{ }}

ng-model

ng-model binds the state of the textbox, select, and Textarea with model value. In our case, we define three model name, language and about. This model value is bound to the value of textbox using ng-model attribute

ng-bind and {{ }}

ng-bind and {{ }} both use to produce the output. The double-curly syntax is more naturally readable and requires less typing but it is much slower.

They both produce the same output but if you choose to go with the double-curly there is a chance that the user will see for some Mili seconds the {{}} before your template rendered by angular. So if you notice any {{}} then is better to use ng-bind.

This ng-bind is a directive and will place a watcher on the passed variable. So the ng-bind will only apply when the passed value does actually change.

Explanation

In HTML structure, we have defined three model names name, language and about in our input elements (Textbox, Select, and Textarea). And we are using those model name in {{ }} and ng-bind.

Hello {{ name }}<br/>
Language : <span ng-bind='language'></span><br/>
About you : {{ about }}

Whenever any changes made in input elements (Textbox, Select, and Textarea) they {{ }} and ng-bind.


 

2. Some More

AngularJS provides some filters to transform data:

  • lowercase – Convert a string to lowercase.
  • uppercase – Convert a string to uppercase.
  • currency – Convert a number to a currency format.
  • number – Format any number to specific string. If input is not a number then return an empty string.

Here, is an example –

 

Related Post

Spread the love

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *