2,306
edits
Changes
Jump to navigation
Jump to search
mLine 13:
Line 13: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
→Create and run Angular application
cd my-app
cd my-app
ng serve
ng serve
</syntaxhighlight>
== ng Commands ==
<syntaxhighlight lang="bash">
ng new my-app
cd my-app
ng serve
ng build
ng test
ng e2e
ng generate component welcome # = ng g c welcome
</syntaxhighlight>
== Tests ==
ng test runs Jasmine tests
Configured at karma.conf.js
Extension for tests: *.spec.ts
ng e2e runs end to end tests with protractor, code at e2e folder
== angular.json ==
Defines angular commands behavior
== Components ==
Template -> *.component.html
CSS -> *.component.css
Code (TypeScript) -> *.component.ts
=== app.component.ts ===
<syntaxhighlight lang="typescript">
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: './app.component.html',
styleUrls: ['./app.components.css']
})
export class AppComponent {
title = 'todo';
}
</syntaxhighlight>
=== app.component.html ===
<syntaxhighlight lang="html">
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image"
</div>
<router-outlet></router-outlet>
</syntaxhighlight>
== Syntax ==
=== import ===
<syntaxhighlight lang="typescript">
import {Component, OnInit} from '@angular/core';
import { AppComponent }from '..app.component';
</syntaxhighlight>
=== class definition ===
<syntaxhighlight lang="typescript">
export class WelcomeComponent implements OnInit {
message = 'Some welcome message'
message2 : string = 'Some welcome message with type'
constructor(){
}
ngOnInit(){
console.log(this.message)
}
}
</syntaxhighlight>
== Login Component example ==
from command line:<syntaxhighlight lang="bash">
ng generate component login
</syntaxhighlight>
=== login.component.html ===
<syntaxhighlight lang="html">
Username: <input type="text" name="username" [(ngModel)]="username">
Password: <input type="password" name="password" [(ngModel)]="password">
<button (click)=handleLogin()>Login</button>
</syntaxhighlight>
=== login.component.ts ===
<syntaxhighlight lang="typescript">
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
username = 'Rafa'
password = ''
constructor() { }
ngOnInit(): void {
}
handleLogin(){
console.log(this.username)
}
}
</syntaxhighlight>In order to be able to use [(ngModel)]=... you need to add the formsModule to your app.module.ts:<syntaxhighlight lang="typescript">
....
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
....
</syntaxhighlight>
</syntaxhighlight>