Angular
A JavaScript framework
For building client-side application
Using HTML, CSS and TypeScript
Install node js
Install Angular CLI
Angular CLI is useful tool make angular
npm install -g @angular/cli
ng generate
For Angular Components
| — | 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 Components
| Name | Command |
| Class | ng g class (classname) |
| Interface | ng 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
コメント