AngularJS

Angular JS Tutorial for Beginners: Learn AngularJS in 7 Days!

Training Summary

Angular Js is a Javascript framework used for building MVC based applications. This course is a step by step guide to learn AngularJS components like directives, filters, expressions etc.  and explore more of its programming aspect for SPA’s.

What is AngularJS?

Angular JS is an open source Model-View-Controller framework which is similar to the Java Script framework.

Angular JS is probably one of the most popular modern day web frameworks available today. This framework is used for developing mostly Single Page applications. This framework has been developed by a group of developers from Google itself.

Because of the sheer support of Google and ideas from a wide community forum, the framework is always kept up to date. Also, it always incorporates the latest development trends in the market.

AngularJS Features

Angular has the following key features which makes it one of the powerful frameworks in the market.

1. MVC – The framework is built on the famous concept of MVC (Model-View-Controller). This is a design pattern used in all modern day web applications. This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections. The division into different sections is done so that each one could be managed more easily.

2. Data Model Binding – You don’t need to write special code to bind data to the HTML controls. This can be done by Angular by just adding a few snippets of code.

3. Writing less code – When carrying out DOM manipulation a lot of JavaScript was required to be written to design any application. But with Angular, you will be amazed with the lesser amount of code you need to write for DOM manipulation.

4. Unit Testing ready – The designers at Google not only developed Angular but also developed a testing framework called “Karma” which helps in designing unit tests for AngularJS applications.

AngularJS Architecture

Angular.js follows the MVC architecture, the diagram of the MVC framework as shown below.

  • The Controller represents the layer that has the business logic. User events trigger the functions which are stored inside your                    controller. The user events are part of the controller.
  • Views are used to represent the presentation layer which is provided to the end users
  • Models are used to represent your data. The data in your model can be as simple as just having primitive declarations. For example, if you are maintaining a student application, your data model could just have a student id and a name. Or it can also be complex by having a structured data model. If you are maintaining a car ownership application, you can have structures to define the vehicle itself in terms of its engine capacity, seating capacity, etc.

AngularJS Advantages

Since it’s an open source framework, you can expect the number of errors or issues to be minimal.

  • Two-way binding – Angular.js keeps the data and presentation layer in sync. Now you don’t need to write additional JavaScript code to keep the data in your HTML code and your data later in sync. Angularjs will automatically do this for you. You just need to specify which control is bound to which part of your model.
  • Routing – Angular can take care of routing which means moving from one view to another. This is the key fundamental of single page applications; wherein you can move to different functionalities in your web application based on user interaction but still stay on the same page.
  • Angular supports testing, both Unit Testing, and Integration Testing.
  • It extends HTML by providing its own elements called directives. At a high level, directives are markers on a DOM element (such as an attribute, element name, and comment or CSS class) that tell AngularJS’s HTML compiler to attach a specified behavior to that DOM element. These directives help in extending the functionality of existing HTML elements to give more power to your web application.

AngularJS Hello World Application: Your First Example Program

The best way to see the power of an AngularJS Application is to create your first basic program “Hello World” app in AngularJS.

There are many integrated development environments you can use for AngularJS development, some of the popular ones are mentioned below. In our example, we are using Webstorm as our IDE.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

The example below shows

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body ng-app="app">
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

What is Controller in AngularJs?

A Controllers in AngularJs takes the data from the View, processes the data, and then sends that data across to the view which is displayed to the end user. The Controller will have your core business logic.

The controller will use the data model, carry out the required processing and then pass the output to the view which in turn is displayed to the end user.

What is React JS?

React is a Javascript library developed by Facebook which allows you to build UI components. It facilitates the creation of interactive User Interfaces. It also makes the code easier to understand and launch. React Java Script framework uses server-side rendering to provide a flexible, performance-oriented solution.

‭‬‬‬‬‬What is Angular?‬‬‬‬‬‬‬‬‬‬‬‬

Angular is a structural framework for developing dynamic web apps. It allows developers to use HTML as a template language and allows HTML’s syntax to express the application’s components briefly and clearly.

It is a fully featured JavaScript framework that helps developing dynamic, single page web apps. It also supports the (MVC) programming structure.

Key Features of React

  • Allows you to use 3rd party libraries
  • Time-Saving
  • Simplicity and Composable
  • Fully supported by Facebook.
  • Better user experience and very fast performance.
  • Faster Development
  • Code Stability with One-directional data binding
  • React Components

Key Features of Angular

  • Built-in support for AJAX, HTTP, and Observables
  • Large community support
  • Consistent with technology
  • Typescript offers efficiency
  • Cleaner and crisp Coding
  • Enhanced support for error handling
  • Seamless updates using Angular CLI
  • Forms and validation
  • Shadow DOM / local CSS
  • UI and Business Logic Separation

When to Choose to React?

React native framework will be the ideal choice for your app in the below-given cases:

  • You need an app with multiple events.
  • When your application development team has expertise in HTML, CSS, and JavaScript.
  • You should use React when your requirement demands a personalized app solution.
  • You want to create shareable components in your app project.

When to Choose Angular?

Angular 5 is a framework that will be the ideal choice for your app in the below-given cases:

  • You want ready-to-use solutions and want higher productivity.
  • When you want a large scale feature-rich application
  • When the development team has experience with Java, C#, and previous versions of Angular
  • App complexity remains Low to Medium level.

 

History of React JS

  • React was created by Jordan Walke in 2011 and Open sourced it in May 2013
  • Facebook and Instagram released React 16.0 on September 2017
  • The latest version React Fiber was released with React 16 in September 2017. React Fiber is an ongoing implementation of Reac’ts Core Algorithm.

History of Angular

  • AngularJS was released in 2010 by Google.
  • 2.0 version which also called Angular 2 or just Angular was released in September 2016
  • 4.0 version was released in March 2017
  • 5.0 version was released in Nov 2017

React vs. Angular: The Complete Comparison

Parameters React Angular
Type React is a JavaScript library, and it is much older compared with Angular. Angular is a complete framework.
Use of libraries React js can be packaged with other programming libraries. Angular is a complete solution in itself.
Learning curve It is easier to grasp compared Angular. However, it is difficult to learn when augmented with Redux. Learning Angular is not easy for beginners. Thus, it requires lots of training.
Community support When it comes to community support React doesn’t offer much. It has a viable and dependable community support system
Installation time React takes longer to set up. But, it is really fast for delivering projects and building apps. Angular is easy to set up but may lead to an increase in coding time which also results in delayed project deliveries.
Best feature It gives you the freedom to choose the tools, architecture, and libraries, for developing an app. It offers a limited amount of freedom and flexibility.
Data binding React language uses one-way data binding, which means that the Ul elements can’t be changed without updating the corresponding model state. Angular, on the other hand, uses the two-way data binding method. It helps you to ensure that the model state automatically changes when any change is made.
Testing & Debugging It requires a set of tools to perform different types of testing. The testing and debugging for a complete project is possible with a single tool.
Documentation Although it is also undergoing regular updates, the documentation is relatively faster. Due to the ongoing development process, the documentation is slower.
Updates Updates in React are simple because scripts help in the migration. It plans updates every six months, which gives some time to make needed changes for migration.
Application Types Use this app if you want to develop Native apps, hybrid apps, or web apps You should use this framework If you want to develop a SPA(Single Page Application) and mobile apps.
Ideal for Ideal for modern web development and native- rendered apps for Android and iOS devices. Ideal to use when you want to develop large-scale, feature-rich applications.
Model It is based on Virtual DOM Based on MVC (Model View Controller)
Written in JavaScript Typescript
Community Support Facebook developers community A large community of developers and supporters
Language preference JSX – JavaScript XML TypeScript
Companies Using Facebook, Uber Technologies, Instagram, Netflix, Pinterest, etc. Wepay, Beam, Auto Trader, Mesh, Streamline Social, etc.
Template JSX + J% (ES5/ES6) HTML + TypeScript
Abstraction Strong Medium
Git hub stars 126K 46.6 K
Adding Javascript library to the source code Possible Not possible
Restriction React gives you an option to choose without putting any performance penalty. An angular framework is very sensitive, which means that it restricts you from using large models.
Use of code React allows you to manage the code according to your desired format. Angular comes with many ready to use elements. However, it mainly comes from a specific provider. So, there are priority collisions and namesDaces.
Git hub stars 180K 80.8 K
Fork 30.3 K 48.2 K

 

Advantages of React

Here, are pros/benefits of using React:

  • Easy to learn because of its simple Design
  • The HTML-like syntax for which allows templating, and highly detailed documentation.
  • Developers can spend more time writing modern JavaScript, and less time worrying about the framework-specific code.
  • Enhance support for server-side rendering, making it a robust framework for content-focused applications.
  • Migrating between versions is in React.
  • Facebook offers “codemod” feature to automate much of the process.
  • Skills learned in React can be applied to Native development.
  • When you combine with ES6/7, ReactJS is perfect for managing heavy loads with relative ease.

Advantages of Angular

Here, are pros/benefits of using Angular:

  • Offers clean code development
  • Higher Performance
  • Material Design-like Interface
  • An angular framework can take care of routing which means moving from one view to another is easy
  • Seamless Updates using Angular CLI

Disadvantages of React

Here, are cons/problems of using React:

  • Integrating Reacts in the traditional MVC framework like Rail requires complex configuration.
  • ReactJS would require the users to have in-depth knowledge with respect to the integration of user interface into M VC framework.

Disadvantages of Angular

Here, are cons/problems of using Angular:

  • An angular feature can be confusing for newcomers.
  • There is no clear manual and extensive, all-inclusive documentation.
  • Steep learning curve
  • Scopes are hard to debug Limited Routing.
  • Angular some time becomes slow with pages embedding interactive elements.
  • Third party integration is very difficult.
  • While switching from the older versions to the newer ones, you may face several issues.

Top 20 AngularJS Interview Questions & Answers

1) What is AngularJS?

AngularJS is a javascript framework used for creating single web page applications.  It allows you to use HTML as your template language and enables you to extend HTML’s syntax to express your application’s components clearly

2) Explain what are the key features of AngularJS ?

The key features of AngularJS are

  • Scope
  • Controller
  • Model
  • View
  • Services
  • Data Binding
  • Directives
  • Filters
  • Testable

3) Explain what is scope in AngularJS ?

Scope refers to the application model, it acts like glue between application controller and the view.  Scopes are arranged in hierarchical structure and impersonate the DOM ( Document Object Model) structure of the application.  It can watch expressions and propagate events.

4) Explain what is services in AngularJS ?

In AngularJS services are the singleton objects or functions that are used for carrying out specific tasks.  It holds some business logic and these function can be called as controllers, directive, filters and so on.

5) Explain what are directives ? Mention some of the most commonly used directives in AngularJS application ? 

A directive is something that introduces new syntax, they are like markers on DOM element which attaches a special behavior to it. In any AngularJS application, directives are the most important components.

Some of the commonly used directives are ng-model, ng-App, ng-bind, ng-repeat , ng-show etc.

6) Mention what are the advantages of using AngularJS ?

AngularJS has several advantages in web development.

  • AngularJS supports MVC pattern
  • Can do two ways data binding using AngularJS
  • It has per-defined form validations
  • It supports both client server communication
  • It supports animations

7)  Explain what is data binding in AngularJS ?

Automatic synchronization of data between the model and view components is referred as data binding in AngularJS.  There are two ways for data binding

  1. Data mining in classical template systems
  2. Data binding in angular templates

8)  What makes AngularJS better ?

  • Registering Callbacks: There is no need to register callbacks . This makes your code simple and easy to debug.
  • Control HTML DOM programmatically:  All the application that are created using Angular never have to manipulate the DOM although it can be done if it is required
  • Transfer data to and from the UI: AngularJS helps to eliminate almost all of the boiler plate like validating the form, displaying validation errors, returning to an internal model and so on which occurs due to flow of marshalling data
  • No initilization code: With AngularJS you can bootstrap your app easily using services, which auto-injected into your application in Guice like dependency injection style

9)  Explain what is string interpolation in AngularJs ?

In Angular.js the compiler during the compilation process matches text and attributes using interpolate service to see if they contains embedded expressions.  As part of normal digest cycle these expressions are updated and registered as watches.

10)  Mention the steps for the compilation process of HTML happens?

Compilation of HTML process occurs in following ways

  • Using the standard browser API, first the HTML is parsed into DOM
  • By using the call to the $compile () method, compilation of the DOM is performed.  The method traverses the DOM and matches the directives.
  • Link the template with scope by calling the linking function returned from the previous step

11)  Explain what is directive and Mention what are the different types of Directive?

During compilation process when specific HTML constructs are encountered a behaviour or function is triggered, this function is referred as directive.  It is executed when the compiler encounters it in the DOM.

Different types of directives are

  • Element directives
  • Attribute directives
  • CSS class directives
  • Comment directives

12)  Explain what is injector?

An injector is a service locator.  It is used to retrieve object instances as defined by provider, instantiate types, invoke methods and load modules.  There is a single injector per Angular application, it helps to look up an object instance by its name.

13)  Explain what is the difference between link and compile in Angular Js?

  • Compile function: It is used for template DOM Manipulation and collect all of the directives.
  • Link function: It is used for registering DOM listeners as well as instance DOM manipulation. It is executed once the template has been cloned.

14)  Explain what is factory method in AngularJS?

For creating the directive, factory method is used.  It is invoked only once, when compiler matches the directive for the first time.  By using $injector.invoke the factory method is invoked.

15)  Mention what are the styling form that ngModel adds to CSS classes ?

ngModel adds these CSS classes to allow styling of form as well as control

  • ng- valid
  • ng- invalid
  • ng-pristine
  • ng-dirty

16)  Mention what are the characteristics of “Scope”?

  • To observer model mutations scopes provide APIs ($watch)
  • To propagate any model changes through the system into the view from outside of the Angular realm
  • A scope inherits properties from its parent scope,  while providing access to shared model properties, scopes can be nested to isolate application components
  • Scope provides context against which expressions are evaluated

17)  Explain what is DI (Dependency Injection ) and how an object or function can get a hold of its dependencies ?

DI or Dependency Injection is a software design pattern that deals with how code gets hold of its dependencies.  In order to retrieve elements of the application which is required to be configured when module gets loaded , the operation “config” uses dependency injection.

These are the ways that object uses to hold of its dependencies

  • Typically using the new operator, dependency can be created
  • By referring to a global variable, dependency can be looked up
  • Dependency can be passed into where it is required

18)  Mention what are the advantages of using Angularjs framework ?

Advantages of using Angular.js as framework are

  • Supports two way data-binding
  • Supports MVC pattern
  • Support static template and angular template
  • Can add custom directive
  • Supports REST full services
  • Supports form validations
  • Support both client and server communication
  • Support dependency injection
  • Applying Animations
  • Event Handlers

19)  Explain what is the difference between AngularJS and backboneJs?

AngularJS combines the functionalities of most of the 3rd party libraries, it supports individual functionalities required to develop HTML5 Apps.  While Backbone.js do their jobs individually.

20)  Who created Angular JS ?

Intially it was developed by Misko Hevery and Adam Abrons. Currently it is being developed by Google.