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.

<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.

<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}}

<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>

Try Now

More AngularJS Basic Examples

 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.