AngularJS Examples

AngularJS is a JavaScript framework that simplifies the development of dynamic web applications. It enables developers to build interactive and feature-rich websites using directives, data binding, and dependency injection. In this article, we will walk through various practical examples of AngularJS features, showcasing how they work in real-world scenarios.

1. Hello World Example

This is the simplest AngularJS example to get started.

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Hello World</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="helloApp">
    <div ng-controller="helloController">
        <h1>{{ message }}</h1>
    </div>

    <script>
        var app = angular.module('helloApp', []);
        app.controller('helloController', function ($scope) {
            $scope.message = "Hello, World!";
        });
    </script>
</body>
</html>

2. Two-Way Data Binding Example

Two-way data binding ensures that changes in the model reflect in the view and vice versa.

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Two-Way Data Binding</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="bindingApp">
    <div ng-controller="bindingController">
        <h1>Two-Way Data Binding</h1>
        <input type="text" ng-model="name" placeholder="Enter your name" />
        <p>Hello, {{ name }}!</p>
    </div>

    <script>
        var app = angular.module('bindingApp', []);
        app.controller('bindingController', function ($scope) {
            $scope.name = "";
        });
    </script>
</body>
</html>

3. ng-repeat Example

The ng-repeat directive is used to iterate over a list and generate dynamic content.

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS ng-repeat Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="repeatApp">
    <div ng-controller="repeatController">
        <h1>Fruit List</h1>
        <ul>
            <li ng-repeat="fruit in fruits">{{ fruit }}</li>
        </ul>
    </div>

    <script>
        var app = angular.module('repeatApp', []);
        app.controller('repeatController', function ($scope) {
            $scope.fruits = ["Apple", "Banana", "Cherry", "Date"];
        });
    </script>
</body>
</html>

4. Simple Todo App

A basic AngularJS Todo application to add and remove tasks.

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Todo App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="todoApp">
    <div ng-controller="todoController">
        <h1>Todo List</h1>
        <input type="text" ng-model="newTask" placeholder="Add a new task" />
        <button ng-click="addTask()">Add</button>
        <ul>
            <li ng-repeat="task in tasks">
                {{ task }} <button ng-click="removeTask($index)">Remove</button>
            </li>
        </ul>
    </div>

    <script>
        var app = angular.module('todoApp', []);
        app.controller('todoController', function ($scope) {
            $scope.tasks = [];
            $scope.addTask = function () {
                if ($scope.newTask) {
                    $scope.tasks.push($scope.newTask);
                    $scope.newTask = "";
                }
            };
            $scope.removeTask = function (index) {
                $scope.tasks.splice(index, 1);
            };
        });
    </script>
</body>
</html>

5. Simple Calculator Example

A calculator application using AngularJS.

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Calculator</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="calculatorApp">
    <div ng-controller="calculatorController">
        <h1>Calculator</h1>
        <input type="number" ng-model="num1" placeholder="Number 1" />
        <input type="number" ng-model="num2" placeholder="Number 2" />
        <p>Sum: {{ num1 + num2 }}</p>
    </div>

    <script>
        var app = angular.module('calculatorApp', []);
        app.controller('calculatorController', function ($scope) {
            $scope.num1 = 0;
            $scope.num2 = 0;
        });
    </script>
</body>
</html>

Best Practices for Using AngularJS Examples

  1. Experiment with Directives
    Explore different AngularJS directives (ng-if, ng-hide, ng-show, etc.) to understand their functionality.
  2. Understand Scopes
    Know how $scope works to manage data and interact between controllers and views.
  3. Follow Modularity
    Separate the application logic into modules, controllers, and services for better scalability and maintainability.

Conclusion

AngularJS offers a powerful framework for creating dynamic web applications. The examples provided above are a great starting point to understand how AngularJS works and how its features can be leveraged to build robust applications.

Leave a Comment