AngularJS Tutorial

AngularJS is a structural framework for dynamic web apps, maintained by Google. It allows developers to use HTML as a template language and extend HTML’s syntax to express the application’s components clearly and succinctly. The two-way data binding and dependency injection eliminate much of the code you’d otherwise have to write.

This tutorial will introduce you to the core features of AngularJS and help you build your first AngularJS app.

Prerequisites

Before you start, you should have a basic understanding of:

  • HTML
  • JavaScript

1. Setting Up AngularJS

You can either download AngularJS or include it via CDN in your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AngularJS Tutorial</title>
  <!-- Include AngularJS via CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
  <div ng-app="myApp">
    <h1>AngularJS Tutorial</h1>
    <p>{{ message }}</p>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
      $scope.message = "Welcome to AngularJS!";
    });
  </script>
</body>
</html>

This example does the following:

  • Includes AngularJS via CDN.
  • Defines an AngularJS app using ng-app="myApp".
  • Uses a controller (myController) to bind data to the view.

2. Basic Concepts

a. Directives

Directives are special tokens in the markup that tell the library to do something with a DOM element (e.g., hide it, repeat it, etc.).

Example: ng-model for two-way data binding.

<div ng-app="myApp" ng-controller="myController">
  <input type="text" ng-model="name" placeholder="Enter your name">
  <h2>Hello, {{ name }}!</h2>
</div>

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

b. Data Binding

AngularJS allows for two-way data binding, meaning that any changes to the model will reflect in the view, and vice versa.

<input type="text" ng-model="userInput">
<p>You typed: {{ userInput }}</p>

c. Controllers

Controllers are used to manage the scope, which is the model data that your view binds to.

<div ng-app="myApp" ng-controller="myController">
  <h3>{{ greeting }}</h3>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myController', function($scope) {
    $scope.greeting = "Hello, World!";
  });
</script>

d. Filters

Filters format the value of an expression for display to the user. You can use AngularJS built-in filters such as currency, date, limitTo, and uppercase.

<p>{{ price | currency }}</p>  <!-- Formats price as currency -->
<p>{{ today | date:'fullDate' }}</p>  <!-- Formats the date -->

3. Handling Events

You can handle events like ng-click in AngularJS to respond to user interactions.

<div ng-app="myApp" ng-controller="myController">
  <button ng-click="showMessage()">Click Me</button>
  <p>{{ message }}</p>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myController', function($scope) {
    $scope.showMessage = function() {
      $scope.message = "Button clicked!";
    };
  });
</script>

4. Working with Forms

AngularJS makes form handling easy by providing features like ng-model, ng-submit, and validation.

<div ng-app="myApp" ng-controller="myController">
  <form ng-submit="submitForm()">
    <label>Name:</label>
    <input type="text" ng-model="user.name" required>
    <br>
    <label>Email:</label>
    <input type="email" ng-model="user.email" required>
    <br>
    <button type="submit">Submit</button>
  </form>
  <p>{{ user.name }} - {{ user.email }}</p>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myController', function($scope) {
    $scope.user = { name: '', email: '' };
    $scope.submitForm = function() {
      alert("Form submitted for " + $scope.user.name);
    };
  });
</script>

5. AngularJS Services and HTTP Requests

AngularJS provides services like $http to make requests to a server.

<div ng-app="myApp" ng-controller="myController">
  <button ng-click="getData()">Get Data</button>
  <ul>
    <li ng-repeat="item in items">{{ item.name }}</li>
  </ul>
</div>

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

In this example:

  • ng-repeat iterates over the items array and displays them.
  • The $http.get() method fetches data from a server.

6. Creating Custom Directives

Directives allow you to create reusable components in AngularJS.

<div ng-app="myApp">
  <custom-greeting></custom-greeting>
</div>

<script>
  var app = angular.module('myApp', []);
  app.directive('customGreeting', function() {
    return {
      template: "<h1>Hello from a custom directive!</h1>"
    };
  });
</script>

Conclusion

In this tutorial, you’ve learned about the core concepts of AngularJS such as directives, data binding, controllers, forms, and HTTP requests. You can now build dynamic, single-page applications with AngularJS.