Créer une application avec C# 4.5 / Web API 2 / BootStrap / TypeScript / TypeLite / Font awesone

Les composants

Jquery – version 2.2

JQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML des pages web

Bootstrap v3.3.6

Twitter Bootstrap est une collection d’outils utile à la création de sites et d’applications web. C’est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option

Police font-awesome

Font Awesome est un toolkit d’icônes vectorielles disponible gratuitement sur internet. Il nous permet d’ajouter rapidement et simplement des icônes sur notre propre site internet. Voici quelques icônes présentes

AngularJS

AngularJS est construit autour de concepts clés. Comprenez bien que Shyam Seshadri, lorsqu’il créa Angular, n’a rien inventé. Il n’a fait qu’utiliser à bon escient des concepts et des bonnes pratiques incontournables dans le monde du développement web actuel.

  • Architecture MVC (Modèle-Vue-Contrôleur) : si vous connaissez le développement, vous avez sûrement entendu parler de ce type d’architecture incontournable qui consiste à avoir une stricte séparation entre les données (Modèle), la présentation des données (Vue), et les actions que l’on peut effectuer sur ces données (Contrôleur)
  • Data Binding : grâce à ce concept, les liens entre votre code HTML et JavaScript ne seront que plus forts.
  • Injection de dépendances : tout comme l’architecture MVC, lorsque l’on parle d’injection de dépendances, on parle d’un concept prépondérant dans tout développement. Grâce à cela, les modules que vous développerez n’auront plus à se soucier d’instancier leurs dépendances.
  • La manipulation du DOM au moyen de directives : la manipulation du DOM conduit souvent à la création de code difficilement maintenable et difficilement testable. Nous verrons qu’avec Angular, ce n’est plus le cas du tout !

TypeScript

Plateforme permettant le développement d’applications web de grande échelle. Elle permet

  • Typage statique en permettant de typer les valeurs de retour de fonctions.
  • Classes et fichiers de déclaration agissant comme des interfaces.
  • Support de fonctionnalités tirées d’ECMAScript 6.
  • Compatibilité entière avec JavaScript

TypeLite

TypeLite est un utilitaire qui permet de générer du script TypeScript à partir de classes .NET.

Librairie STPVideoPlayer.DataLayer

Fournit les classes entités pour permettre de communiquer avec la couche de communication Web API. Cette librairie est générée automatiquement via TypeLite

stpvideoplayer

Application TypeScript permettant de générer l’application angularJs nécessaire. L’application comprend notamment

  • Les directives (interface HTML)
  • Les contrôleurs nécessaires pour implémenter le comportement requis par les directives
  • Le service DataService permettant d’accéder aux données via la couche de communication Web API.

Projet type

Arborescence du dossier

  • Controllers : Le dossier contenant la classe qui nous fournit le service API nécessaire
  • fonts : contient les fichiers police
  • js/app : contient l’application
  • Scripts : contient les fichiers scripts de base comment angular, boostrap, jquery
  • Scripts/TypeLite.Net4.tt : contient les déclarations nécessaires à notre mapping

Le dossier js/app

Le dossier js/app permet de contenir tous les fichiers TypeScript nécessaire pour l’application. Il contient les sous dossiers suivants

  • Controllers : recevra tous les contrôleurs des directives
  • Directives : au sens AngularJS, une directive permet de charger un template Html, de l’associer à un contrôleur et de fournir les comportements de base requis. Ce dossier contiendra toutes les directives requis pour l’application
  • Services : classe permettant de fournir des services réutilisables par différents contrôleurs
  • Templates : contient les templates html utilisés par nos directives
  • Interfaces : contient les interfaces exposées par les services et les contrôleurs

Implémentation minimale

Bien que ce n’est pas obligatoire par AngularJS, mais nous vous conseillons d’avoir les composants suivants

L’objet Scope

Un objet qui permet de partager des données au niveau soit de l’application le $rootScope soit au niveau du contrôleur $scope. Scope n’impacte pas le DOM et on peut y rattacher

  • Des propriétés
  • Des méthodes
  • Des événements

Le scope applicatif $rootScope est unique par application. Pour plus d’information : https://docs.angularjs.org/guide/scope

Interfacer un Scope

Bien que ce n’est pas obligatoire, car par défaut AngularJS type le Scope :any, il est conseillé de fortement typé le scope via une interface. Cette interface sera stockée dans le répertoire interfaces et s’appelera <application>_ IScope.

Variables par défaut dans un rootScope
  • Url : url du web api
  • $nomduservice : instance du service d’accès aux données

Le Fichier références _references.ts

Le fichier de références _references.ts permet de déclarer les fichiers à importer dans l’ensemble de vos fichiers ts sans avoir à les déclarer à chaque fois.
Nous vous conseillons de segmenter votre fichier références en utilisant les régions.
#region et #endregion

Le service d’accès aux données

Interface <application>_ Idataservice.ts

Il est conseillé d’utiliser une interface pour décrire les méthodes exposées par le service. Cette interface sera stockée dans le dossier js/app/interfaces et portera le nom <application>_I<service>.ts

Le Service classe <application>_dataservice.ts

Le service dataService.ts permet d’accéder aux données. Il fournit le comportement CRUD à l’application.

    • S’il existe plusieurs classes, nous les nommeront de la façon suivante
      :<application>_Dataservice_<Object>.ts 
      exemple : app_Dataservice_order.ts pour la gestion des commandes et app_Dataservice_customer.ts pour la gestion des clients
    • Dans le cas contraire : <application>_dataservice.ts exemple stpvideoplayer_dataservice.ts
Evénements

Vous pouvez propager des événements en se rattachant au $rootScope et en utilisant la méthode $broadcast ou $emit voir ci-dessus
Nous utiliserons l’événement videoReceived pour permettre de notifier la réception d’une vidéo

Emettre un event depuis le service
      • $broadcast — transmet l’événement à tous les scopes enfant
      • $emit – transmet l’événement en respectant la hiérarchie du scope
$Apply et $digest

$apply permet de lancer manuellement le cycle $digest. Si vous modifiez une variable directement dans le scope, vous n’avez pas besoin de faire appel à cette méthode. AgularJS va directement détecter le changement, car il est programmé pour le faire. Si vous changez une variable en dehors du framework, ce ne sera pas le cas. Par exemple, un changement fait dans une requête Ajax avec JQuery ne sera pas détecté par le framework. C’est à ce moment qu’il faut utiliser $apply. $apply lance le cycle $digest du framework, et permet ainsi l’intégration des modifications faites par des méthodes non gérées par le framework

Appelez un service web api

Pour appeler un service web api il faut utiliser le service $http: ng.IHttpService
Le service expose 2 méthodes

      • Get pour l’appel en méthode http get
      • Post pour le post de formulaire en méthode http post

      Ces 2 méthodes sont appelées en asynchrone et retourne un IPromise

 

      où T est le type attendu

 

      On peut utiliser $q pour s’assurer que la synchronisation au niveau du binding avec l’interface DOM va bien se faire.

Voici comment l’utiliser

Dans le service

Dans le contrôleur

La directive container

La directive de base pour toute application, ce n’est pas une obligation de AngularJs mais je vous le conseille fortement. C’est cette directive qui sera utilisée dans le fichier index.html pour imbriquer votre application. Je vous conseille d’associer avec un fichier html template main.tpl.html et un contrôleur <application>mainCtrl.ts

Astuce 

      Pour s’abonner à l’événement ready de l’objet document et exécuter une méthode lorsque le document est prêt, on peut :

 angular.element(document).ready(function () {});
Exemple :

      Pour calcul la durée, jquery n’offre pas de fonctionnalités, mais on peut implémenter une méthode au niveau de l’application et l’attacher au $rootscope

 

Associer une directive et un contrôleur

Lors de la déclaration d’une directive, on peut associer un contrôleur et une directive, pour cela nous utiliserons la propriété controller

Associer un contrôleur et un template

Pour nous permettre d’accéder depuis le template html à notre contrôleur nous devons lui donner un alias qui sera utilisé dans notre template. Pour cela nous utiliserons la propriété controllerAs

Gérer le scope pour le contrôleur et la directive

Il est possible d’indiquer à AngularJs s’il faut ou non créer un scope pour la directive. Pour cela nous utiliserons la propriété scope: true ou scope: false
Lorsqu’on demande à créer un nouveau Scope, AngularJs crée un nouveau en héritant du scope parent.
Pour plus d’information : http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

Etendre nos objets entités

Pour ajouter certaines propriétés à des objets de base comme nos entités sérialisés par typeLite, il peut être nécessaire d’étendre notre objet entité de base. Pour cela AngularJS nous fournis la méthode extend. Cette méthode attend deux paramétre

      • Nom de la propriété
      • Objet à surcharger

Exemple d’utilisation angular.extend(result, { duration: duration });

Application.ts

Chaque application doit avoir un fichier ts nommé Application.ts qui permettra de référencer les services, contrôleurs et les directives à utiliser

Déclaration des objets
      Déclarer les objets dans l’ordre suivant

 

      1. Services
      2. Contrôleurs
      3. Directives
La méthode run()

Le bloc Run() – est exécuté après que l’injecteur soit créé et est utilisé pour démarrer l’application. Seules les instances et les constantes peuvent être injectés dans les blocs exploités. Ceci afin d’éviter en outre la configuration du système pendant le temps de l’application de l’exécution.
On peut comparer le block Run() à une méthode main() d’un programme console en .NET.

ng-switch:Conditionner son template en fonction de la donnée à afficher

La directive ng-switch est une structure conditionnelle de type switch qui s’utilise directement dans le template. Elle permet d’afficher tel ou tel élément selon la valeur de l’expression qu’elle évalue.
Pourquoi utiliser ng-switch ?

      • Proposer une interface différente selon le statut de l’utilisateur (administrateur / contributeur / visiteur).
      • Mais cela n’empêche pas de vérifier ses droits côté serveur !
      • Gérer les différents modes d’affichage de votre webapp, (plein écran / mode compact / …)
      • De manière générale, présenter un visuel différent selon le contexte

Utilisation 

      En règle ng-switch s’utilise comment un attribut sur l’élément div.

Exemple

Astuce complémentaire 

      On peut avoir besoin d’utiliser un ng-switch sans avoir à ajouter au DOM un div, dans ce cas on peut l’utiliser directement comme un élément.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.