Learning Angular Part 1

Posted by Riino on

Introduction

What’s Angular?

Angular is one of most mainstream front-end framework, supported by Microsoft and Google. It provides a powerful , standalone constructor with Typescript, and because of the language, it does need compiling.

The biggest difference is that Angular uses TypeScript , and you can’t use JavaScript directly there, unlike other xxx.js module. The reason is that in Angular, there’s a strong OOP pattern, and we will talk about this later.

Unlike Vue.js, you should work with Angular with CLI at the beginning, though there’s an online Angular Playground, but I personally recommend you regard this as an object-oriented language framework, and get yourself ready to make compiling in your machine, and you should be familiar with CLI and command of node.js.

If want learn Angular, the current official doc is GOOD, and the step-by-step demo tutorial is kind, and easy to learn.

TypeScript

You can regard the TypeScript as “Java”, while the JavaScript is the Class file from .java files, which can be executed by JVM (in this case, the browser). And I personally recommend to learn TypeScript from Java’s experience (if you have), rather than JavaScript’s. Because TypeScript is more like a strongly typed language, while JavaScript, well, a famous, dark, deep weakly typed language. But keep it in mind that TypeScript is still weakly typed, remember that in the end, every line of TypeScript will change into JavaScript , right ? So there’s barely no limitation. But regard it as a strongly typed language is recommended

TypeScript has many feature that we love to see in Java, like clear types of variable (Literally, though) , class , interface , loC, DI....

Compare with others

Because of TypeScript, Angular asks to regard the project in OOD way, this means you can’t edit your html file and put script, style tags everywhere and play with your DOM with whatever you want. In angular, everything part of a html , should be a Component, which is the basic building blocks here, a Component should contain a .ts file, as the script within, a .html file, and a .css file as style sheet, and the role connecting html, js(result of compiled ts) and css is in this TypeScript file , rather than html.

In others front-end system, like jinja-driven engine, liquid-driven engine, or thymeleaf , or html+php, the key is to use embedded syntax to render data in html, but there’s no limitation in style tag and script tag embedded, which means you can add javascript anywhere, even in Vue.js, you can still add origin javascript to make effects.

In Angular, the code will be more like those application with windows, like UWP, Java Windows Application (Swing, etc.), even Android development code style. You will have a html as the content, and you have script behind, in each component, this is the most important thought.

Angular Structure

The Shell

Generally , to create a blank project, use CLI :

ng new your-app-name

In Angular’s view, this will create a App Module, a Router Module, a App Component as the shell.

In this folder is our shell, which also have a component’s part (all the 4 files with .component): a css file, a html file ,and the script file behind the html. Also, there’s a routing script as our router script, and a module config file.

-a----        2020/7/23     21:39            245 app-routing.module.ts
-a----        2020/7/23     21:39              0 app.component.css
-a----        2020/7/23     21:39          25757 app.component.html
-a----        2020/7/23     21:39           1053 app.component.spec.ts
-a----        2020/7/23     21:39            208 app.component.ts
-a----        2020/7/23     21:39            393 app.module.ts

In most case this shell will just provide basic view without any JavaScipt, and it’s ready to use router for immediate navigation.

(To know more about shell :https://developers.google.com/web/fundamentals/architecture/app-shell)

Module

Module is the most important part of Angular, noticed that there’s a app.module.ts and a app-routing.module.ts inside. You can regard these as 2 modules.

Module is a declaration of the top of a series of components. The app.module.ts works as the highest level module, which is the entire application, and if your application is built with Hierarchical design, each module should only know the next level’s module, and may maintain controlled interface for its parent module.

The only work that the app module should do is to declare what direct component it will have, usually this will be a configuration in annotation @NgModule

for example, if we generate a component called Heroes, the module’s file will be like:

//app.module.ts
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import { HeroesComponent } from './heroes/heroes.component'

@NgModule({
  declarations: [AppComponent, HeroesComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

And the router module’s structure is same, it have a routes list for navigation, and for it have no child component, so it just declare itself:

//app.routing.module.ts
import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'

const routes: Routes = []

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

Component

Component is a part of html which will be displayed, it has 3 files: a html file, a css file, and a ts file, I will name the ts file as “The script behind”, and name the html file as “template”. When we generate a new app, we have a top component, which is our shell’s html layout:

Typically a shell’s html may be like:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

And the tag <router-outlet> means this part will be navigated by our router module. The rest tags is other component, specific tag name will be confirmed in a component’s annotations : @Component

The script behind is like:

//app.component.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'angular-tour-of-heroes'
  // edit this will change the title of this component
  // here we are actually assigning a variable, and we can use template syntax like {{title}} to render.
}

In script behind, we can do such things:

  1. Config the selector(component name in html), blind css and html in annotation.
  2. Assign variable for a component, and we can use {{var}} to render a variable called var in html.
  3. Implement function to handle the event in html.
  4. Inject other class in constructor function
  5. Initialize the component class.

The example script is in follow, you can find the complete project code in Angular.io.

//dashboard.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-tour-of-heroes';
  // edit this will change a variable : title , of this component
  // here we are actually assigning a variable, and we can use template syntax like {{title}} to render.
}

//import is ignored
@Component({ //the annotation confirm what this component should be cited (tag's name), which html/css file it should blind
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {
  heroes: Hero[] = [];.//here is the member variable of this class

  constructor(private heroService: HeroService) { }//the constructor, the only role is to accept 'DI' target.

  ngOnInit() {
    this.getHeroes();//this is like '$(document).ready(function(){})', here it will run when this class is instantiated.
  }

  getHeroes(): void {//here is the member methord of this class, which is the "script behind", a blinded function's imple in html
    this.heroService.getHeroes()//see this hereService? it isn't instantiated, because angular use DI to automatically do this.
      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
  }
}