Angular JS for Beginners – A Comprehensive Tutorial

An open-source front-end web application framework based on JavaScript, AngularJS is primarily maintained by Google and a group of people and businesses. By offering a framework for client-side model-view-controller (MVC) and model-view-viewmodel (MVVM) architectures, as well as components frequently seen in rich Internet applications, it seeks to make the building and testing of such applications easier. Learn the basics with our Angular JS for beginners. Explore our AngularJS course syllabus to get started.

Getting Started to AngularJS

Even if Angular (without the “JS”) has surpassed AngularJS, AngularJS is still useful for sustaining legacy applications. We cover the following concepts in this Angular.JS Tutorial.

• Core Concepts of Angular.JS
• Components of AngularJS
• Dependency Injection in AngularJS
• Setting Up AngularJS
• AngularJS Architecture
• Key Differences Between AngularJS and Angular
• Importance of Learning AngularJS

Core Concepts of AngularJS

An open-source framework for web applications is called AngularJS. It was first created in 2009 by Adam Abrons and Misko Hevery. Google now looks after it. It is now at version 1.2.21.

AngularJS is a structural framework for dynamic web applications. It allows you to use HTML as your template language and to improve its syntax so that you may specify the elements of your application in a clear and succinct manner. A large portion of the code you now write is eliminated by its dependency injection and data binding. 

ng-app: The AngularJS application is defined by this directive. Usually, it is positioned in the application’s root element ( or , for example).

ng-model: This directive associates application data with the value of HTML controls (textarea, input, and select).

{{ expression }}: This is how AngularJS handles data binding: {{ expression }}. After evaluating the expression, it inserts the outcome into HTML.

General Features of AngularJS

The following are AngularJS’s general characteristics:

• One effective framework for making Rich Internet Applications (RIAs) is AngularJS.
• With the help of AngularJS, developers can create client-side JavaScript apps in a tidy Model View Controller (MVC) fashion.
• AngularJS applications are compatible with all browsers. JavaScript code that is appropriate for each browser is automatically handled by AngularJS.
• AngularJS is open source and completely free, and it is used by thousands of developers worldwide. Its use is governed by the Apache license version 2.0.

Recommended: AngularJS online training program.

Components of AngularJS

The following are AngularJS’s primary features:

Modules: An application is defined by an AngularJS module. It serves as a container for the many components of an application, such as directives, filters, controllers, and services.

var app = angular.module(‘myApp’, []);

Model-View-Controller (MVC) Architecture:

• Model: Describes the application’s data. This is frequently just basic JavaScript objects in AngularJS.
• View: Usually HTML, the presentation layer. To connect data and logic, AngularJS adds custom attributes (directives) to HTML.
• Controller: Serves as a bridge connecting the View and the Model. It modifies the Model and specifies how the application should behave.

Data Binding: The automatic synchronization of data between view and model components is known as data-binding.

• When it comes to two-way data binding, AngularJS shines. The View automatically updates when the Model does, and vice versa.
• {{ expression }}: Data from the Model is bound to the View using this syntax.

Scope: These items make reference to the model. They serve as a link between the view and the controller.

• An object that serves as a bridge connecting the Controller and the View is called a scope.
• It gives the Model context and gives the View access to data.
• Because of their hierarchical structure, scopes enable data inheritance.

Controller: These JavaScript functions are restricted to a specific scope. JavaScript functions called controllers manage the data in AngularJS apps. The ng-controller directive is used to define them.

<div ng-app=”myApp” ng-controller=”myCtrl”>

    First Name: <input type=”text” ng-model=”firstName”><br>

    Last Name: <input type=”text” ng-model=”lastName”><br>

    <br>

    Full Name: {{firstName + ” ” + lastName}}

</div>

<script>

    var app = angular.module(‘myApp’, []);

    app.controller(‘myCtrl’, function($scope) {

        $scope.firstName = “John”;

        $scope.lastName = “Doe”;

    });

</script>

Learn web development from scratch with our HTML training in Chennai.

Services: $http is one of the built-in services in AngularJS that allows you to create XMLHttpRequests. These are singleton objects, meaning that the application only instantiates them once.

• Singletons known as services offer reusable functionality across an application.
• They can contain data access, business logic, and other functions.
• $http: An integrated tool for submitting HTTP requests.

<div ng-app=”myApp” ng-controller=”myCtrl”>

    <p>Today’s welcome message is:</p>

    <h1>{{myWelcome}}</h1>

</div>

<script>

    var app = angular.module(‘myApp’, []);

    app.controller(‘myCtrl’, function($scope, $http) {

        $http.get(“welcome.htm”).then(function (response) {

            $scope.myWelcome = response.data;

        });

    });

</script>

Filters: These create a new array by selecting a subset of items from an array. Data is formatted by filters before being shown in the View.

Examples:

• currency: converts a number to a currency format.
• uppercase: Changes a string’s capitalization.
• orderBy: An array is sorted using orderBy.

<div ng-app=”myApp” ng-controller=”myCtrl”>

    <p>The name is {{ lastName | uppercase }}</p>

</div>

<script>

    var app = angular.module(‘myApp’, []);

    app.controller(‘myCtrl’, function($scope) {

        $scope.lastName = “Doe”;

    });

</script>

Directives: They are markers on DOM elements, including css, elements, and attributes. Custom HTML tags that function as brand-new, unique widgets can be made with these. 

Built-in directives in AngularJS include ngBind and ngModel Templates, which are rendered views that contain data from the controller and model. These could be a single file (like index.html) or several partial views on a single page.

Common directives:

• ng-app: Sets up an application using AngularJS.
• ng-model: An input element is bound to a Model property using the ng-model function.
• ng-controller: Connects a View to a Controller.
• ng-repeat: Produces HTML for every item in a collection by iterating over it.
• ng-show and ng-hide: Elements can be conditionally displayed or hidden.
• ng-click: Click events are handled by ng-click.

Custom Directives: With AngularJS, you can write your own directives.

<div ng-app=”myApp” runoob-directive></div>

<script>

    var app = angular.module(“myApp”, []);

    app.directive(“runoobDirective”, function() {

        return {

            template : “<h1>Made by a directive!</h1>”

        };

    });

</script>

Suggested: JavaScript course in Chennai.

Routing: It is the idea of changing perspectives. Single Page Applications (SPA) can be made with AngularJS’s ngRoute module.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>AngularJS Routing</title>

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

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

</head>

<body ng-app=”myApp”>

    <nav>

        <a href=”#!/”>Home</a>

        <a href=”#!/about”>About</a>

    </nav>

    <div ng-view></div>

    <script>

        var app = angular.module(“myApp”, [“ngRoute”]);

        app.config(function($routeProvider) {

            $routeProvider

            .when(“/”, {

                templateUrl : “main.htm”

            })

            .when(“/about”, {

                templateUrl : “about.htm”

            });

        });

    </script>

</body>

</html>

Forms: To validate forms, AngularJS offers a number of properties and methods.

<div ng-app=”myApp” ng-controller=”formCtrl”>

    <form name=”myForm” novalidate>

        <p>Username:<br>

            <input type=”text” name=”user” ng-model=”user” required>

            <span style=”color:red” ng-show=”myForm.user.$dirty && myForm.user.$invalid”>

                <span ng-show=”myForm.user.$error.required”>Username is required.</span>

            </span>

        </p>

        <p>

          <input type=”submit” ng-disabled=”myForm.user.$dirty && myForm.user.$invalid”>

        </p>

    </form>

</div>

<script>

    var app = angular.module(‘myApp’, []);

    app.controller(‘formCtrl’, function($scope) {

        $scope.user = ‘John Doe’;

    });

</script>

Suggested: MEAN Stack course in Chennai.

Dependency Injection in AngularJS

Dependency injection is how AngularJS handles inter-component dependencies. Code becomes easier to test and maintain as a result.

<!DOCTYPE html>

<html>

<head>

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

</head>

<body ng-app=”myApp” ng-controller=”myCtrl”>

  <input type=”text” ng-model=”name”>

  <p>Hello, {{ name }}!</p>

  <script>

    var app = angular.module(‘myApp’, []);

    app.controller(‘myCtrl’, function($scope) {

      $scope.name = “World”;    });

  </script>

</body>

</html>

Related Training: NodeJS Training in Chennai.

Setting Up AngularJS

AngularJS must be included in your project first. You can use a CDN or download it from the official website to accomplish this.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>AngularJS Tutorial</title>

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

</head>

<body>

    <div ng-app=””>

        <p>Name: <input type=”text” ng-model=”name”></p>

        <p>You wrote: {{ name }}</p>

    </div>

</body>

</html>

Review your skills with our AngularJS Interview Questions and Answers.

AngularJS Architecture

Any online application can be developed with Angular by following the MVC (Model-View-Controller) and MVVM (Model-View-ViewModel) architectural patterns. 

This allows for a more structured and organized approach to application design, as well as better code management, improved maintainability, and other benefits. 

More scalable and testable applications are produced by these design patterns, which often preserve a distinct separation between data (Model), user interface (View), and logic (Controller/ViewModel). 

For big and complicated projects, it also guarantees a more efficient development process and offers code reusability.

Model View Whatever (MVW): It divides an application into three components, the Model, View, and Controller, each of which has specific duties. 

AngularJS implements something more akin to MVVM (Model-View-ViewModel) than MVC in the conventional sense. It’s jokingly called Model View Whatever by the Angular JS team.

Deep Linking: Deep linking enables the URL to be bookmarked by encoding the application’s state. After that, the URL can be used to restore the application to its previous state.

Dependency Injection: The built-in dependency injection subsystem in AngularJS makes it simple for developers to design, comprehend, and test applications.

Example: app.module.ts

import { NgModule } from ‘@angular/core’;

import { BrowserModule } 

    from ‘@angular/platform-browser’;

import { AppRoutingModule }

    from ‘./app-routing.module’;

import { AppComponent } from ‘./app.component’;

@NgModule({

    declarations: [

        AppComponent

    ],

    imports: [

        BrowserModule,

        AppRoutingModule

    ],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

Example: Component

import { Component } from ‘@angular/core’;

@Component({

    selector: ‘app-root’,

    templateUrl: ‘./app.component.html’,

    styleUrls: [‘./app.component.css’]

})

export class AppComponent {

    title = ‘AngularApp’;

}

Enroll in our full stack training in Chennai.

Key Differences Between AngularJS and Angular

Although both AngularJS (also known as Angular 1.x) and Angular (Angular 2 and higher) are well-liked frameworks for creating online applications, their capabilities, architecture, and performance differ significantly. The primary differences between AngularJS and Angular are listed below:

Kickstart your career with our web development course in Chennai.

When to Use Which?

AngularJS: Ideal for older applications or minor initiatives. if an existing AngularJS application needs to be maintained.

Angular: Perfect for new initiatives, particularly those involving large-scale applications. if you desire new features, scalability, and improved performance.

Importance of Learning AngularJS

Web developers are drawn to AngularJS because of its many practical features. It is an effective framework for creating RIAs, or rich internet applications. With AngularJS, developers can use JavaScript to create clean Model View Controller (MVC) client-side apps. 

Explore all software courses here.

Conclusion

Setting up the environment, comprehending directives, controllers, modules, filters, services, routing, forms, and custom directives are all covered in this AngularJS tutorial for beginners. You can explore more complex subjects and best practices to improve your AngularJS apps as you get more knowledge of these ideas through our AngularJS training in Chennai.