AngularJS Introduction

  • by
Post Views: 30

AngularJS – Introduction:

AngularJS is a Javascript framework that helps in creating dynamic HTML web pages. It can be used on any HTML page by including the Script tag in the head section.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
Why use AngularJS?

HTML was traditionally developed to design static web pages. It fails to create dynamic views. AngularJS solves this problem by extending HTML vocabulary in your application. Example: ng-src for Image tag on HTML page can help us to define dynamic an Image fetched from an API request.

Benefits of AngularJS:
  1. MVC and MVVM: AngulatJS is fully client-side framework. It uses MVC architecture to create dynamic web pages.
    It is cross-browser complaint. It converts supported javascript code automatically based on the end-user’s browser.
  2. It is open-sourced under Apache License 2.0
  3. Because it is based on Javascript, you can integrate it with almost all server-side programming languages and build powerful and rich front-end UI.
  4. Two-way Data Binding: It supports two-way binding. Meaning any changes on Model reflects on View, and when there’s any change on View (example change in Textbox text) the Model is updated. This ensures View and Model data is in total sync all the time.
  5. Dependency Injection (DI): Dependency Injection is pervasive throughout AngularJS.
Example:
<html>
<head>
<title>AngularJS - Example</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>

<p>Where are you from: <input type="text" ng-model="countryName"/></p>
<p>You are from <b>{{countryName}}</b></p>

<p>Select any number:<select ng-model="anyNumber">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
</select>
</p>
<p>You selected <b>{{anyNumber}}</b></p>
</select>
</body>
</html>

DEMO:


This is a very basic example. It uses ng-app, ng-model and ng-bind AngularJS directive. There are number of different directives we will learn in this course as it progresses.

< Previous – AngularJS Tutorial
Next > AngularJS Getting Started
Tags: