Angular Basic

Posted by mayuyu48 On 9月 16, 2018 0 Comment

Ref

Install Angular CLI

Angular CLI is useful tool to make angular

npm install -g @angular/cli

ng generate

For Angular

Name	Command
Module	ng g module (modulename)
Component	ng g component (componentname)
Directive	ng g directive (directivename)
Pipe	ng g pipe (pipename)
Service	ng g service (servicename)
Guard	ng g guard (guardname)

For General

Name	Command
Class	ng g class (classname)
Interface	ng g interface (interfacename)

Example

Actual application

ng new <appname> --routing --style scss

Build

ng build

Test

Unit Test

ng test

Integration

ng e2e

App Directory Structure

app1
|- e2e
|- node_modules
|- src
|- package.json
|- tsconfig.json
|- tslint.json
|- angular.json

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Kick off module = AppModule
If you want to change or test, you can change boot module.

AppComponent

app.component.ts

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

@Component({
  selector: 'app-root',
  tempalteUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
	title = 'app1';		// variable
}

index.html

Template

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App1</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

TOPICS