AngularJS - How to Start with AngulatrJS

In this AngularJS basic example you will learn what is AngularJS and how to start writting code using AngularJS.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

How to start with AngulatrJS - Include AngularJS file reference first

 

<html>
<head>
<title>My first AngularJS code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
</head>
<body>
</body>
</html> 

 

1. Specify AngularJS section in your HTML page.

2. Add ng-app attribute to the root element of the section where you want to add AngularJS.

3. Typically, root element can be HTML, BODY or DIV element of page. Below example shows ng-app attribute added in HTML tag.

AngularJS ng-app Attribute Example

<html ng-app>
<head>
<title>My first AngularJS code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
</head>
<body>
</body>
</html>

Initialise AngularJS variable under ng-app section and bind value to HTML element in HTML page.

Initialise AngularJS variable Example

<html ng-app>
<head>
<title>My first AngularJS code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
</head>
<body>
<div ng-app="" ng-init="myName='Jimi'">
<p>
My name is : <span> ng-bind="myName" </span>
</p>
</div>
</body>
</html>

You can add HTML input text element with ng-model attribute also and display value using AngularJS expression {{variable}}

AngularJS Expression Example

<html ng-app>
<head>
<title>My first AngularJS code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
</head>
<body>
<p>Input string in below box:</p>
<input ng-model="myName" type="text"  placeholder="Your name">
<h1>Hey  {{  myName  }}</h1>
</body>
</html>

See Live Example

« Previous