Google News
logo
AngularJS Introduction
Angular JS is an JavaScript-based open-source front-end web application framework mainly maintained by Google. AngularJS is based on the MVC pattern (Model View Control), it's mainly used in Single Page Application (SPA) projects. 

The basic version 1.0 was released in 2012 and  introduced by MiÅ¡ko Hevery, He is  started to work with AngularJS in 2009.

The Angular is a Command Line Interface (CLI ) tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

AngularJS covered all topics there are  mvc, data binding, expressions, directives, models, views, controllers, scopes, filters, tables, select, dom, events, forms, validation, ajax, animation, routes, injection, modules, services, server communication etc. 

Prerequisites :
 Before learning AngularJS, you have  basic knowledge of HTML, CSS, JavaScript.
Set up the Development Environment
First you go to angularjs.org website click here to DOWNLOAD ANGULARJS button afetr open the following popup.
AngularJS
AngularJS
Include AngularJS
Included the AngularJS JavaScript file in the HTML page

Offline AngularJS

<head>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>

Online AngularJS

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
AngularJS app
<body ng-app ="app_name">
//some content.....
</body>
AngularJS Offline Example :
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Basic Example</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body ng-app="">
 
  <label>Name : </label>
  <input type="text" ng-model="name" placeholder="Your Name">
  <h1>Hello i'm {{name}}.</h1>
 
</body>
</html>
Output :
AngularJS Online Example :
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Basic Example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
 
<body ng-app="">
 
  <label>Name : </label>
  <input type="text" ng-model="name" placeholder="Your Name">
  <h1>Hello i'm {{name}}.</h1>
 
</body>
</html>
Output :