home

Angularjs basics with example

Angularsjs is awesome framework for data interchange application. Let’s go with some basic code example, which will you give some idea about angularjs. Below example code will elaborate the details of angularjs.

data-ng-app="" this is an angularjs first tag. Because first thing you need to set this tag to any parent tags, then only application will consider as a angularjs(ng-app). Otherwise any other angularjs stuff will not work.
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Welcome to AngularJS</title>
</head> 
<body>
<div ng-init="persons=['michelle','Obama', 'chikay burg', 'Jhon k']">

<ul ng-repeat="person in persons">
<li>{{person}}</li>
</ul>

</div>

<script> src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
</body>
</html>

Angularjs array

Ng-init stores values like a javascript array but it’s a angularjs directive, we have persons variable which carrying multiple values. And another one is ng-repeat is nothing but loop in javascript, it will repeat the condition based on the values (persons variable values) which we applied for ul tag. And last things is expression where to show the values (showing values inside the li html tag).

Important thing is you should give values inside of single quotes ('// value').

Output of the above code

You can expect the below repeated li tags along with person names.

Angularjs get started
  • {{person}}