https://wiki.sgy.io/ 2026-05-12T15:16:57+00:00 https://wiki.sgy.io/ https://wiki.sgy.io/_media/wiki:logo.png text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angularjs:controleurs?rev=1755361811&do=diff Contrôleurs Scope La première responsabilité du contrôleur est de créer un scope. Ce scope permet d'exposer le modèle à la vue. On pourrait appeler le scope l'élément view-model de l'architecture. Déclaration d'un contrôleur 'use strict'; angular.module('myApp').controller('mainCtrl', function($scope) { $scope.model = { name: 'Ceci est un contrôleur', date: '1/1/2014' }; }; text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angularjs:debugging?rev=1755361811&do=diff Debugging Dans la console de Chrome, on peut accéder à des éléments pour vérifier leurs valeurs. Scope Pour accéder au scope d'un éléments, on peut faire: angular.element(selector).scope() Le selector étant un sélecteur tel qu'utilisé en text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angularjs:demarrer_un_projet?rev=1755361811&do=diff Démarrer un projet AngularJS * Installer NodeJS. * Installer Yeoman : $ npm install -g yo * Installer Bower : $ npm install -g bower * Installer Grunt : $ npm install -g grunt-cli * Installer Angular Generator : $ npm install -g generator-angular text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angularjs:directives?rev=1755361811&do=diff Directives Les directives sont une façon de donner de nouvelles fonctionnalités au HTML. Il y a quatre types de directives: * E - Élement -> <sg-element />. * A - Attribut -> <div sg-element></div>. * C - Classe -> <div class="sg-directive"></div> text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angularjs:directives_built-in?rev=1755361811&do=diff Directives de base * ngApp * ngController ng-model Fonctionne sur trois types d'éléments : * input * select * textarea Événementiels * ngClick * ngDblClick * ngMousedown * ngMouseenter * ngMouseleave * ngMousemove * ngMouseover text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angularjs:filtres?rev=1755361811&do=diff Filtres Généralement, les filtres modifient la sortie de données. * Formatting * Tri * Filtrer {{ expresssion | filter }} Built-in filters * uppercase * lowercase * number -> {{ 3.1416937635 | number:2}}, retourne 3.14. * currency text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angularjs:routing?rev=1755361811&do=diff ngRoute ui-router Utilise <ng-view></ng-view>. Dans un fichier routing.js ou app.js, on peut configurer les routes. angular.module('myApp', ['ngResource']) .config(function($routeProvider) { $routeProvider.when('/newEvent', { templateUrl: 'templates/NewEvent.html', controller: 'EventEditController' }); $routeProvider.when('/events', { templateUrl: 'templates/EventList.html', controller: 'EventListController' }); $routeProvider.when('/event/:event… text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angularjs:services?rev=1755361811&do=diff Services Un service dans le contexte d'AngularJS est ce qui s'occupe de la logique d'affaires, la réutilisation du code, etc. Built-in services Services disponibles : \$resource, \$q, \$anchorScroll, \$cacheFactory, \$compile, \$parse, \$locale, \$timeout, \$exceptionHandler, \$filter, \$cookieStore, \$interpolate, \$log, \$rootScope, \$window, \$document, \$rootElement, \$route, \$routeParams, \$location, \$httpBackend, \$controller. text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angularjs:snippets?rev=1755361811&do=diff Service (function () { 'use strict'; angular.module('Module').service('Service', Service); Service.$inject = ['dependency1']; function Service(dependency1) { var that = this; // Public members // Private members // Public functions this.exposedFn = exposedFn; // Private functions function exposedFn() { } } })(); text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angularjs:toc?rev=1755361811&do=diff AngularJS AngularJS est un framework JavaScript MV* ou M-V-Whatever. La partie Whatever est soit un contrôleur, un view-model ou un presenter. Pour plus d'informations, consulter le site officiel d'AngularJS. Démarrer un projet Voir la page démarrer un projet AngularJS. Sujets à couvrir * Contrôleurs * text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angularjs:ui-router?rev=1755361811&do=diff ui-router Installation avec bower Installer avec bower install angular-ui-router Ensuite, inclure le fichier script et inclure la dépendance du module ui.router de cette façon: angular.module('app', ['ui.router']); Définir les routes Dans un fichier, exemple