Lets understand Angular

1. Angular Kickstart

2. Prerequisites
2

3. What is Angular :
 Angular is a client side JavaScript framework.
 It is allows you to create modern Single Page Application.
 Released in Sep 2016.
 Developed and maintained by Google.
 We can build large scale and high performance web application.
 In-built services and plug-in which useful for develop web app.
 Customize and create own plug-in, directives and services.
 Major version will be released every six months.

4. What is Single Page Application:
 In Traditional website, content is organized on individual pages that are usually
static.
 When user performs some action it will load entire page.
 But in SPA website all the pages and content will load only once when user first
views the application.
 After that when ever user performs any action, instead of loading entire page it
will load only the content.
Traditional website SPA website

5. What is a SPA? ( Contd.,)
Source: http://jpapa.me/wikispa
a single page application literally has only one page !!

6. Why a SPA?
• Rich Interface ( no constant full page reloads)
• Reaching Multiple Devices
• Responsive
• Portable

7. Angular and Its Releases
7

8. Angular JS Vs Angular - Architecture
8

9. Angular JS Vs Angular – Architecture( Contd.,)
9

10. Angular JS Vs Angular - Language
10
Typescript
ES 2015
ES 5

11. Angular JS Vs Angular – Expression Syntax
11

12. Angular JS Vs Angular – Mobile
12

13. Angular JS Vs Angular – Routing
13

14. Angular JS Vs Angular – Advantages
14

15. Key Changes
Angular 1.x Angular 2.0
Controllers Components
Views Templates
Directives Simplified Directives
Two Way Data Binding
One & Two Way Data
Binding
$Scope No Scope

16. Features :
 Modularity
 Adding new feature module without changing the overall code base.
 Speed and Performance
 Using Routing concept which split the code allowing users to load only
relevant code required for the rendering the requested view.
 TypeScript
 TypeScript is superset of JavaScript. Coding is written in ES6 and
converted to ES5.

17. What do we need to start Angular apps:
 Editor:
 We need to have an editor for developing or writing your angular scripts and which
supports TypeScript. Ex: Visual Studio Code
 Browser:
 Of course we are developing web app so we need a Browser. Ex: Google Chrome.
 Node / npm:
 We need node and npm (Node Package Manager) to be installed in your machine.
 Angular CLI:
 The Angular CLI is a command line interface tool that can create a project, add files,
and perform a variety of ongoing development tasks such as testing, bundling, and
deployment.
 JS Task Runnser / Bundling: Grunt, Gulp and Webpack etc.
 Unit Testing: Karma, Jasmine etc.
 Linting: If you like to have coding standards you can use linting.

18. Why Node JS and Npm
“Angular” is entirely new framework and it is (Angular or Angular 2
and above) written in Typescript. Browser does not understand Typescript JS
(i.e., .ts) we need to compile them in plain JavaScript i.e., .js.
We need to use Node and NPM compile them into js file so that we
can deploy them in production.
Most of the Angular packages or libraries at GitHub repository
(github.com/angular/angular) are distributed as different NPM
packages. Node Package Manager(NPM) is heavily dependent on
Node.js.
 You do not need to use Node anywhere in production server to use front-end
JavaScript frameworks like Angular or react etc.
18

19. Set up the dev environment:
 STEP 1 : Install NodeJS, npm and Angular CLI:
 You need to set up your development environment before you can do anything.
 Install Node.js and npm if they are not already on your machine.
 Verify that you are running at least Node.js version 8.x or greater and npm
version 5.x or greater by running node -v and npm -v in a terminal/console
window. Older versions produce errors, but newer versions are fine.
 Then install the Angular CLI globally.
 STEP 2 : Create a new project :
 Open a terminal window.
 Generate a new project and default app by running the following command:
 The Angular CLI installs the necessary npm packages, creates the project
files, and populates the project with a simple default app. This can take some
time.

20. Set up the dev
environment(Contd.,)
 Step 3: Serve the application :
 Go to the project directory and launch the server.
 The ng serve command launches the server, watches your files, and rebuilds the
app as you make changes to those files.
 Using the --open (or just -o) option will automatically open your browser
on http://localhost:4200/.
 Your app greets you with a message:

21. Project File Review:
 The first file you should check out is README.md. It has some basic information on
how to use CLI commands.
 The src folder:
 Your app lives in the src folder.
 All Angular components, templates, styles, images, and anything else your app needs go here.
 Any files outside of this folder are meant to support building your app.
 The root folder :
 The src/ folder is just one of the items inside the project's root folder.
 Other files help you build, test, maintain, document, and deploy the app.
 These files go in the root folder next to src/.

22. Project File Review: ( src folder)
• Defines the AppComponent along with an
• HTML template, CSS stylesheet, and a unit test.
• It is the root component of what will become a tree
of nested components as the application evolves.
• Defines AppModule, the root module that tells
Angular how to assemble the application.
• Right now it declares only the AppComponent. Soon
there will be more components to declare.
• A folder where you can put images and anything else to
be copied wholesale when you build your application.
• The main HTML page that is served when someone
visits your site.
• Most of the time you'll never need to edit it.
• The CLI automatically adds all js and css files when
building your app so you never need to add any
<script> or <link> tags here manually.
•The main entry point for your app. Compiles the
application with the JIT compilerand bootstraps the
application's root module (AppModule) to run in the
browser. You can also use the AOT compiler without
changing any code by appending the--aotflag to the ng
build and ng serve commands.

23. Project File Review: ( root folder)
• Node.js creates this folder and puts all third party
modules listed in package.json inside of it.
• Configuration for Angular CLI.
• In this file you can set several defaults and also configure
what files are included when your project is built.•npm configuration listing the third party packages your
project uses. You can also add your own custom
scripts here.

24. Application
24

25. Component
25

26. Module
26

27. Building Blocks of Angular:
Modules
Components
Templates
Metadata
Data binding
Directives
Services
Dependency Injection
Routing

28. Angular 2 & above - Architecture
28

29. Angular Modules:
 Just a way of bringing various parts of Angular App into a single unit.
 Typical Angular Module structure.
 A class could be marked with “export”.
 @NgModule decorator.
 Decorator decorates (marks) class as a “Angular Module”.
 Contains additional info (metadata).
 Feature imports from other modules.
 Angular App contains at least one module.
 Usually called as “Root Module”.
 And also called as “AppModule”.
 Angular App can contains multiple module which is called as feature modules.
 Usually these modules connected to “AppModule”.
 Each module is responsible for a specific business or feature of Angular app.

30. Angular Components:
 Fundamental building-block of UI.
 Component contains UI and related logic.
 It is combination of 3 parts.
 Typical Angular Component structure.
 A class could be marked with “export”.
 Provides data to UI.
 Handles the events from UI.
 @Component decorator.
 Decorator decorates (marks) class as a “Angular Component”.
 Defines UI Template / View.
 Contains additional info (metadata).
 Feature imports from other modules.
 Angular App contains at least one component.
 Usually called as “Root Component”.
 And also called as “AppComponent”.
 Angular components can be nested and need to be included in AppModule in order
to make them work.
 Root module (AppModule) can start the Root Component (AppComponent).

31. Angular Templates:
 A template is nothing but a form of HTML tags that tells Angular about how to render
the component.
 A template looks like regular HTML, except for a few differences.

32. Metadata:
 Metadata tells Angular how to process a class.
 In TypeScript, you attach metadata by using a decorator.
 selector: selector tells Angular to create and insert an instance of this component
where it finds <app-hero-list>
 templateUrl: It contains the path of this component’s HTML template.
 providers: An array of dependency injection providers for services that the
component requires.

33. Data Binding:
 Interpolation ( {{...}} ) : You use interpolation to strings into the text between HTML
element tags and within attribute assignments.
 Property binding ( [property] ) : The Write a template property binding to set a
property of a view element. The binding sets the property to the value of a template
expression.
 Event binding ( (event) ) : The only way to know about a user action is to listen for
certain events such as keystrokes, mouse movements, clicks, and touches. You
declare your interest in user actions through Angular event binding.
 Two-way binding ( [(...)] ) : When developing data entry forms, you often both display
a data property and update that property when the user makes changes.

34. Data Binding ( Contd.,)

35. Directives:
 Angular templates are dynamic. When Angular renders them, it transforms the DOM
according to the instructions given by directives.
 A directive is a class with a @Directive decorator.
 A component is a directive-with-a-template;
 @Component decorator is actually a @Directive decorator extended with template-
oriented features.
 While a component is technically a directive, components are so distinctive and
central to Angular applications that this architectural overview separates components
from directives.
 Two other kinds of directives exist: Structural and Attribute directives.

36. Directives:
 Structural directives alter layout by adding, removing, and replacing elements in DOM.
 This example template uses two built-in structural directives:
 *ngFor tells Angular to retrieve one <li> per movie in the movies
 *ngIf includes the MovieDetail component only if a selected movie exists.

37. Directives:
 Attribute directives alter the appearance or behavior of an existing element.
 In templates, they look like regular HTML attributes.
 The ngModel directive, which implements two-way data binding, is an example of an attribute
directive.
 Angular has a few more directives that either alter the layout structure (for example, ngSwitch)
 Modify aspects of DOM elements and components (for example, ngStyle and ngClass).

38. Dependency Injection:
 Dependency injection is a way to supply a new instance of a class with the fully-formed
dependencies it requires.
 Most dependencies are services. Angular uses dependency injection to provide new
components with the services they need.
 Angular can tell which services a component needs by looking at the types of its
constructor parameters.
 When Angular creates a component, it first asks an injector for the services that the
component requires.

39. Dependency Injection:
 We can register any service in provider property inside metadata.
 Provider is something that can create or return a service, typically the service class
itself.
 You can register providers in modules or in components.
 In general, add providers to the root module so that the same instance of a service is
available everywhere.
 Alternatively, you can register a service at a component level in the providers property
of the @Component decorator.

40. Routing:
 The Angular Router enables navigation from one view to the next as users perform
application tasks.
 Set the <base href> :
 You must add a <base href> element to the app's index.html for pushState routing to work.
 Add the <base> element just after the <head> tag.
 Add routes :
 Routes tell the router which view to display when a user clicks a link or pastes a URL into the
browser address bar.
 A typical Angular Route has two properties:
 path: a string that matches the URL in the browser address bar.
 component: the component that the router should create when navigating to this route.
 Once you've finished setting up, the router will match that URL to path: 'heroes' and display
the HeroesComponent.

41. Routing:
 RouterModule.forRoot( ) :
 You first must initialize the router and start it listening for browser location changes.
 Add RouterModule to the @NgModule.imports array and configure it with the routes in one
step by calling RouterModule.forRoot( ) within the imports array, like this:
 The method is called forRoot() because you configure the router at the application's root level.
The forRoot() method supplies the service providers and directives needed for routing, and
performs the initial navigation based on the current browser URL..
 Add RouterOutlet :
 Open the AppComponent template and add <router-outlet> element.
 The <router-outlet> tells the router where to display routed views.
 The RouterOutlet is one of the router directives that became available to the AppComponent
because AppModule imports AppRoutingModule which exported RouterModule.

42. Reference:
 https://angular.io
 https://material.angular.io/guide/getting-started
 https://nodejs.org/en/
 https://code.visualstudio.com/download

43. Any Questions ?