Téléchargé 48 fois
![Code
var hub = $.connection.Notifier;
$.connection.hub.start().done(function () {
$('#btn').on('click',function(){
hub.server.notify(
$('#messageInput').val());
})
});
hub.client.notified = function (message) {
alert(message.Content);
};
hub.client.notifyDone = function(){
alert(‘message sent’);}
Client
[HubName(“Notifier”)]
public class MyHub : Hub
{
public void Notify(string message)
{
Clients.Others.notified(message);
Clients.Caller.notifyDone();
}
}
1
2
3
3
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
Server](https://image.slidesharecdn.com/spaangularsignalr-generic-fr-140227223817-phpapp01/75/SPA-avec-Angular-et-SignalR-FR-19-2048.jpg)
![IoC/DI
• Tout element est injectable
• Par convention : le nom
• app.value(‘truc’, 42);
• app.controller(‘monCtrl’, function(truc){});
• Ou la position+tableau de noms
• app.controller(‘monController’,[‘truc’,function(truc){}]);
• WARNING: toujours utiliser la 2e pour cause de minification de votre code](https://image.slidesharecdn.com/spaangularsignalr-generic-fr-140227223817-phpapp01/75/SPA-avec-Angular-et-SignalR-FR-37-2048.jpg)
Téléchargé parRui Carvalho
SPA avec Angular et SignalR (FR)
Le document présente l'intégration de SPA avec AngularJS et SignalR, mettant en avant les avantages d'une séparation entre le client et le serveur ainsi que la réactivité accrue des applications. Il aborde des concepts clés comme le binding bidirectionnel, la gestion d'état, et les nouveaux ajouts de SignalR 2.0, tels que le support des groupes multiples et l'amélioration de la gestion des erreurs. Il mentionne également des bonnes pratiques pour le développement, incluant l'utilisation de directives Angular et des recommandations pour le SEO des applications JavaScript.
Contenu connexe
Similaire à SPA avec Angular et SignalR (FR)
![03 - [ASP.NET Core] Services RESTful et SPA](https://cdn.slidesharecdn.com/ss_thumbnails/03restfuletjavascriptservices-170124115925-thumbnail.jpg?width=640&height=640&fit=bounds)
SPA avec Angular et SignalR (FR)
- 1. SPA ANGULARjs +SignalR 3 way binding Rui Carvalho rui@rui.fr, codedistillers.com, @rhwy
- 2.
- 3.
- 4. SPA Single page applications fora changing world
- 5.
- 6.
- 7.
- 8. Avantages • Meilleure séparationlogique entre les parties clientes et serveur • Développements plus spécialisées et responsables • Plus de réactivité de l’application • Plus de réactivité dans le développement!
- 9. Inconvénients • Faire confianceau client… • Mais : Avec les navigateurs modernes auto-évolutifs ce n’est plus un problème • Qualités et connaissances différentes du monde serveur/.net • Mais: dans tous les cas vous finissez par produire du html/js/css, autant que ce soit par des pros non?
- 10. Faut-il s’adapter? • Aulieu de suivre le plan • Au lieu de faire confiance à une plateforme connue • Non mais sérieux, du javascript?!...
- 11. Agile Manifesto … Weare uncovering better ways of developing software by doing it and helping others do it. Through this work we have come to value: • Individuals and interactions over processes and tools • Working software over comprehensive documentation • Customer collaboration over contract negotiation • Responding to change over following a plan That is, while there is value in the items on the right, we value the items on the left more.
- 12. …et cela changeraencore demain!
- 13.
- 14.
- 15.
- 17. SignalR “Fournir simplement desfonctionnalités temps réel pour les applications web” Le serveur est capable de pousser des informations vers le client dès que les évènements arrivent
- 18.
- 19. Code var hub =$.connection.Notifier; $.connection.hub.start().done(function () { $('#btn').on('click',function(){ hub.server.notify( $('#messageInput').val()); }) }); hub.client.notified = function (message) { alert(message.Content); }; hub.client.notifyDone = function(){ alert(‘message sent’);} Client [HubName(“Notifier”)] public class MyHub : Hub { public void Notify(string message) { Clients.Others.notified(message); Clients.Caller.notifyDone(); } } 1 2 3 3 public void Configuration(IAppBuilder app) { app.MapSignalR(); } Server
- 20. SignalR 2.0, What’snew? • Stabilisation, bugfix • Suppression des dépendances ASP.NET • Support direct sur OWIN • Support CORS • Amélioration du support des backplanes • Ex: • Nuget install Microsoft.AspNet.SignalR.ServiceBus • GlobalHost.DependencyResolver.UseServiceBus(cs,”name”)
- 21. SignalR 2.0, What’snew? • Groupes Multiples(un client vers +s groupes) • User Method (appeler un client par son nom au lieu de son id) • Error handling • throw new HubException back to client -> then call .fail(callback) • Generic error on client hubs : hub.error(callback)
- 22. Resources: • http://www.asp.net/signalr/overview/signalr-20 • signalR.net •Github.com/signalR/signalR
- 23.
- 24.
- 25. Let’s code • SPA,step 1 : Server Side • Initialisation serveur OWIN, SignalR, Nancy Codes sur: https://github.com/rhwy/Demos-Angular-SignalR
- 26.
- 27.
- 28. Angular better browser Angularressemble peut être à ce que seraient les navigateurs si ils avaient été crées pour executer des applications et non lire des documents.
- 29. Structure • Angular est •SOLIDe, DRY, KISS • Déclaratif • Comportemental et contextuel • Faiblement couplé • Testable
- 30. Benefices • Low ceremony •Pojo models !!! • Tdd in mind • Injection de dépendances!
- 31. Benefices • Moins deCode • Plus de manipulation du DOM! • Code plus simple • Résultats immédiats!
- 32.
- 33. Déclaratif • Angular changele HTML courant par le biais de Directives • Elements Html, tags (E) • Attributs (A) • Classes Css (C)
- 34. Les éléments debase • Tous les éléments de base sont déja des directives! • ng-app • ng-model • ng-repeat • ng-controller •…
- 35. 2-way binding • Angulargère l’état et la synchronisation de données pour vous au sein d’un contexte • Il vous offre les moyens de les connecter à l’extérieur • $watch • $apply
- 36. Roles • Tout estclairement découplé par role fonctionnel: • Modules (le plus haut niveau, package) • Directives • Configuration (ex: routage) • Controllers • Services • Constantes
- 37. IoC/DI • Tout elementest injectable • Par convention : le nom • app.value(‘truc’, 42); • app.controller(‘monCtrl’, function(truc){}); • Ou la position+tableau de noms • app.controller(‘monController’,[‘truc’,function(truc){}]); • WARNING: toujours utiliser la 2e pour cause de minification de votre code
- 38. Let’s code • SPA,step 2 : Client Side • Initialisation outils client, Angular Codes sur: https://github.com/rhwy/Demos-Angular-SignalR
- 39. Petit mot duSEO • Nativement les bots google et autres ne savent pas interpréter le javascript • Utiliser google’s Ajax protocol (ou pushstate): • ‘#!’ -> ‘_escaped_fragment’ • Générer les pages coté serveur • en re-codant des version simplifiées full html • En utilisant des moteurs de rendu html (ex: prerender.io)
- 40.
- 41.