Downloaded 10 times
![Módulos
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }](https://image.slidesharecdn.com/o2laurc1r9wybvhkfp4q-signature-1adce6c30ef91b5449d459584a8d8ead150c974f671ce6689b1dbdadb402239d-poli-170328200603/85/Angular-2-Basico-7-320.jpg)
![Directives
Adicionam funcionalidades no template.
Estrutural: <tr *ngFor="let item of items">
Atributos: <input [(ngModel)]="hero.name">](https://image.slidesharecdn.com/o2laurc1r9wybvhkfp4q-signature-1adce6c30ef91b5449d459584a8d8ead150c974f671ce6689b1dbdadb402239d-poli-170328200603/85/Angular-2-Basico-16-320.jpg)
Uploaded byRomualdo Andre
Angular 2 Básico
The document outlines a basic course on HTML, CSS, and TypeScript differentiated from Angular 1, including steps for setting up a development environment and using Angular CLI. It covers module creation, component organization, templating, layout setup, and service generation within Angular applications. Key resources for further learning and implementation of data binding and directives are also provided.
More Related Content
Angular 2 Básico
- 1.
- 2. Introdução HTML, CSS, TypeScript Totalmentediferente do Angular 1 https://angular.io Open Source Web components, Shadow DOM, etc.
- 3. Ambiente de desenvolvimento Node:https://nodejs.org/ TypeScript: npm install -g typescript Visual Studio Code (ou outro que suporte TypeScript) Angular-cli: npm install -g angular-cli
- 4. Etapa 1 -preparação ng new shopping-list cd shopping-list ng serve baixar purecss, colocar na pasta de src/assets e link no index.html
- 6. Módulos Agrupamento de componentes. Lógico,domínio, processos, workflow,... ng g module nome-do-modulo
- 7. Módulos import { NgModule} from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ], providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
- 8. Componente Aplicações são feitasde componentes. HTML + Componente class. Decorator: @Component
- 9. import { Component} from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
- 10.
- 11. my-app-component.ts: import { Component} from '@angular/core'; @Component({ selector: 'my-app', templateUrl: 'my-app.html' }) export class AppComponent { name = 'Angular'; } my-app-component.html: <h1>Hello {{name}}</h1>
- 12. Etapa 2 -layout pure-g pure-u pure-form pure-form-stacked pure-table pure-button
- 13. Etapa 3 - nggenerate component shopping-list ng generate class ShoppingItem ng generate service ShoppingListData ngModel component logic
- 14. Service Lógica de negócio Comunicaçãocom API REST Configurações etc.
- 15.
- 16. Directives Adicionam funcionalidades notemplate. Estrutural: <tr *ngFor="let item of items"> Atributos: <input [(ngModel)]="hero.name">
- 17.