AngularJS Tutorial

Introduction to AngularJS

AngularJS, a powerful JavaScript framework developed by Google, revolutionizes the way developers build dynamic, single-page web applications (SPAs). This AngularJS Tutorial is designed for beginners and intermediate developers looking to master AngularJS and create interactive, user-friendly web applications. By focusing on key concepts, practical examples, and best practices, this guide ensures you gain a solid understanding of AngularJS while optimizing your learning experience for real-world application development.

In this 3000-word AngularJS tutorial, we’ll cover everything from setting up your development environment to building a fully functional application. Whether you’re new to web development or transitioning from another framework, this guide will help you leverage AngularJS effectively. Let’s dive into the world of AngularJS and explore its core features, benefits, and step-by-step implementation.

What is AngularJS?

AngularJS is an open-source, client-side JavaScript framework that simplifies the development of dynamic web applications. It extends HTML with additional attributes and uses a Model-View-Controller (MVC) architecture to create scalable and maintainable code. AngularJS is particularly known for its two-way data binding, dependency injection, and modular structure, making it a popular choice for building SPAs.

Key Features of AngularJS

  1. Two-Way Data Binding: Automatically synchronizes data between the model and the view, reducing the need for manual DOM manipulation.

  2. Directives: Extends HTML with custom attributes and elements, enabling developers to create reusable components.

  3. Dependency Injection: Simplifies the management of dependencies, making code more modular and testable.

  4. MVC Architecture: Separates application logic (Model), user interface (View), and control flow (Controller) for better organization.

  5. Extensive Community Support: Backed by Google and a large developer community, AngularJS offers robust documentation and resources.

Why Learn AngularJS in 2025?

Despite the rise of modern frameworks like Angular (Angular 2+), React, and Vue.js, AngularJS remains relevant for maintaining legacy applications and learning foundational concepts of modern web development. This AngularJS tutorial will equip you with skills to work on existing AngularJS projects and understand the evolution of front-end frameworks.

Setting Up Your AngularJS Development Environment

Before diving into coding, you need to set up your development environment. This section of the AngularJS tutorial guides you through the necessary steps to get started.

Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript.

  • A code editor like Visual Studio Code, Sublime Text, or Atom.

  • A modern web browser (Chrome, Firefox, or Edge).

  • Node.js and npm (optional, for advanced setups).

Step 1: Install AngularJS

AngularJS can be included in your project via a CDN or by downloading the library locally.

Using a CDN

Add the following script tag to your HTML file to include AngularJS from a CDN:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Downloading AngularJS

Alternatively, download the AngularJS library from the official AngularJS website and include it in your project folder.

Step 2: Set Up a Basic Project Structure

Create a project folder with the following structure:

elearncourses-angularjs-tutorial/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── app.js
Sample index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS Tutorial - eLearnCourses</title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script src="js/app.js"></script>
</head>
<body>
  <h1>Welcome to AngularJS Tutorial</h1>
  <div ng-controller="MainController">
    <p>{{ message }}</p>
  </div>
</body>
</html>
Sample app.js
angular.module('myApp', [])
  .controller('MainController', function($scope) {
    $scope.message = 'Hello, AngularJS!';
  });
Step 3: Test Your Setup

Open index.html in a browser. You should see “Hello, AngularJS!” displayed on the page. If not, check your script paths and ensure AngularJS is properly loaded.

Core Concepts of AngularJS

Below are the fundamental concepts of AngularJS that form the backbone of its functionality. These concepts are essential for understanding and building applications with AngularJS.

1. Modules

  • Definition: Modules are containers that organize an AngularJS application by grouping related components like controllers, services, and directives.
  • Purpose: They define the application’s scope and dependencies, promoting modularity and reusability.
  • Example:
    javascript
     
    angular.module(‘myApp’, []);

    Here, myApp is a module with no dependencies (indicated by the empty array []). Dependencies like ngRoute can be added to extend functionality.

2. Controllers

  • Definition: Controllers manage the application’s logic and data for a specific section of the UI. They are JavaScript functions that interact with the $scope object to bind data to the view.
  • Purpose: They handle user interactions and update the model, ensuring the view reflects changes.
  • Example:
    javascript
     
    angular.module(‘myApp’, [])
    .controller(‘MainController’, function($scope) {
    $scope.message = ‘Hello, AngularJS!’;
    });
     
    html
     
    <div ng-controller=”MainController”>
    <p>{{ message }}</p>
    </div>
     

    The controller sets $scope.message, which is displayed in the view.

3. Directives

  • Definition: Directives are custom HTML attributes, elements, or classes that extend HTML’s functionality. AngularJS provides built-in directives (e.g., ng-model, ng-repeat) and allows custom directive creation.
  • Purpose: They enable reusable components and dynamic behavior in the UI.
  • Example:
    html
    <ul>
    <li ng-repeat=”item in items”>{{ item }}</li>
    </ul>
     
    javascript
    $scope.items = [‘Task 1’, ‘Task 2’, ‘Task 3’];
     

    The ng-repeat directive iterates over the items array to generate list item

4. Two-Way Data Binding

  • Definition: Two-way data binding synchronizes data between the model (JavaScript data) and the view (HTML) automatically. Changes in the view update the model, and vice versa.
  • Purpose: It reduces manual DOM manipulation, making development faster and more intuitive.
  • Example:
    html
    <input type=”text” ng-model=”userName”>
    <p>Hello, {{ userName }}!</p>
     

    Typing in the input updates userName, which instantly updates the <p> tag.

5. Services

  • Definition: Services are singleton objects that encapsulate reusable business logic, such as data fetching or calculations. AngularJS provides built-in services like $http for HTTP requests.
  • Purpose: They promote code reusability and separation of concerns.
  • Example:
    javascript
     
    angular.module(‘myApp’, [])
    .controller(‘DataController’, function($scope, $http) {
    $http.get(‘https://api.example.com/data’)
    .then(function(response) {
    $scope.data = response.data;
    });
    });
     

    The $http service fetches data from an API and binds it to the $scope.

6. Filters

  • Definition: Filters format or transform data for display in the view. AngularJS includes built-in filters like currency, date, and uppercase.
  • Purpose: They enhance data presentation without modifying the underlying model.
  • Example:
    html
    <p>{{ price | currency }}</p>
    <p>{{ today | date:’fullDate’ }}</p>
     
    javascript
     
    $scope.price = 99.99;
    $scope.today = new Date();

    The currency filter formats price as a currency value, and date formats today as a readable date.

Also Read: Angularjs Interview questions

7. Dependency Injection

  • Definition: Dependency injection (DI) is a design pattern where AngularJS automatically provides dependencies (e.g., services, $scope) to components like controllers.
  • Purpose: It simplifies testing and modularizes code by decoupling dependencies.
  • Example:
    javascript
     
    angular.module(‘myApp’, [])
    .controller(‘MyController’, function($scope, $http) {
    // $scope and $http are injected automatically
    });

8. Routing (ngRoute)

  • Definition: The ngRoute module enables client-side routing, allowing different views to be displayed without reloading the page.
  • Purpose: It supports the creation of SPAs by mapping URLs to templates and controllers.
  • Example:
    javascript
     
    angular.module(‘myApp’, [‘ngRoute’])
    .config(function($routeProvider) {
    $routeProvider
    .when(‘/home’, {
    template: ‘<h2>Home Page</h2>’,
    controller: ‘HomeController’
    })
    .otherwise({ redirectTo: ‘/home’ });
    });
     
    html
    <div ng-view></div>
     

    The ng-view directive renders the appropriate template based on the URL.

9. Scope

  • Definition: The $scope object is a JavaScript object that acts as a glue between the controller and the view, holding the application’s data and methods.
  • Purpose: It enables data binding and communication between the model and view.
  • Example:
     
    $scope.user = { name: ‘John’, age: 30 };
     
    html
    <p>Name: {{ user.name }}, Age: {{ user.age }}</p>

10. MVC Architecture

  • Definition: AngularJS follows the Model-View-Controller (MVC) pattern:
    • Model: The data (managed by $scope or services).
    • View: The HTML template that displays the data.
    • Controller: The logic that connects the model and view.
  • Purpose: MVC separates concerns, making the application easier to maintain and scale.

Advanced AngularJS Concepts

To deepen your understanding, let’s explore advanced topics in this AngularJS tutorial.

1. Custom Directives

Create reusable components with custom directives. For example, let’s create a directive for a task item in the to-do list.

Update app.js

angular.module('todoApp', [])
  .directive('todoItem', function() {
    return {
      restrict: 'E',
      template: `
        <div class="todo-item">
          <input type="checkbox" ng-model="todo.completed">
          <span ng-class="{ 'completed': todo.completed }">{{ todo.text }}</span>
          <button ng-click="remove()">Remove</button>
        </div>
      `,
      scope: {
        todo: '=',
        remove: '&'
      }
    };
  })
  .controller('TodoController', function($scope) {
    $scope.todos = [
      { text: 'Learn AngularJS', completed: false },
      { text: 'Build a to-do app', completed: false }
    ];

    $scope.newTodo = '';

    $scope.addTodo = function() {
      if ($scope.newTodo.trim()) {
        $scope.todos.push({ text: $scope.newTodo, completed: false });
        $scope.newTodo = '';
      }
    };

    $scope.removeTodo = function(index) {
      $scope.todos.splice(index, 1);
    };
  });

Update index.html

Replace the ng-repeat section with:

<todo-item ng-repeat="todo in todos" todo="todo" remove="removeTodo($index)"></todo-item>

This directive encapsulates the task item’s logic and template, making the code more modular.

2. Routing with ngRoute

AngularJS’s ngRoute module enables client-side routing for SPAs.

Include ngRoute

Add the ngRoute script to index.html:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>

Update app.js

angular.module('todoApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        template: `
          <h2>Welcome to the To-Do App</h2>
          <p>Navigate to the To-Do List or About page.</p>
        `
      })
      .when('/todos', {
        templateUrl: 'todos.html',
        controller: 'TodoController'
      })
      .when('/about', {
        template: '<h2>About</h2><p>Learn AngularJS with eLearnCourses!</p>'
      })
      .otherwise({ redirectTo: '/' });
  })
  .controller('TodoController', function($scope) {
    // Same controller logic as before
  });

Create todos.html

<form ng-submit="addTodo()">
  <input type="text" ng-model="newTodo" placeholder="Add a new task">
  <button type="submit">Add Task</button>
</form>
<ul>
  <todo-item ng-repeat="todo in todos" todo="todo" remove="removeTodo($index)"></todo-item>
</ul>

Update index.html

Add navigation links and the ng-view directive:

<body ng-controller="TodoController">
  <h1>AngularJS To-Do List</h1>
  <nav>
    <a href="#!/">Home</a>
    <a href="#!/todos">To-Do List</a>
    <a href="#!/about">About</a>
  </nav>
  <div ng-view></div>
</body>

This setup enables navigation between different views without reloading the page.

Best Practices for AngularJS Development

To ensure your AngularJS applications are efficient and maintainable, follow these best practices:

  1. Organize Code with Modules: Group related functionality into separate modules to improve scalability.

  2. Minimize $scope Usage: Use controllerAs syntax to avoid $scope pollution.

  3. Optimize Performance: Limit the use of watchers (e.g., in ng-repeat) and use one-time binding (::) where possible.

  4. Test Your Code: Use tools like Jasmine and Karma for unit testing AngularJS applications.

  5. Follow Naming Conventions: Use clear, descriptive names for controllers, services, and directives (e.g., TodoController, DataService)..

Conclusion

This AngularJS tutorial has provided a comprehensive guide to mastering AngularJS, from setting up your environment to building a functional to-do list application. By understanding core concepts like modules, controllers, directives, and routing, you’re well-equipped to create dynamic, user-friendly web applications. AngularJS’s two-way data binding and modular architecture make it a powerful tool for developers, even in 2025.

Continue practicing with the sample application, explore advanced topics like custom filters and services, and leverage the AngularJS community for support. Visit eLearnCourses for more tutorials on web development, JavaScript, and modern frameworks.

Happy coding, and welcome to the world of AngularJS!

— Latest Posts

AngularJS Interview Questions

August 2, 2025 Cloud

AngularJS Tutorial

August 2, 2025 Cloud

Blue Prism Interview Questions

August 2, 2025 Cloud
— Upcoming
$ 75.00
Design
UI/UX Design Course
Mike Lewis
  • 9 Lessons

Join our community

ABOUT US

eLearnCourses is a trusted destination for high-quality, industry-relevant online IT training. We are committed to empowering learners and professionals with the practical skills and knowledge they need to succeed in the digital era.

Training Delivered In Cities/Countries: Hyderabad, Bangalore, Mumbai, Delhi, Chennai, Pune, Texas, California, New Jersey, Virginia, London, Dubai (UAE), Toronto, Melbourne, Sydney, Singapore, and many more.

TRENDING COURSES
Socials
Support
Contact Us
Suite 204, 1200 South Avenue, Staten Island, New York, NY – 10314
 
 Unit 210, 789 Don Mills Road, North York, Toronto, ON, M3C 1T5
 
 #301, Sai Sree Residency, Ayyappa Society, Madhapur, Hyderabad, Telangana – 500081

Powered by eLearnCourses. All rights reserved.