Angular Java Script 2017-11-17T13:20:29+00:00

Angular Java Script

AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.



Prerequisites for AngularJS Course

The HTML script Tag. The script tag is used to define a client-side script (JavaScript). The script element either contains scripting statements, or it points to an external script file through the src attribute. To select an HTML element, JavaScript very often use the document.Get Element ById(id) method.

  • HTML and JavaScript

AngularJS Introduction

AngularJS extends HTML with new attributes. AngularJS is perfect for Single Page Applications (SPAs). AngularJS is easy to learn.

  • Introduction To Client Side Scripting Languages
  • Basics of Javascript and jQuery
  • Introduction to AngularJS and Its History
  • Why should we use AngularJS?

Execution flow

Execution flow of a directive in angular java script and using its attributes.



In AngularJS, a Controller is defined by a JavaScript constructor function that is used to augment the AngularJS Scope. When a Controller is attached to the DOM via the ng-controller directive, AngularJS will instantiate a new Controller object, using the specified Controller’s constructor function.

  • Properties, Methods
  • Binding controllers with views
  • Controller hierarchy
  • Sharing data between controllers

Bootstrapping Angular APPS

Auto Bootstrapping : Angular initialises / bootstraps automatically upon DOM Content Loaded event or when the angular js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the ng-app directive.

  • Auto bootstrap
  • Custom bootstrap

Data Binding

Data-binding in AngularJS apps is the automatic synchronisation of data between the model and view components. The way that AngularJS implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times.

  • Binding Model Objects
  • Model Objects Visibility
  • $scope
  • $rootScope
  • Difference between $scope & $rootScope
  • Using $emit & $broadcast
  • JSON advantages
  • Using JSON in Angularjs
  • Use of $watch, $digest & $apply

Understanding AngularJS Architecture

Angular js follows the MVC architecture, the diagram of the MVC framework.


Dependency Injection

Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. The AngularJS injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.

  • What is Dependency Injection?
  • Implicit DI
  • Inline Array Annotated DI
  • $inject Array Annotated DI


Expressions are used to bind application data to html. Expressions are written inside double braces like expression. Expressions behaves in same way as ng-bind directives. AngularJS application expressions are pure javascript expressions and outputs the data where they are used.

  • AngularJs Expressions, AngularJS Numbers
  • AngularJS Strings, AngularJS Arrays
  • AngularJS Objects


AngularJS directives are extended HTML attributes with the prefix ng- . The ng – app directive initialises an AngularJS application. The ng – init directive initialises application data. The ng – model directive binds the value of HTML controls (input, select, text area) to application data.

  • Power of directives
  • Working with built in directives
  • ng-app, ng-init
  • ng-model, ng-repeat
  • ng-class, ng-template
  • ng-include
  • Working with custom directives


AngularJS provides filters to transform data: currency Format a number to a currency format. date Format a date to a specified format. filter Select a subset of items from an array. LimitTo Limits an array/string, into a specified number of elements/characters.

  • Adding Filters to Expressions
  • Adding Filters to Directives
  • Working with built in filters
  • Creating custom filters


AngularJS includes certain directives which can be used to provide custom behaviour on various DOM events, such as click, dblclick, mouse enter etc. The following table lists AngularJS event directives. Event Directive. ng-blur. ng-change.

  • ng-click
  • Hiding HTML Elements
  • ng-disabled
  • ng-show, ng-hide


A module is a collection of services, directives, filters, and configuration information. A module can be an application, or it can be a collection of components that can be injected into other modules. In Angular, that’s the way you group related things together so you can benefit from its dependency injection system.

  • Controllers Pollute the Global Namespace
  • AngularJS Application Files

AngularJS XMLHttpRequest (AJAX)

AngularJS – Ajax. AngularJS provides control which works as a service to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format.

  • AngularJS $http

AngularJS Forms & Input Validation

Form Validation. AngularJS offers client-side form validation. AngularJS monitors the state of the form and input fields (input, text area, select), and lets you notify the user about the current state. AngularJS also holds information about whether they have been touched, or modified, or not.

AngularJS Service Types

AngularJS Provider. The next type of service we have is provider. It is the parent of all the service types in AngularJS except the constant which we will discuss next after provider. It is the core service type, and other services are built on top of it.

  • Constants & Values, Factories
  • Services, Providers

Single Page Applications

AngularJS is a modern JavaScript framework from Google commonly used to work with Single Page Applications (SPAs). AngularJS is open sourced under MIT license, and the development progress of AngularJS can be followed on its GitHub repository. The library is called Angular because HTML uses angular-shaped brackets.

  • What is SPA?
  • How to work with SPA in angular
  • Working with routes
  • Static & dynamic routing


You will build an AngularJS client that consumes a Spring-based RESTful web service. Specifically, the client will consume the service created in Building a RESTful Web Service with CORS.

  • Overview of REST API
  • Use of angular resource module


Animations can make a web application fun to use. Modern browsers are capable of animating different elements on a webpage by using just CSS. If you are using AngularJS in one of your projects, you can also use the ngAnimate module to add animation to it in the Angular way.

  • Overview of transitions
  • Use of angular animate module

Angular with UI Frameworks

Mobile Angular UI is a user interface (UI) framework for designing HTML5 mobile applications. It is optimised for AngularJS and Bootstrap and supports powerful libraries like fast click js and overthrow js. The framework offers essential mobile components, such as sidebars, overlays, switches, scrollable areas and more.

  • ui boostrap
  • angluar-material

Behaviour Driven Development

Behaviour Driven Development with AngularJS & Jasmine. BDD Definition “BDD is a second-generation, outside-in, pull-based, multiple-stakeholder, multiple-scale, high-automation, agile methodology.”

  • Overview of Nodejs
  • Installation of karma & jasmin
  • working with karma & jasmin

Join The 10,000+ Satisfied Trainees!