Scribd
Upload
63 views22 pages

L35 - Angular

This document provides an overview of Angular, including: - Angular is an open-source web framework developed by Google and released in 2016, with the latest version being 9.19. - It uses TypeScript for type safety, HTML for templates, and CSS for styles. Angular is a rewrite of AngularJS and is cross-platform. - To use Angular, NodeJS is required. Projects are initialized using the Angular CLI which sets up the project structure, including components, routing, and modules.

Uploaded by

C-dawg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
63 views22 pages

L35 - Angular

This document provides an overview of Angular, including: - Angular is an open-source web framework developed by Google and released in 2016, with the latest version being 9.19. - It uses TypeScript for type safety, HTML for templates, and CSS for styles. Angular is a rewrite of AngularJS and is cross-platform. - To use Angular, NodeJS is required. Projects are initialized using the Angular CLI which sets up the project structure, including components, routing, and modules.

Uploaded by

C-dawg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Angular

The Basics and more

COS216
AVINASH SINGH
DEPARTMENT OF COMPUTER SCIENCE
UNIVERSITY OF PRETORIA
Open-source, released October 2016, latest
version 9.19

Angular - Developed and Maintained by Google

Overview Code in Typescript + HTML + CSS

Predecessor was AngularJS and was rewritten to


Angular

Cross Platform

Needs NodeJS to run


How to use Angular?

 Firstly you need NodeJS


 Install Angular
npm install –g @angular/cli
 You will now get an ng binary to perform any actions.
 Since angular is a web-framework you need to use the CLI to start an application
ng new <app_name>
 You will get options to follow, chose yes for routing, when you come to stylesheets you can
chose any you wish but in most cases SCSS is used. You can also chose traditional CSS but
you have limited functionality
 After installing
ng serve -o
Project Structure

End-to-end Testing

Node libraries that are used in the app


List of node packages with versions

The main app

Assets like, images, js, other custom assets

The main page that gets loaded.


Concepts

 Routing – describes the navigation and working of the app


 Components – is the functionality you add to the app
Basic Structure

Describes thee components and


the routes

Testing file
Describes your component logic

Describes the packages or modules


needed for your component
Component

import { Component } from '@angular/core';

@Component({
 A component has 3 parts, an
selector: 'app-root',
Import, Decorator and a Class templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'demo';
}
Component

 Generally components are like tabs or pages.


 A angular app generally consist out of many components, like home, login, trending, etc.
 To add a new component simply run:

ng generate component <name>


Component

 Generally components are like tabs or pages.


 A angular app generally consist out of many components, like home, login, trending, etc.
 To add a new component simply run:

ng generate component <name>


Routing
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component’;

 Now that you have created a


new component you have to set
the routing.
 To do this you have to add the const routes: Routes = [
routing to {path: 'home', component: HomeComponent},
];
app-routing.module.ts

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Integrating Typescript with HTML

 So component logic, functions,


variables and events can all be sent
to a template HTML, this is how you
can get some functionality into the
HTML without much effort.

 On the left we have simple typescript


function count that increases the
counter by 1
Integrating Typescript with HTML

 Now in the HTML we can access the


global counter variable by using
handlebars (aka moustache) {{ }}
 There are also JS events and
processors that can be used for
example (click) which is when the
element is clicked on
Integrating Typescript with HTML

 That code just created this functionality


on the left
Models

 Up until now we saw how we can get data from TypeScript into HTML templates but what
if we want it to be bidirectional?
Angular Logic

 You can also perform or show certain functionality based on conditions for example:

<p>home works!</p>
<input type="text" [(ngModel)]="name"><br>
Hi {{ name }}!
<button (click)="count()">Click Me</button>
<p>You have Clicked me {{ counter }} times.</p>

<ng-template [ngIf]="counter > 5" [ngIfElse]="none">


You are clicking too much {{ name }}!!!
</ng-template>
<ng-template #none>
You not clicking enough
</ng-template>
Angular Logic

 You can also perform or show certain functionality based on conditions for example:

<p>home works!</p>
<input type="text" [(ngModel)]="name"><br>
Hi {{ name }}!
<button (click)="count()">Click Me</button>
<p>You have Clicked me {{ counter }} times.</p>

<ng-template [ngIf]="counter > 5" [ngIfElse]="none">


You are clicking too much {{ name }}!!!
</ng-template>
<ng-template #none>
You not clicking enough
</ng-template>
Angular Logic

 You can also perform CSS based on logic:

<ng-template [ngIf]="counter > 5" [ngIfElse]="none">


<p [ngStyle]="{'color': counter > 10 ? 'red': 'green'}">
You are clicking too much {{ name }}!!!
</p>
</ng-template>
<ng-template #none>
You not clicking enough
</ng-template>
Angular Logic

 You can also perform CSS based on logic using classes:


.active {
background-color: yellow;

<ng-template [ngIf]="counter > 5" [ngIfElse]="none"> }


<p [class.active]="counter > 10">
You are clicking too much {{ name }}!!!
</p>
</ng-template>
<ng-template #none>
You not clicking enough
</ng-template>
Angular Logic

 But what if I want to use many classes based on the counter?

<ng-template [ngIf]="counter > 5" [ngIfElse]="none">


<p [ngClass]="setClasses()">
You are clicking too much {{ name }}!!!
</p>
</ng-template>
.active {
background-color: yellow;
}
setClasses() {
let classes = { .notactive {
active: this.counter > 6, background-color: gray;
notactive: this.counter < 6, }
bold: this.counter > 10
} .bold {
return classes; font-weight: bold;
} }
Angular Logic

 What if I have an array that I want to display like music tracks?


constructor() {
this.music = [
{ title: 'Some title1’,
album: 'some album1', rank: 500 },
{ title: 'Some title2’,
album: 'some album2', rank: 502 },
{ title: 'Some title3’,
album: 'some album3', rank: 30 }, <div *ngFor="let m of music">
{ title: 'Some title4’, <p>Title: {{ m.title }}</p>
album: 'some album4', rank: 220 }, <p>Album: {{ m.album }}</p>
<p>Rank: {{ m.rank }}</p>
]; </div>
}
Angular - Info

 There is a lot more about Angular that was not taught, but this serves as the foundations
that is needed such that we can tackle Hybrid Mobile.

 More information about angular can be found here:


 https://angular.io/tutorial

You might also like