Last updated on July 31st, 2016 at 11:13 am
Angular JS is new JavaScript library. Angular extends HTML with new attributes and makes it more responsive and efficient to user actions. It is mainly used for single page web application.
Official Website: angularjs.org
In this post and some upcoming post i am going to cover some basic and important topics of Angular JS to help you to create your web application more User Friendly and Fast. Now in this post i explain some basics of Angular and show some example to help you understand.
Some features of Angular JS i like
- It make your HTML tag Dynamic.
- Angular provide data binding.
- It is very easy to use and implement on application
- It speed up your application and help you to make better interface
- It is now officially supported by Google
- If you familiar with Javascript and jQuery then it is very easy to start.
- And lots more other feature like: send and receive data from server, it follow MVC etc..
Angular JS is very easy to implement in your project. You need to add angular script in your HTML code like this
<html> <head> <title>Angular JS Controller</title> <!-- Add your angular here //--> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> // Your Stuff </body> </html>
Angular JS extends HTML with ng-directives. Here are some common directives which we use in our app
- ng-app – defines an AngularJS application
- ng-model – binds the value of HTML controls (input, select, textarea) to application data.
- ng-controller – defines a controller
- ng-bind – bind data in html
- ng-init – initialize application variables.
First Example:
<html> <head> <title>Angular JS Controller</title> <!-- Add your angular here //--> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <h2 ng-bind="name"></h2> </div> </body> </html>
In above code i create my first app. ng-app (defines once in whole app), after that i add ng-model in input field to get user inserted data as per definition, ng-bind is used to get data from model and set in html.
{{ expression }} : is also used to bind data in html as shown bellow example. You also perform
<html>
<head>
<title>Angular JS Controller</title>
<!-- Add your angular here //-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<h2>{{name}}</h2>
</div>
</body>
</html>
Variable in Angular JS
ng-init: is used to declare variable, init automatically initialize variable as shown in below example
<html>
<head>
<title>Angular JS Controller</title>
<!-- Add your angular here //-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<div ng-init="myVar = 2"> {{ myVar }} </div>
</div>
</body>
</html>
If you want to add another variable in you need to add semi colum(;) and continue
<div ng-app="">
<div ng-init="myVar1=2;myVar2=5"> {{ myVar1+myVar2 }} </div>
</div>
Angular JS Object
Angular also support object like javascript
<div ng-app="" ng-init="person={name:'Aneh Thakur'}">
<p>The name is {{ person.name }}</p>
</div>
Angular Array
Array are very easy to declare in Angular, it as same as in javascript or jQuery
<div ng-app="" ng-init="person=['Aneh', 'thakur']">
<p>The name is {{ person[0] }}</p>
</div>
Example:
<html>
<head>
<title>Angular JS</title>
<!-- Add your angular here //-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="">
Value 1: <input type="number" ng-model="num1">
Value 2: <input type="number" ng-model="num2">
Total in dollar: {{ num1 * num2 }}
</div>
</body>
</html>
Angular JS Repeat
Angular ng-repeat is used to create dynamic data eg. dynamically genarate list, order list etc.
<html>
<head>
<title>Angular JS Controller</title>
<!-- Add your angular here //-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="lists=['first','second','third']">
<ul>
<li ng-repeat="list in lists">
{{ list }}
</li>
</ul>
</div>
</body>
</html>
I continue post my new post about Angular JS, stay tune to learn.
🙂