Angular 7 Understanding the

Boilerplate Project
Subscribe me on youtube channel: “Tech Charades”
https://www.youtube.com/channel/UCvWkBukdDuPKthZiNuHfYog

TechCharades
Meet Angular One Framework. Mobile & Desk

 AngularJS in 2010 by Google  Angular in 2016, rewrite of AngularJS

 Only one version 1.0  Version 2.x,4.x.5.x,6.x,7 (latest is 7)
 Has been converted to Angular  It is released every 6 months time
 Written in JavaScript  Written and coded in TypeScript(superset
of JavaScript which helps to build more
robust and structured code)

AngularJS Angular2+

MVC Service/Controller
Controller Based UI Component Based UI
SEO for SPA Feasible for SEO
Web Browser Friendly Mobile Friendly
Front End Development

-UI Layer -Back End

-Client Side -Server Side
-Requester for data -Business Logic Layer
-Display/Presentation –Layer -Database layer
-HTML, CSS, JS, Images, Animations -Responder for data
-Event Handling on Browsers/Mobile -Java, PHP, DotNet etc.

-Angular -SPA – Single Page Applications

-ReactJs -Mobile Apps with Ionic, React Native
-VueJs -Responsive
-High Performance
TechCharades -Compatible for NodeJs Server Devs
Pad Up and Hit the First Runs …
Npm – Node Package Manager
1 Install NodeJs and NPM from
https://nodejs.org/en/download/ -A place where all the software packages are
hosted.
- Run node-v in terminal/powershell -Downloads the requested packages

2 Install Angular CLI latest stable version

npm install -g @angular/cli
CLI - is a tool to install all required packages
for Angular Application to run.
Easy to create a boilerplate apps with cli

Create Angular Application in your ng – an executable program in

3 workspace and enter project
details
angular cli,
-new: creates a bunch of folders and files for
ng new first-ng-app angular project.
- Downloads node packages like angular core,
routing, http as mentioned in package.json

Run/Serve your application

4 cd first-ng-app
serve: another ng command
Compile – typescript code to js
Build – creates bundles
ng serve first-ng-app –open
Launch – app is live
http://localhost:4200 Rebuilds – above process is repeated on every
TechCharades
file change
--open : automatically opens the browser
Let’s Open the Angular Project Box …
npm downloads and installs the packages in package.json, in this folder

Root component of the app

app.component.ts : Defines the logic and root View for the app's root component,
named AppComponent.
app.module.ts : Defines the root module, named AppModule, that tells Angular how to
assemble the application.
app.component.spec.ts : Defines a unit test for the root AppComponent
app.component.css and app.component.html are html and css part of root component

index.html: The main HTML page that is served when someone visits your site. The CLI
automatically adds all JavaScript and CSS files when building your app, so you typically
don't need to add any <script> or<link> tags here manually.

main.ts: 1. Main entry point of the app 2. Compiles the application using JIT | 3. Boots
app’s root module to run it in browser
polyfills.js: Provides polyfill scripts for browser support
style.css: Lists CSS files that supply styles for a project

TechCharades

package.json: defines the list of dependencies and packages required to be

installed for he app
main.ts – understand the entry point
Import statement to include required classes/objects/files

Import the root module of app

Bootstrap- Starts the root module

NgModule

TechCharades
index.html – The master Html

Selector property defined in

app.component.ts which renders the
component into the html here
TechCharades
Lets meet @NgModule - decorator
 The purpose of a NgModule is to declare each thing you create in Angular, and group
them together (like Java packages or PHP / C# namespaces).

“declarations” is for things you’ll use

in your templates: mainly
components (~ views: the classes
displaying data) LOCAL TO the MODULE
Only usable in current module

“providers” is for services (~ models:

the classes getting and handling data).
GLOBAL TO ALL MODULES
available / injectable anywhere in your app
Angular Modules:
1. Core
TechCharades 2. Common
3. http and so on
NgModules …
Modules to import each time you need them
 CommonModule (all the basics of Angular templating: bindings, *ngIf, *ngFor…),
except in the first app module, because it’s already part of the BrowserModule
 FormsModule / ReactiveFormsModule
 any other module giving you components, directives or pipes
Modules to import only once
 HttpClientModule
 BrowserAnimationsModule or NoopAnimationsModule
 any other module providing you services only.
 That’s why with Angular CLI, CommonModule is automatically imported when you
create a new module.
Lazy-loaded modules
RouterModule
TechCharades
@Component – decorator
that marks a class as an Angular component and
provides configuration metadata that determines
how the component should be processed,
instantiated, and used at runtime.

Tag element in template html

file

Template html and css file

paths to be associated with
this component

TechCharades
Routing Module

Import the api for routing

Array of route objects like

{path:’books’,component:BooksListComponent}

Routes/url in the browser is mapped with the html Component

To import modules in root module use

‘forRoot’.
For other submodules, use ‘forChild’

TechCharades
App Component Html

“title” is the property defined in a AppComponent class

Tag used by Angular to use

Routes on the page

TechCharades
Scoring ways in Angular…
 Interpolation  {{<variable>}}
 User Event Handling  (click)="addHero(newHero.value)
 Directives  <p appHighlight
[highlightColor]="'orange'">Highligh
ted in orange</p>
<div *ngIf="hero"
class="name">{{hero.name}}</div>

 Forms  <input [(ngModel)]="userName">

 CLI Commands  Ng add, ng generate, ng serve, ng

new, ng build, ng build, ng config
 Cheat Sheet from Docs
 https://angular.io/guide/cheatshe
et

TechCharades
 Thank you…

TechCharades