Download and Install AngularJS

Ads
 

Download and Install AngularJS

To work with the AngularJS we need to download and install AngularJS library into the project. In this section you will learn to download and install AngularJS library.

To work with the AngularJS we need to download and install AngularJS library into the project. In this section you will learn to download and install AngularJS library.

Download and Install AngularJS in a project

As mentioned earlier Download and Install AngularJS is a JavaScript library which is used in a web application. In this tutorial you will learn to download and install AngularJS library in a web based application. We will also show you how to use it for making a simple AngularJS  example program.

Downloading AngularJS library

AngularJS is JavaScript library which is distributed as a single JavaScript file, you can download this JavaScript library and include into your application.

Visit AngularJS  home page at https://angularjs.org/ and you will find the link for downloading AngularJS js file. Here is the screenshot of the same:

Download AngularJS

Click on the DOWNLOAD ANGULARJS link and it will show following screen:

Now click it on the "Download" link to download library js file. You can copy this js file (angular.min.js) to your projects js directory. After that use this file in your project.

Using AngularJS  with CDN

AngularJS  library is also distributed through CDN network, if you prefer to use the AngularJS then you can include it using following code in your project:

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

CDN provides cashing and fast access to the library in your project.

AngularJS downloading and installing

AngularJS   Current date example

Now we will create simple current date example in AngularJS framework. Our example displays current date on the console. Create angularjscurrentdate.html file and add following code:

<!DOCTYPE html>
<html lang="en-US">
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

Welcome {{firstName + " " + lastName}}!<br>

Current Date: {{date | date:'yyyy-MM-dd HH:mm:ss'}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "Deepak";
    $scope.lastName = "Kumar";
	$scope.date= new Date();
});
</script>

</body>
</html>

Run this Example Online

This example will display Name and current date on the page.

Here is the screen shot of the output:

AngularJS Example Current date

AngularJS Controller

In this example we have defined a controller in AngularJS using following code:

<div ng-app="myApp" ng-controller="myCtrl">

The AngularJS ng-controller directive is used to add a controller class to the view in the application. In the above code we are adding a controller named myCtrl in our application.

AngularJS framework is based on the Model-View-Controller design pattern which separates the applications into three into:

  • Model - Data of application
  • View - View of the application
  • Controller - Controller handles requests and interacts with Model and View

AngularJS framework is very popular and MVC framework in JavaScript which is used to develop UI for web applications.

Check AngularJS Tutorials

Ads

Ads