AngularJS Environment Setup & First Application (2025 Guide)
Introduction – Why Set Up AngularJS?
To start building with AngularJS, the first step is setting up your development environment and creating your very first application. AngularJS offers a simple and fast setup process—ideal for both beginners and experienced JavaScript developers.
Whether you’re maintaining a legacy AngularJS app or exploring the fundamentals of JavaScript frameworks, this guide walks you through everything you need to set up, run, and understand your first AngularJS project.
In this guide, you’ll learn:
- How to set up AngularJS in your environment
- Different ways to include AngularJS in a project
- How to write your first AngularJS application
- Line-by-line breakdown of the code
Prerequisites
Before getting started, make sure you have:
- A code editor like Visual Studio Code, Sublime Text, or Atom
- A web browser (preferably Chrome or Firefox)
- Basic knowledge of HTML and JavaScript
Step 1: Include AngularJS in Your Project
You can include AngularJS in two ways:
Option 1: Use CDN (Recommended for Beginners)
Add this inside your <head> or right before closing </body>:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
Option 2: Download AngularJS Locally
- Visit https://angularjs.org
- Click Download AngularJS
- Save
angular.min.jsto your project directory - Reference it like this:
<script src="angular.min.js"></script>
Step 2: Create Folder Structure
Create a project folder named angularjs-app:
angularjs-app/
│
├── index.html
├── app.js (optional for controller logic)
└── angular.min.js (if using local file)
Step 3: Write Your First AngularJS Application
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h2>{{ greeting }}</h2>
<p>Enter your name: <input ng-model="name"></p>
<p>Hello, {{ name }}!</p>
</body>
</html>
Line-by-Line Explanation:
ng-app="myApp"initializes the AngularJS application.ng-controller="MainCtrl"binds the scope to the controller.{{ greeting }}and{{ name }}are AngularJS expressions to display data.ng-model="name"binds the input field to the model.
app.js
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.greeting = "Welcome to AngularJS!";
});
Line-by-Line Explanation:
angular.module('myApp', []): creates a new AngularJS module..controller('MainCtrl', function($scope) { ... }): defines a controller.$scope.greeting: holds the message shown in the HTML view.
Step 4: Run Your AngularJS App
You can open index.html directly in a browser. No server setup is required.
For a better development experience:
- Use a Live Server extension in VS Code.
- Or run a local server using Python/Node if needed.
Expected Output
When you open the page:
- A heading saying: Welcome to AngularJS!
- An input box where you enter your name.
- A live-updating message: Hello, [Your Name]!
Summary – Recap & Next Steps
Setting up AngularJS is incredibly easy—no build tools, bundlers, or compilation required. Just a script tag, a controller, and you’re ready to build dynamic web apps with two-way binding and modular architecture.
Key Takeaways:
- You can set up AngularJS using a CDN or local copy
- Apps are initialized using
ng-appandng-controller - Data binding makes the UI dynamic with minimal code
Real-world Relevance:
Learning the setup and basic structure of AngularJS apps is crucial for developers maintaining enterprise portals or migrating apps to newer frameworks like Angular or React.
FAQ – AngularJS Setup & First App
Do I need a build tool like Webpack for AngularJS?
No. AngularJS apps run directly in the browser and don’t require build tools.
What is the use of ng-app?
It tells AngularJS where the application starts and bootstraps the app module.
Why is ng-model important?
It creates a two-way binding between input elements and the model, allowing dynamic UI updates.
Can I use AngularJS with modern frameworks?
While AngularJS can coexist with other libraries, it’s usually used standalone or maintained in legacy projects.
Share Now :
