🔥 Comprehensive Angular JS Course 2023 | Learn Angular JS in Just 3 Hours | Perfect for Beginners

AngularJS is a popular JavaScript framework used for building dynamic web applications. It was developed by Google and is now maintained by a community of developers. In this tutorial, we will take you through the basics of AngularJS and show you how to build a simple web application using the framework. By the end of this tutorial, you will have a solid understanding of AngularJS and be able to create your own web applications.

This tutorial is designed for beginners who have some basic knowledge of HTML, CSS, and JavaScript. No prior experience with AngularJS is necessary.

What is AngularJS?

AngularJS is a client-side JavaScript framework that allows developers to build dynamic web applications. It extends HTML with new attributes and binds data to HTML with expressions. AngularJS also provides a way to organize code using modules, controllers, filters, and directives.

Setting up AngularJS

To get started with AngularJS, you will need to include the AngularJS script in your HTML file. You can download AngularJS from the official website or include it from a CDN (Content Delivery Network). Here is how you can include AngularJS in your HTML file:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        {{ message }}
    </div>

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

In the above example, we have included the AngularJS script from the Google CDN and defined an Angular module called myApp. We have also defined a controller called myCtrl which sets the value of the message variable to "Hello, World!". The ng-app directive defines the root element of the AngularJS application, while the ng-controller directive binds the controller to a specific part of the HTML.

Directives

AngularJS provides a set of built-in directives that allow you to extend HTML with new behavior. Some of the commonly used directives are ng-model, ng-repeat, ng-if, ng-show, and ng-hide. Directives are prefixed with ng- and are used to manipulate the DOM and data bindings.

Controllers

Controllers are used to define the behavior of a specific part of the application. Controllers are defined using the controller method of the Angular module and are responsible for setting the initial state of the scope object. Controllers can also bind functions to scope properties to handle user interactions.

app.controller('myCtrl', function($scope) {
    $scope.message = 'Hello, World!';
    $scope.greet = function() {
        alert('Hello, AngularJS!');
    };
});

In the above example, we have defined a controller called myCtrl with a greet function that alerts the message "Hello, AngularJS!".

Services

Services are used to organize and share code across different parts of the application. AngularJS provides several built-in services like $http, $timeout, and $interval for making HTTP requests, handling timeouts, and executing code at intervals. You can also create custom services using the service method of the Angular module.

app.factory('userService', function() {
    var users = ['Alice', 'Bob', 'Charlie'];

    return {
        getUsers: function() {
            return users;
        },
        addUser: function(user) {
            users.push(user);
        }
    };
});

In the above example, we have defined a custom service called userService that provides methods for getting and adding users to the list.

Filters

Filters are used to format data before it is displayed to the user. AngularJS provides several built-in filters like currency, date, uppercase, lowercase, and orderBy for formatting numbers, dates, and text. You can also create custom filters using the filter method of the Angular module.

app.filter('reverse', function() {
    return function(input) {
        return input.split('').reverse().join('');
    };
});

In the above example, we have defined a custom filter called reverse that reverses a string before displaying it.

Routing

AngularJS provides a routing module that allows you to create single-page applications with multiple views. You can define routes using the $routeProvider service and navigate between views using the ng-view directive.

app.config(function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'home.html',
            controller: 'homeCtrl'
        })
        .when('/about', {
            templateUrl: 'about.html',
            controller: 'aboutCtrl'
        })
        .otherwise({ redirectTo: '/home' });
});

In the above example, we have defined routes for the home and about pages and set a default route to the home page. Each route specifies a template URL and a controller to handle the logic for that view.

Testing

AngularJS provides a testing framework called ngMock that allows you to test Angular applications using mocks and spies. You can create unit tests for controllers, services, and directives using the inject and module functions provided by ngMock.

describe('myCtrl', function() {
    var $controller, $scope;

    beforeEach(module('myApp'));

    beforeEach(inject(function(_$controller_, $rootScope) {
        $scope = $rootScope.$new();
        $controller = _$controller_('myCtrl', { $scope: $scope });
    }));

    it('should set message to "Hello, World!"', function() {
        expect($scope.message).toEqual('Hello, World!');
    });
});

In the above example, we have created a unit test for the myCtrl controller that checks if the message variable is set to "Hello, World!".

Conclusion

In this tutorial, we have covered the basics of AngularJS and showed you how to build a simple web application using the framework. We have discussed directives, controllers, services, filters, routing, and testing in AngularJS. By following this tutorial, you should now have a solid understanding of AngularJS and be able to create your own web applications. Good luck with your AngularJS journey!