AngularJS can be installed in two main ways:
- Using a CDN (Content Delivery Network) – Quick and easy setup.
- Downloading and Setting up Locally – More control over the files.
1. Installing AngularJS Using a CDN (Recommended for Quick Setup)
CDN (Content Delivery Network) allows you to include AngularJS in your project without downloading the files manually.
Steps to Use AngularJS via CDN
1️⃣ Create an HTML file (e.g., index.html).
2️⃣ Include AngularJS from the official Google CDN in the <head> section.
3️⃣ Write your AngularJS code inside <script> tags or an external file.
Example of AngularJS via CDN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS CDN Example</title>
<!-- Include AngularJS from Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<p>Enter your name: <input type="text" ng-model="name"></p>
<h2>Hello, {{ name }}!</h2>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.name = "User";
});
</script>
</body>
</html>
Advantages of Using a CDN:
- No need to download and store AngularJS files.
- Faster loading as browsers may cache the library.
- Reduces server load.
- Always uses the latest version.
Disadvantages:
- Requires an internet connection.
- If the CDN goes down, your app won’t load AngularJS.
2. Installing AngularJS Locally
If you want more control over your project and work offline, you can download AngularJS manually.
Steps to Install AngularJS Locally
1️⃣ Download AngularJS from the Official Website:
- Go to AngularJS Official Website.
- Download
angular.min.js(compressed) orangular.js(uncompressed).
2️⃣ Save the File in Your Project Folder:
- Create a folder (e.g.,
myAngularApp). - Inside the folder, create another folder called
js. - Place the downloaded
angular.min.jsfile inside thejsfolder.
3️⃣ Create an HTML File (index.html) and Link AngularJS
Example of Local AngularJS Setup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS Local Setup</title>
<!-- Link AngularJS locally -->
<script src="js/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<p>Enter your age: <input type="number" ng-model="age"></p>
<h2>You are {{ age }} years old!</h2>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.age = 25;
});
</script>
</body>
</html>
Advantages of Local Setup:
- Works without an internet connection.
- More control over versioning.
- Customizable for large applications.
Disadvantages:
- Requires manual updates.
- Takes up storage space.
3. Installing AngularJS Using npm (For Advanced Users)
If you are using Node.js and want to manage AngularJS dependencies properly, use npm (Node Package Manager).
Steps to Install via npm
1️⃣ Install Node.js (if not installed) from Node.js Official Website.
2️⃣ Open the terminal and run:
shCopyEditnpm install angular
3️⃣ In your project, include AngularJS:
<script src="node_modules/angular/angular.min.js"></script>
Advantages of npm Installation:
- Best for large-scale applications.
- Allows dependency management.
- Works with modern JavaScript frameworks.
Disadvantages:
- Requires knowledge of Node.js.
- Setup is more complex for beginners.
4. Comparison of Installation Methods
| Installation Method | Pros | Cons |
|---|---|---|
| CDN (Google Hosted) | Quick setup, no download required, faster page loads | Requires an internet connection |
| Local Setup (Manual Download) | Works offline, full control | Needs manual updates, storage required |
| npm (Node.js Package Manager) | Best for large projects, dependency management | Requires Node.js and npm knowledge |