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
