Wiki SGY.io

Outils pour utilisateurs

Outils du site

Piste :
web:javascript:angular:fundamentals

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
web:javascript:angular:fundamentals [2018/04/01 04:34] – [Installation des dépendances] sgariepyweb:javascript:angular:fundamentals [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
Ligne 6: Ligne 6:
  
 ====== Démarrer un projet avec Angular CLI ====== ====== Démarrer un projet avec Angular CLI ======
 +
 +Setup:
 +
 +  $ ng set defaults.styleExt scss
 +  
 +ou bien:
 +
 +  $ ng new my-new-app --style=scss
 +
  
 Démarrer un projet qui s'appellera ''todo'': Démarrer un projet qui s'appellera ''todo'':
Ligne 18: Ligne 27:
  
 On peut visiter l'application avec http://localhost:4200. On peut visiter l'application avec http://localhost:4200.
 +
 +
 +===== Utiliser SSL =====
 +
 +Dans package.json:
 +
 +  "start:ssl": "ng serve --port 8000 --hmr --ssl true --ssl-cert ssl/server.crt --ssl-key ssl/server.key"
 +
 +
 +
 +===== Librairie =====
 +
 +
 +  $ ng generate library
 +
 +
 +
  
 ===== Exécuter les tests ===== ===== Exécuter les tests =====
Ligne 260: Ligne 286:
 <h3>{{thumbnail.someProperty}}</h3> <h3>{{thumbnail.someProperty}}</h3>
 </code> </code>
 +
 +===== Titre =====
 +
 +Pour modifier le titre du navigateur par rapport à un composant, on peut utiliser ''Title''.
 +
 +<code javascript>
 +import { Title } from "@angular/platform-browser"@Component({
 +    ...
 +})
 +export class LoginComponent implements OnInit {
 +    constructor(private title: Title) {}    ngOnInit() {
 +        title.setTitle("Login")
 +    }
 +}
 +</code>
 +
  
 ===== Styliser un composant ===== ===== Styliser un composant =====
Ligne 686: Ligne 728:
 <a [routerLink]="['/events']">All Events</a> <a [routerLink]="['/events']">All Events</a>
 </code> </code>
 +
 +Pour passer des paramètres:
 +
 +
 +<code html>
 +<a [routerLink]="['/action']" [queryParams]="{someparam: '1'}">Action</a>
 +</code>
 +
 +Sinon, avec le ''router'' service:
 +
 +    this.router.navigate(['/product-list'], { queryParams: { page: pageNum } })
 +
 +
 +
 +
  
 ===== Naviguer par le code =====  ===== Naviguer par le code ===== 
Ligne 1262: Ligne 1319:
  
 Pour d'autres validators, voir [[https://angular.io/api/forms/Validators|Validators]] de la documentation d'Angular. Pour d'autres validators, voir [[https://angular.io/api/forms/Validators|Validators]] de la documentation d'Angular.
 +
 +
 +===== Ajout de validateurs =====
 +
 +
 +On peut ajouter des validateurs par programmation à un ''FormControl''.
 +
 +
 +    formControl.setValidators([Validators.required, Validators.maxLength(10)]);
 +    formControl.updateValueAndValidity();
 +
 +
 +Supprimer les validateurs:
 +
 +    formControl.clearValidators();
 +
  
  
Ligne 1651: Ligne 1724:
  
   let emitter = new EventEmitter();   let emitter = new EventEmitter();
 +
 +
 +
 +====== Débugger un component dans la console ======
 +
 +    ng.probe($0).componentInstance
 +
 +La référence ''$0'' étant le node du DOM sélectionné dans DevTools/Elements.
 +
 +
 +[[https://juristr.com/blog/2016/02/debugging-angular2-console/|Debugging Angular Applications from the Console]]
  
  
web/javascript/angular/fundamentals.1522550052.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)