- check
default.nix
which is prepared for thenix-shell
- check Angular version after installing:
$ ng --version
- new project:
$ ng new <project-name>
- view it move to project dir and:
$ ng serve
- check typescript version:
$ tsc --version
- getting started with typescript
- typescript folder includes mini .ts tutorial
- Create component (like i did with: courses.component.ts)
- Register it in a module (add it to app.moudle.ts)
- Add an element in an HTML markup (add component to app.component.html)
- another approach would be to create the component automatically
$ ng g c course
(g = generate, c = component) this creates a whole folder with all needed components- done!
import { Component } from '@angular/core';
@Component({
selector: 'courses', //selector in DOM tree
template: `
<h2>{{ title }}</h2>
<ul>
<li *ngFor="let course of courses">
{{ course }}
</li>
</ul>
`
})
export class CoursesComponent {
title = 'List of courses';
courses = ["course1", "course2", "course3"];
getTitle() {
return this.title;
}
}
the *
is used when you want to modify something in the DOM. Here it is done by a Angular for-loop
A service and its logic should be separated from the components code, which only should be responsible for the view of the elements. Furthermore a service is a plain typscript class so it has no Angular decorator.
So in the class which is consuming the service....:
constructor() {
let service = new CoursesService();
this.courses = service.getCourses();
}
better use DI
constructor(service: CoursesService) {
this.courses = service.getCourses();
}
The important thing is, if you want to use DI you have to register your service in app.module.ts
within the providers array. So it will be available in the whole project (Singelton pattern)
$ ng g s service
(s = service)