AngularJS Tutorial

1.What is Angular Js?

Angular Js is a JavaScript FrameWork to make frontend development easy. It is used for dynamic web apps and one-page web applications. It is an open Source Frame Work. It can added to web page with <script> tag.

<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

 

2.Why should we use Angular JS?

The framework consists of a tightly integrated toolset that will help you build well structured with less code and more flexibility.
AngularJS is a relatively new js framework by Google.It is designed to make your front-end development.
There are many frameworks and plugins available.

  • We can write less code in Angular Js.
  • A declarative user interface.
  • Behavior with directives.
  • Flexibility with filters.
  • DOM manipulations where they belong
  • Context-aware communication.

 

3.What are the key Features of Angular Js?

The Key Features of angular js are:

  • Modules
  • Directives
  • Templates
  • Scope
  • Expressions
  • Data Binding
  • MVC Framework(Model, View & Controller)
  • Filters
  • Services
  • Validations
  • Routing
  • Dependency Injection
  • Testable

 

Modules:
AngularJS modules divide the web application into small, reusable and functional components which can be integrated with other web apps.
Every module is identified by its unique name and it will be dependent on other modules.

 

Directives:
Directives are used to extend the HTML vocabulary.
They decorate HTML elements with new behaviors and help to manipulate HTML elements attributes in an interesting way.

 

Templates:
AngularJS templates are just plain old HTML that contains Angular-specific elements and attributes.
By using these templates to show information from the model and controller.

 

Expressions:
Expressions are like Javascript code snippets that are placed in bindings such as {{ expression }}.
AngularJS expressions don't support control flow statements(conditionals, loops, or exceptions).
These support filters to format data before displaying it.

 

Data Binding:
Data-binding is the most useful feature.This will provide two-way data-binding to handle the synchronization of data between model and view.

 

Scope:
A scope is an object that refers the application model. It acts as a context for evaluating the expressions. Typically, also which acts as a glue between controller and view.

 

Filter:
Angular JS Filters are used to format the data before displaying it to the user.
it is used in view templates, controllers, services, and directives.
we have some built-in filters provided by angular js like as Currency, Date, Number, OrderBy, Lowercase, Uppercase etc. we can also create our own filters.

 

4.How Angular Js Extends HTML?

The Angular Js Extends Html by ng-directives.They are

ng-app: The ng-app directive defines an Angular Js Application.

ng-model: The ng-model bind/hold the value of Html Controllers like Select, text area, input.

ng-bind: The ng-bind binds the application data to display the value in an HTML page.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<body>
<div ng-app="">
<p>Full Name:<input type="text" ng-model="name"></p>
<h1>Hello{{name}}</h1>
<p>Please Enter in the input and observe the result</p>
</div>
</body>
</html>

 

5.What is the difference between angular js and javascript?

Angular Js:

  •  AngularJS is a web application framework.which is written in JavaScript.
  • Mostly AngularJS is used for Single Page Applications (SPAs).
  • we can manage the behavior of your HTML using AngularJS.
  • This Angular JS uses Javascript only with other web technologies(HTML, CSS).
  • It simplify's both the development and testing of such applications by providing the framework for client-side model–view–controller (MVC).

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<body>
<div ng-app="">
<p>Full Name:<input type="text" ng-model="name"></p>
<h1>Hello{{name}}</h1>
<p>Please Enter in the input and observe the result</p>
</div>
</body>
</html>

 

JavaScript:

  • Javascript is Scripting Language and Angular js is  Model View Controller(MVC) framework.
  • JavaScript is a high-level, dynamic, and interpreted programming language.
  • Generally, Javascript is used to create responsive front ends to web apps.
  • It is client-side scripting language.

<!DOCTYPE HTML>
<html>
<head>
</head> <body>
<p id="example"></p>
<script type="text/javascript"> // write your script here.
document.getElementById("example").innerHTML= "sai";
</script>
</body>
</html>