Tutoriel par Examples: angular2



Cet exemple est une configuration rapide de Angular 2 et comment générer un exemple de projet rapide. Conditions préalables: Node.js v4 ou supérieur. npm v3 ou plus ou fil . Ouvrez un terminal et exécutez les commandes une par une: npm install -g @angular/cli ou yarn global add @angular/cli ...
Angulaire 2.0.0-rc.4 Dans cet exemple, nous allons créer un "Hello World!" application avec un seul composant racine ( AppComponent ) pour des raisons de simplicité. Conditions préalables: Node.js v5 ou version ultérieure npm v3 ou plus tard Remarque: Vous pouvez vérifier les version...
Une directive Button qui accepte un @Input() pour spécifier une limite de clic jusqu'à ce que le bouton soit désactivé. Le composant parent peut écouter un événement qui sera émis lorsque la limite de clic est atteinte via @Output : import { Component, Input, Output, EventEmitter } from '@angul...
import { Component } from '@angular/core'; import { Router , ROUTER_DIRECTIVES} from '@angular/router'; import { NgForm } from '@angular/forms'; @Component({ selector: 'login', template: ` <h2>Login</h2> <form #f="ngForm" (ngSubmit)="login(f.value,f....
Parfois, vous devez extraire des données de manière asynchrone avant de les transmettre à un composant enfant à utiliser. Si le composant enfant tente d'utiliser les données avant leur réception, une erreur est générée. Vous pouvez utiliser ngOnChanges pour détecter les modifications apportées ...
Pour un clic de démonstration en direct .. Index des applications ts import {bootstrap} from '@angular/platform-browser-dynamic'; import {MyForm} from './my-form.component.ts'; bootstrap(MyForm); Validateur personnalisé import {Control} from @'angular/common'; export class CustomValidator...
REMARQUE: pour de meilleurs résultats, assurez-vous que votre projet a été créé à l'aide de l'angulaire CLI. npm install angular/{core,common,compiler,platform-browser,platform-browser-dynamic,http,router,forms,compiler-cli,tsc-wrapped,platform-server} Vous n'avez pas à faire cette ét...
Cet exemple utilise Angular 2.0.0 Final Release formulaire d'inscription.component.ts import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ templateUrl: "./registration-form.html" }) export class ExampleCo...
Pour séparer la logique API du composant, nous créons le client API en tant que classe distincte. Cet exemple de classe demande à l'API Wikipedia d'obtenir des articles wiki aléatoires. import { Http, Response } from '@angular/http'; import { Injectable } from '@angular/core'; ...
app.module.ts Ajoutez-les dans votre fichier app.module.ts pour utiliser des formulaires réactifs import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppCompo...
/app/services/greeting.service.ts : import { Injectable } from '@angular/core'; import {greetingTypes,request,response} from './greeting.interface' @Injectable() export class Greeting{ private worker; constructor(){ this.worker = new Worker('../workers /gr...
Angular2 fournit plusieurs valeurs exportées pouvant être associées à des variables locales. Ceux-ci sont: indice premier dernier même impair Sauf index , les autres prennent une valeur Boolean . Comme dans l'exemple précédent utilisant index, vous pouvez utiliser n'importe laquelle d...
Nous allons créer un simple "Hello World!" app avec Angular2 2.4.1 (changement @NgModule ) avec un backend node.js (expressjs). Conditions préalables Node.js v4.xx ou supérieur npm v3.xx ou supérieur ou fil Ensuite, exécutez npm install -g typescript ou yarn global add typescript pour...
FormComponent.ts import {Component} from "@angular/core"; import {FormBuilder} from "@angular/forms"; @Component({ selector: 'app-form', templateUrl: './form.component.html', styleUrls: ['./form.component.scss'], providers : [FormBuilder] }) export class FormComp...
Implémenté dans un routeur: export const MainRoutes: Route[] = [{ path: '', children: [ { path: 'main', component: MainComponent , canActivate : [CanActivateRoute] }] }]; Le fichier canActivateRoute : @Injectable() export class CanActivateRoute implements Can...
un service J'ai créé le service post avec la méthode postRequest. import {Injectable} from '@angular/core'; import {Http, Headers, Response} from "@angular/http"; import {PostModel} from "./PostModel"; import 'rxjs/add/operator/map'; import {Observable} from "rxjs&...
exécuter les commandes suivantes à cmd npm install -g protractor webdriver-manager update webdriver-manager start ** créer le fichier protractor.conf.js dans la racine de l'application principale. très important de déclairre useAllAngular2AppRoots: true const config = { baseUrl: 'h...
Exigences: NodeJS: page de téléchargement npm ou fil Exécutez les commandes suivantes avec cmd du nouveau dossier répertoire: npm install -g @angular/cli ou yarn global add @angular/cli ng new PROJECT_NAME cd PROJECT_NAME ng serve Ouvrez votre navigateur sur localhost: 4200
Pour utiliser jquery dans vos composants Angular 2.x, déclarez une variable globale au sommet Si vous utilisez $ pour jQuery declare var $: any; Si vous utilisez jQuery pour jQuery declare var jQuery: any Cela permettra d'utiliser $ ou jQuery dans votre composant Angular 2.x.
Pas: Créer une application Web .Net Core vide: Allez sur wwwroot et créez une page HTML normale appelée Index.html: Configurez Startup.cs pour accepter les fichiers statiques (ceci nécessitera d'ajouter la bibliothèque "Microsoft.AspNetCore.StaticFiles": "1.0.0" dans le...

Page 1 de 2