1. Installation and Setup
CDN (Quick Start)
Add AngularJS to your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
2. Basic AngularJS Application
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS App</title>
</head>
<body>
<div ng-controller="MainController">
<h1>{{ message }}</h1>
</div>
<script>
const app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.message = 'Hello, AngularJS!';
});
</script>
</body>
</html>
3. Key Directives
ng-app – Declares the AngularJS application.
<div ng-app="myApp"></div>
ng-controller – Binds controller to a view.
<div ng-controller="MainController"></div>
ng-model – Two-way data binding for forms/inputs.
<input ng-model="username" placeholder="Enter your name">
<p>Hello, {{ username }}</p>
ng-repeat – Loops through arrays.
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
ng-bind – Binds content to HTML elements.
<h1 ng-bind="message"></h1>
ng-show / ng-hide – Conditional rendering.
<p ng-show="isLoggedIn">Welcome back!</p> <p ng-hide="isLoggedIn">Please log in.</p>
ng-if – Conditionally includes/excludes elements.
<div ng-if="user.isAdmin">
<p>Admin Access Granted</p>
</div>
4. Expressions
AngularJS expressions are written in double curly braces {{ }}.
<p>{{ 5 + 5 }}</p> <!-- Outputs 10 -->
<p>{{ username }}</p> <!-- Displays scope value -->
5. Controllers
Define application logic using controllers.
<div ng-controller="ExampleController">
<h1>{{ title }}</h1>
</div>
<script>
app.controller('ExampleController', function($scope) {
$scope.title = 'AngularJS Controllers';
});
</script>
6. Data Binding
Two-way data binding:
<input type="text" ng-model="name">
<p>Hello, {{ name }}</p>
One-way data binding (ng-bind):
<p ng-bind="name"></p>
7. Filters
Filters format data displayed to users.
<p>{{ message | uppercase }}</p>
<p>{{ price | currency }}</p>
<p>{{ date | date:'fullDate' }}</p>
- Common Filters:
- uppercase – Converts to uppercase.
- lowercase – Converts to lowercase.
- currency – Formats as currency.
- date – Formats date.
- filter – Filters an array based on criteria.
8. Forms and Validation
<form name="userForm">
<input type="text" ng-model="user.name" required>
<span ng-show="userForm.$submitted && userForm.name.$invalid">Name is required.</span>
<button type="submit">Submit</button>
</form>
9. ng-click (Event Handling)
<button ng-click="increment()">Increase</button>
<p>{{ count }}</p>
<script>
app.controller('CounterController', function($scope) {
$scope.count = 0;
$scope.increment = function() {
$scope.count++;
};
});
</script>
10. ng-repeat (Looping Through Data)
<ul>
<li ng-repeat="user in users">
{{ user.name }} - {{ user.email }}
</li>
</ul>
<script>
app.controller('UserController', function($scope) {
$scope.users = [
{ name: 'Alice', email: 'alice@example.com' },
{ name: 'Bob', email: 'bob@example.com' }
];
});
</script>
11. Services
Services are used to share data and logic across controllers.
app.service('MathService', function() {
this.square = function(x) {
return x * x;
};
});
app.controller('MathController', function($scope, MathService) {
$scope.result = MathService.square(4); // Outputs 16
});
12. Custom Directives
Directives extend HTML functionality.
<div hello></div>
<script>
app.directive('hello', function() {
return {
template: '<h1>Hello, Custom Directive!</h1>'
};
});
</script>
13. Dependency Injection
AngularJS uses dependency injection to manage services and components.
app.controller('MainController', function($scope, $http) {
$http.get('/api/data').then(function(response) {
$scope.data = response.data;
});
});
14. HTTP Requests ($http Service)
<div ng-controller="ApiController">
<p>{{ data }}</p>
</div>
<script>
app.controller('ApiController', function($scope, $http) {
$http.get('https://api.example.com/info')
.then(function(response) {
$scope.data = response.data;
});
});
</script>
15. Routing (ngRoute)
Install AngularJS route module:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
Set up routing:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.otherwise({
redirectTo: '/'
});
});
16. Single Page Application (SPA) Example
<div ng-view></div>
<script>
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h1>Home Page</h1>'
})
.when('/about', {
template: '<h1>About Page</h1>'
})
.otherwise({
redirectTo: '/'
});
});
</script>
17. Useful AngularJS CLI Commands
npm install -g angular-cli # Install CLI globally ng serve # Run Angular app ng generate component my-comp # Generate component ng generate service my-service # Generate service