1.
Angular -2

2.
Agenda
• Introduction to Angular.
• Angular-2
• Why Angular-2.
• Setup.

3.
Introduction to AnguarJs
• AnguarJs is a very powerful JavaScript Framework.
• It is a library written in JavaScript.
• It help us to create a reactive SPA.
• AnguarJs is open source, completely free, and used by
thousands of developers around the world.

4.
Difference between Version’s
• AnguarJs is a very powerful JavaScript Framework it
helped us to create great user exp web apps.
• Angular-2 – it was complete re-write of angular-1 and
future of angular. You donot need to worry or learn
angularjs.
• Angular-4 – it is a version update of angular-2.

5.
Angular -2
• It was announced in Sep 2016.
• Angular 2 is the next version of Google’s massively
popular MV* framework for building complex applications
in the browser (and beyond).
• Angular 2 comes with almost everything you need to
build a complicated frontend web or mobile apps, from
powerful templates to fast rendering, data management,
HTTP services, form handling, and so much more.

6.
Features of Angular 2
• Components - The earlier version of Angular had a focus of
Controllers but now has changed the focus to having components
over controllers. Components help to build the applications into
many modules. This helps in better maintaining the application over
a period of time.
• Typescript − The newer version of Angular is based on Typescript.
This is a superset of JavaScript and is maintained by Microsoft
• Services − Services are a set of code that can be shared by different
components of an application. So for example if you had a data
component that picked data from a database, you could have it as a
shared service that could be used across multiple applications.
• Better event-handling capabilities, powerful templates, and better
support for mobile devices.

7.
Components of Angular 2
• Modules − This is used to break up the application into
logical pieces of code. Each piece of code or module is
designed to perform a single task.
• Component − This can be used to bring the modules
together.
• Templates − This is used to define the views of an Angular
JS application.
• Metadata − This can be used to add more data to an
Angular JS class.
• Service − This is used to create components which can be
shared across the entire application.

8.
Angular 2 Environment
• Npm − Node package manager that is used to work with
the open source repositories. Angular JS as a framework
has dependencies on other components. And npm can be
used to download these dependencies and attach them
to your project.
• Git − This is the source code software that can be used to
get the sample project from the github angular site.
• Editor − There are many editors that can be used for
Angular JS development such as Visual Studio code and
WebStorm. In our tutorial, we will use Visual Studio code
which comes free of cost from Microsoft.

9.
Getting started with first Angular JS App:
• One way is to do everything from scratch which is the most difficult
and not the preferred way. Due to the many dependencies, it
becomes difficult to get this setup.
• Another way is to use the quick start at Angular Github. This
contains the necessary code to get started. This is normally what is
opted by all developers.
– “git clone https://github.com/angular/quickstart Demo “
• Angular CLI. Command Line Interface (CLI) can be used to create our
Angular JS application. It also helps in creating a unit and end-to-
end tests for the application.

10.
Angular 2 –CLI
• The Angular CLI is a tool to initialize, develop, scaffold and
maintain Angular applications
• Command Line Interface (CLI) can be used to create our Angular JS
application. It also helps in creating a unit and end-to-end tests for
the application.
Install NodeJs first.
npm install -g @angular/cli
ng new my-project
cd my-project
ng serve

11.
Updating with latest
• Updating NodeJS:
– Go to nodejs.org and download the latest version - uninstall (all) installed
versions on your machine first.
• Updating npm:
– Run [sudo] npm install -g npm (sudo is only required on Mac/ Linux)
• Updating the CLI
– [sudo] npm uninstall -g angular-cli @angular/cli
– npm cache clean
– [sudo] npm install -g @angular/cli

12.
Angular 2 Modules
• Modules − Modules are used in Angular JS to put logical
boundaries in your application. Hence, instead of coding
everything into one application, you can instead build
everything into separate modules to separate the
functionality of your application. Let’s inspect the code
which gets added to the demo application.
• In Visual Studio code, go to the app.module.ts folder in
your app folder. This is known as the root module class.

13.
A module is made up of the following parts −
• Bootstrap array − This is used to tell Angular JS which
components need to be loaded so that its functionality
can be accessed in the application. Once you include the
component in the bootstrap array, you need to declare
them so that they can be used across other components
in the Angular JS application.
• Export array − This is used to export components,
directives, and pipes which can then be used in other
modules.
• Import array − Just like the export array, the import array
can be used to import the functionality from other
Angular JS modules.

14.
Angular 2 – Architecture -
• Each application consists of Components.
A component consists of −
– Class − This is like a C++ or Java class which consists of
properties and methods.
– Metadata − This is used to decorate the class and extend the
functionality of the class.
– Template − This is used to define the HTML view which is
displayed in the application.

15.
• Each application is made up of modules.
• Each Angular 2 application needs to have one Angular
Root Module.
• Each Angular Root module can then have multiple
components to separate the functionality.

16.
Angular 2 - Components
• Components are a logical piece of code for Angular JS
application. A Component consists of the following
– Template − This is used to render the view for the application.
This contains the HTML that needs to be rendered in the
application. This part also includes the binding and directives.
– Class − This is like a class defined in any language such as C. This
contains properties and methods. This has the code which is
used to support the view. It is defined in TypeScript.
– Metadata − This has the extra data defined for the Angular class.
It is defined with a decorator.

17.
Class
• The class decorator. The class is defined in TypeScript. The class
normally has the following syntax in TypeScript.
class classname {
Propertyname: PropertyType = Value
}
Example:
export class AppComponent {
appTitle: string = 'Welcome';
}
Metadata
This is used to decorate Angular JS class with additional information.
Template:
This is the view which needs to be rendered in the application.

18.
Q & A