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:
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 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>
This example will display Name and current date on the page.
Here is the screen shot of the output:
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