🚀 Creating Your First AngularJS App
Let’s build a simple, working AngularJS application from scratch!
AngularJS makes it easy to build interactive web apps. Let’s start with a basic "Hello World" example that shows how the core building blocks come together:
📁 Folder Structure
my-first-app/
├── index.html
└── app.js📝 index.html
<!DOCTYPE html>
<html 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.3/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController">
<h1>Hello {{ name }}!</h1>
<input type="text" ng-model="name">
</body>
</html>
⚙️ app.js
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.name = 'Angular Learner';
});
🔍 What’s Happening?
- ng-app="myApp" tells AngularJS to bootstrap the app module.
- ng-controller="MainController" binds a controller to the DOM.
- {{ name }} is an AngularJS expression for two-way data binding.
- ng-model="name" binds the input to the scope variable
name.
🎉 Done! You’ve just created your first working AngularJS application. Try modifying the input and see the magic of real-time data binding!
