Complete AngularJS Tutorial

(AngularJS 1.x)

AngularJS is a JavaScript framework developed by Google for building dynamic, single-page applications (SPAs). It extends HTML with directives and provides two-way data binding, dependency injection, and modular architecture.

1. Installation & Setup

Method 1: Using CDN (Quick Start)

Include AngularJS in your HTML file via CDN:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <!-- Your AngularJS code here -->
</body>
</html>

Method 2: Using npm (Node.js Required)

Install Node.js from https://nodejs.org.
Create a project folder and run:
bash
Copy
Download
```
npm init -y
npm install angular
```

Include AngularJS in your HTML:

<script src="node_modules/angular/angular.min.js"></script>

2. Core Concepts

a) AngularJS Directives

Directives extend HTML with custom attributes.

Directive	Description
`ng-app`	Bootstraps AngularJS app
`ng-model`	Binds input fields to variables
`ng-bind`	Displays dynamic data
`ng-repeat`	Loops through an array
`ng-controller`	Defines a controller

b) Two-Way Data Binding

Changes in the UI automatically update the model and vice versa.

Example:

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name" placeholder="Enter name">
    <h1>Hello, {{ name }}!</h1>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "John";
    });
</script>

ng-model="name" binds input to $scope.name.
{{ name }} displays the value in real-time.

3. Controllers & Scope

Controllers manage data and logic.

Example:

<div ng-app="myApp" ng-controller="personCtrl">
    First Name: <input ng-model="firstName"><br>
    Last Name: <input ng-model="lastName"><br>
    Full Name: {{ fullName() }}
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
        $scope.fullName = function() {
            return $scope.firstName + " " + $scope.lastName;
        };
    });
</script>

$scope connects the controller to the view.
fullName() is a function that returns the full name.

4. ng-repeat (Looping)

Used to display lists.

Example:

<div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
        <li ng-repeat="name in names">
            {{ name }}
        </li>
    </ul>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('namesCtrl', function($scope) {
        $scope.names = ["John", "Jane", "Doe", "Smith"];
    });
</script>

ng-repeat loops through the names array.

5. Filters

Modify displayed data.

Filter	Example
`uppercase`	`{{ name \| uppercase }}`
`lowercase`	`{{ name \| lowercase }}`
`currency`	`{{ price \| currency }}`
`orderBy`	`ng-repeat="x in users \| orderBy:'name'"`

Example:

<p>{{ "hello world" | uppercase }}</p>  
<!-- Output: "HELLO WORLD" -->

6. Services

AngularJS provides built-in services like $http for API calls.

Example (Fetching Data from API):

<div ng-app="myApp" ng-controller="apiCtrl">
    <ul>
        <li ng-repeat="user in users">
            {{ user.name }}
        </li>
    </ul>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('apiCtrl', function($scope, $http) {
        $http.get("https://jsonplaceholder.typicode.com/users")
            .then(function(response) {
                $scope.users = response.data;
            });
    });
</script>

$http.get() fetches data from an API.

7. Running the Application

Save your file as index.html.
Open it in a browser (file:///path/to/index.html).
For a live server, use:
bash
Copy
Download
```
npx http-server
```
Then open http://localhost:8080.

8. Summary

✅ Installed AngularJS (CDN or npm).
✅ Learned directives (ng-app, ng-model, ng-repeat).
✅ Used two-way data binding.
✅ Created controllers & scope.
✅ Displayed lists with ng-repeat.
✅ Applied filters (uppercase, currency).
✅ Fetched API data with $http.

Next Steps

Learn Angular (2+) (the modern version).
Explore custom directives & components.
Try routing with ngRoute.

🚀 Happy Coding! Let me know if you need more examples.

SK Institute [blog]

Menu

Friday, May 2, 2025