ngularJS is one of the JavaScript open-source web application frameworks which is generally used to add an HTML page along with a tag. The major aim of AngularJS is to simplify the application development and testing performance by providing a framework called MVC (Model View Controller) Architecture. It enables the application to change from bulk amount of programming code into a simple code.

1. RUCHIWEBSOLUTIONS.COM | Call at 91-
9032803895

2. RUCHIWEBSOLUTIONS.COM | Call at 91-
9032803895
Angular Intro
Angular is javascript framwork. framwork is set of predefined class,
function and bunch of libraries. Latest version of angular is 8.0.8.
Development version of angular is 6.0
Angular is a very powerful JavaScript Framework. It is used in Single Page
Application (SPA) projects.
It is a google product. Now a days google is using angular in his all
products.
where to use angular6
A)- we can create static website
B) -we can create dynamic website.
- single page application(SPA):
any application with bunch of functionality.
those functionality will be there in single page.
if you try to access any functionality then without reloading the page or
without refreshing the page or without going to another url, it will work.
page reload will not be there OR url redirection will not be there. so your
website will be faster and it will be user friendly and it will be easy for
user to use ( UI Friendly website ) .
if you will click content will change but page will not refreshed.
-it is javascript framework

3. www.ruchiwebsolutions.com | info@ruchiwebsolutions.com | Call at 91-9032803895
It extends HTML DOM with additional attributes and makes it more
responsive to user actions.
Angular6 is open source, completely free, and used by thousands of
developers around the world.
It is licensed under the Apache license version 2.0.
It can be added to an HTML page with a <script> tag. AngularJS
extends HTML attributes with Directives, and binds data to HTML
with Expressions. It is a library written in JavaScript. <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.mi
n.js"> </script>
website : https://angularjs.org/ or https://angular.io/
Documentation : https://angular.io/docs
Features of angular: Because this is Single page application so
1) Speed (reloading of page will not be there in angular) and
Performance will be good.
2) Code generation- js, css, html separated and easy to handle.
3) template or design pattern will be easy to make.

4. www.ruchiwebsolutions.com | info@ruchiwebsolutions.com | Call at 91-9032803895
Advantages of Angular
Angular provides capability to create Single Page Application in a very clean and
maintainable way.
application will be faster and user friendly.
Angular provides data binding capability to HTML thus giving user a rich and
responsive experience
Angular code is unit testable.
Angular uses dependency injection and make use of separation of concerns.
Angular provides reusable components.
With Angular, developer write less code and get more functionality.
In Angular, views are pure html pages, and controllers written in JavaScript do the
business processing.
Disadvantages of Angular
Not Secure − Being JavaScript only framework, application written in AngularJS are
not safe. Server side authentication and authorization is must to keep an application
secure.
Not degradable − If your application user disables JavaScript then user will just see
the basic page and nothing more.

5. www.ruchiwebsolutions.com | info@ruchiwebsolutions.com | Call at 91-9032803895
MVC : Model, view and controller( M V C architechture - your logic(Model), your
design(View) / your data will be separate. Controller is bridge between model and view.)
Model: Here we can define all the logics. and database query.
View: data represented to user. html data is called view.
controller: it is a brige between model and view.it will talk to model , get data and pass to
view . view is to view
AngularJs Core features:What we can do using angularJs
Data-binding − It is the automatic synchronization of data between model and view
components.
Scope − These are objects that refer to the model. They act as a glue between controller
and view.
Controller − These are JavaScript functions that are bound to a particular scope in
angularjs.
Services − AngularJS come with several built-in services for example $https: to make a
XMLHttpRequests. These are singleton objects which are instantiated only once in app.
Filters − These select a subset of items from an array and returns a new array.
Directives − Directives are markers on DOM elements (such as elements, attributes, css,
and more). These can be used to create custom HTML tags that serve as new, custom
widgets. AngularJS has built-in directives (ngBind, ngModel...)

6. www.ruchiwebsolutions.com | info@ruchiwebsolutions.com | Call at 91-9032803895
Templates − These are the rendered view with information from the controller
and model. These can be a single file (like index.html) or multiple views in one
page using "partials".
Routing − It is concept of switching views.
Model View and controller − MVC is a design pattern for dividing an application
into different parts (called Model, View and Controller), each with distinct
responsibilities. AngularJS does not implement MVC in the traditional sense, but
rather something closer to MVVM (Model-View-ViewModel). The Angular JS
team refers it humorously as Model View Whatever.
Deep Linking − Deep linking allows you to encode the state of application in the
URL so that it can be bookmarked. The application can then be restored from the
URL to the same state.
Dependency Injection − AngularJS has a built-in dependency injection subsystem
that helps the developer by making the application easier to develop, understand,
and test.

7. www.ruchiwebsolutions.com | info@ruchiwebsolutions.com | Call at 91-9032803895
What Is Angular?
The Angular framework is an open source JavaScript-based framework. It was
actually developed by Misko Havery and Adam Abrons in 2009. This framework
supports the JavaScript-based MVC (MVVM) framework. As per the Google, the
definition of the angular is a below -
“AngularJS is a structural framework for dynamic web applications. It lets you use
HTML as your template language and lets you extend HTML's syntax to express
your application components clearly and succinctly.”
The most common advantages for which developers like to use Angular from their
projects are –
It supports MVC Concept
It always supports SPA Application (Single Page Applications)
It Supports Client Side Templating
In this framework, we can perform unit testing very easily.
Prerequisite for Angular
To start development in Angular 6.0, we need to follow the below perquisites:
Install Node.js.
Install TypeScript 2.7 or above.
Microsoft Visual Studio or Visual Code for writing code.
Install lite-server (in case you are using Visual Code) to host and run the application

8. www.ruchiwebsolutions.com | info@ruchiwebsolutions.com | Call at 91-9032803895
new features added to Angular 6 -
Updated Angular CLI, Command Line interface - New commands added, like ng-
update to migrate from previous version to current version. ng-add to quickly add
application features to make application a progressive web apps.
Updated CDK, Component Development Kit - Supports creating custom UI
elements without need of angular material library. Supports responsive web design
layouts. Supports overlay packages to create pop-ups.
Updated Angular Material - New Tree component added, mat-tree, a styled version
and cdk-tree, a unstyled version, to represent a hierarchical structure like tree.
Usage of RxJS, a reactive JS library
Angular Element - Allows Angular Components to be published as Web
Components which can then be used in any HTML page. Using Angular Element
package, native custom elements can be created easily.
Multiple Validators - Allows multiple validators to be applicable on a form builder.
Tree Shaking on Services - Now tree shaking can be applied on services as well to
remove the dead code.

9. www.ruchiwebsolutions.com | info@ruchiwebsolutions.com | Call at 91-9032803895
ng add is a new command in Angular-cli that helps you install and download new
packages in your angular apps. It works the same as npm, but it doesn’t replace it.
> ng add @angular/core
ng update is a new Angular-cli command too. It’s used to update and upgrade your
packages. It’s really helpful, for example, when you want to upgrade from Angular
5 to Angular 6,
> ng update @angular/core
Use ng-template instead of template directive
You can use ng-template to render the HTML instead of the template tag in the
new version of Angular. ng-template is an Angular element, and it works when it is
used with a structural directive such as *ngFor and *ngIf
Angular elements
Angular 6 introduced us to Angular elements. You’re able to render your Angular
elements as native web elements, and they’re interpreted as trusted HTML
elements.
Angular Elements
Angular is a perfect framework for developing Single Page Applications. To create a
widget or component that can be included in any existing web page, was not a
simple task in earlier versions of Angular. But in Angular 6.

10. www.ruchiwebsolutions.com | info@ruchiwebsolutions.com | Call at 91-9032803895
Service Worker Support::
Angular 6 now supports the configuration of navigation URLs within the Service
Workers. The service worker will redirect navigation requests that don’t match any
source or data group to the specified index file. Now, we can mention an optional
navigationUrls list in ngsw-config.json files which contain the desired URLs.
Bye, Bye Template Element
The <template> element was depreciated one year ago when Angular 4 was
launched. Now it’s time to say goodbye to <template> because it is now removed
from Angular 6 framework. Instead of using <template>, we now need to use <ng-
tempalate>.
i18n
One of the major changes in Angular 6 is internationalization or i18n. In Angular 6,
i18n is coming with runtime rendering so that there is no requirement to build one
application per locale. The currency pipe was improved in Angular 6 in such a that
it makes a lot of sense
Ivy: New Rendering Engine
In Angular 6, the Angular team introduced their third rendering engine called Ivy.
Ivy is the next generation Angular rendering engine.

11. www.ruchiwebsolutions.com | info@ruchiwebsolutions.com | Call at 91-9032803895
ElementRef<T>
In previous versions of Angular, when we want to create the reference of an
element in the template, we can use @ViewChild or @ViewChildren or inject the
host using ElementRef directly.
Bazel Compiler
Bazel Compiler is actually a build system or mechanism which is used to build
nearly all software at Google. This compiler only rebuilds what is necessary to
build.
RxJS 6.0
Angular 6 now used RxJS 6 internally. So we need to update our application
accordingly. These changes provide developers an increase in performance and are
easier to debug AJAX call stacks and improve modularity also
Tree Shaking
Angular 6 moved from modules referencing services to services referencing
modules to make the Angular app smaller. Tree shaking is a build optimization step
which tries to ensure any unused code does not get used in our final bundle.
Instead of rendering template data and passing that directly into the interpreter
which knows how to do everything, the new renderer is going to generate the
template instructions directly. This results in much smaller bundles and a faster
startup time.