Angular Basic

Install Angular CLI

Angular CLI is useful tool make angular

npm install -g @angular/cli

ng generate

For Angular Components

NameCommand
Moduleng g module (modulename)
Componentng g component (componentname)
Directiveng g directive (directivename)
Pipeng g pipe (pipename)
Serviceng g service (servicename)
Guardng g guard (guardname)

For General Components

NameCommand
Classng g class (classname)
Interfaceng g interface (interfacename)

Example

To create simple Angular Application (with routing and style is scss)

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

Build App

ng build

Run Test

Unit Test

ng test

Integration Test

ng e2e

Application Directory Structure

app1
|- e2e
|- node_modules
|- src
|- package.json
|- tsconfig.json
|- tsconfig.json
|- tslint.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));

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

<!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>

Test (Run) on local

ng serve

You can access localhost:4200

コメント