To install AngularJS, you can include the AngularJS library in your HTML file or use a package manager like npm (Node Package Manager). The recommended approach for new projects is to use npm, but including it via CDN (Content Delivery Network) in HTML is also an option for quick prototyping or small projects.
Option 1: Include AngularJS via CDN
Include the following script tags in the <head> section of your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Your AngularJS app content goes here -->
<!-- Include your AngularJS scripts -->
</body>
</html>
Replace the version number (1.8.2) in the script source URL with the version you want to use.
Option 2: Install AngularJS using npm
If you have Node.js and npm installed, you can use npm to install AngularJS. Open your terminal and run the following command:
npm install [email protected]
This installs AngularJS and adds it as a dependency to your project. You can then include it in your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your AngularJS App</title>
</head>
<body>
<!-- Your AngularJS app content goes here -->
<!-- Include your AngularJS scripts -->
<script src="node_modules/angular/angular.min.js"></script>
</body>
</html>
Replace the version number (1.8.2) with the version you installed.
Hello World Example
Now that you have AngularJS installed, you can create a simple "Hello World" example. Add the following code to your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{ greeting }}</h1>
</div>
<script>
// Define your AngularJS app module
var app = angular.module('myApp', []);
// Define your controller
app.controller('myCtrl', function($scope) {
$scope.greeting = 'Hello, AngularJS!';
});
</script>
</body>
</html>
This example defines an AngularJS app module called myApp and a controller called myCtrl. The ng-app directive specifies the root of the AngularJS app, and ng-controller attaches the controller to a specific DOM element.
Open this HTML file in a web browser to see your "Hello, AngularJS!" message.
Comments