AngularJS Tutorial AngularJS : Le tutoriel pour bien démarrer AngularJS, développé par Google depuis 2009, s’impose de plus en plus comme une référence dans le domaine des frameworks JavaScript. Une présentation détaillée est disponible sur ce blog : cliquez ici. Avec AngularJS, la navigation, la récupération des données et leur traitement ont lieu côté client. Le serveur n’a plus qu’à valider et envoyer les données, ce qui fournit à l’utilisateur une navigation plus fluide. Cette déportation de la logique permet de développer aisément des Single Page Application, ces applications web à la mode, accessibles via une page web unique. AngularJS apporte également de nombreux concepts importants : AngularJS et ses mécanismes novateurs ont su attirer une communauté active et toujours plus importante de développeurs, fournissant un support efficace au framework. Création de l’application Dans cette partie, nous allons voir comment créer notre application AngularJS. index.html app.js var app = angular.module('tutoApp', ['fruitModule']); « Hello world! <!
AngularJS : le framework JavaScript de Google au crible La popularité du framework JavaScript ne cesse de croitre. Quelles sont ses véritables points forts comparés à ses concurrents ? Qu'apporte AngularJS 2.0 qui vient de sortir ? Télécharger AngularJS (site du projet)1- AngularJS est devenu la référence des infrastructures JavaScript côté client Sur le terrain des infrastructures JavaScript, historiquement très nombreuses, plusieurs solutions commencent à s'imposer. Mais qu'en est-il des infrastructures JavaScript côté client ? D'après les premiers indicateurs dont nous disposons autour de la valorisation de l'expertise Angular en termes de salaire, il semble qu'elle commence à être assez élevée en France. A lire aussi : 2- Une infrastructure Modèle-Vue-VueModèle pour gagner en productivité En trois ans, la popularité d'AngularJS a explosé (cf. le graphique Google Trend ci-dessous). Le principe du MVVM est simple : les données que le client saisies engendrent une mise à jour du contrôleur qui met à jour par ricochet la vue. A lire aussi :
Remastered Animation in AngularJS 1.2 Learn how to use the bigger and better animation features in AngularJS 1.2 AngularJS 1.2rc1 1.2 is out and this brings in a brand-new API for animations using ngAnimate. A lot has changed, but animations are better than ever. With 1.2, animations come full circle with new features such as support for ngClass, class expressions, and callbacks. This article will explain how to perform animations in AngularJS 1.2 with the new API setup. This page was first published on August 15th 2013 and was last updated on November 20th 2013. This section explains the changes between 1.1.5 and 1.2. Animations are not apart of the core anymore The AngularJS core (which is everything inside of the angular.js JavaScript file) doesn't provide direct support for animations anymore. <html ng-app="MyApp"><body> ... The ng-animate="..." directive is deprecated So lets say that our repeat element HTML looks like this: ngShow and ngHide remove and add the .ng-hide class name You may be wondering why we used the !
Tutorial: Tutorial There was an error loading this resource. Please try again later. A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device. Follow the tutorial to see how AngularJS makes browsers smarter — without the use of native extensions or plug-ins: See examples of how to use client-side data binding to build dynamic views of data that change immediately in response to user actions.See how AngularJS keeps your views in sync with your data without the need for DOM manipulation.Learn a better, easier way to test your web apps, with Karma and Protractor.Learn how to use dependency injection and services to make common web tasks, such as getting data into your app, easier. When you finish the tutorial you will be able to: Install Git npm install
Templates de Page - Le Guide WordPress Le Guide WordPress: tutoriel, astuces, plugins et hébergement Le seul template page.php peut ne pas suffir. Nous venons de voir ce que contenait le template page.php. Il est plutôt basique mais joue bien son rôle. Une des particularités des Pages, et j’en avais déjà parlé, est de pouvoir créer des templates de Page. Il s’agit tout simplement d’un fichier où vous mettez le code PHP que vous voulez. Ce code sera affiché à travers une Page, du moment que vous lui disiez (à cette Page) d’utiliser ce template. Cela se fait donc en 3 étapes : Créer un template de PageCréer une Page dans l’admin WordPressDire à cette dernière d’utiliser le template précédemment créé Création d’un template de Page Un template de Page n’est autre qu’un fichier PHP particulier. Créons par exemple un fichier qui recensera certaines statistiques du site : nombre de Postsnombre de Pagesnombre de commentairesune liste des Pages (c’est cadeau ça) Dupliquons page.php et renommons-le stats.php (ou hasta-la-vista.php, le choix est libre et pas pénalisant pour la suite). <? Et voilà !
Animating AngularJS Apps: ngView AngularJS provides a great way to create single page applications. This allows for our site to feel more and more like a native mobile application since we have a single page app. To make it feel even more native, we can add transitions and animations using ngAnimate module. This module allows us to create beautiful looking applications. Today we’ll be looking at how to animate ng-view. What We’ll Be Building Let’s say we have a single page application where we want to animate the page change. We’ll use: ngRoute for our page routingngAnimate to create our page animationsCSS Animations will be applied to the pagesEach of our pages will have different animations when leaving or entering the view Extreme Animations: The animations we’ll be using here are a little over the top. How Does It Work? Let’s take a look at how ngAnimate works. ngAnimate will add and remove CSS classes to different Angular directives based on if they are entering or leaving the view. Starting Our Application Base Styles
Thinkster Tutoriel Swift - Développer des Apps iOS 8 Partie 1 Apple a annoncé lors de la WWDC 2014 un changement assez majeur à la façon dont les applications iOS sont développées : un langage de programmation tout à fait différent appelé Swift qui remplace Objective-C. Comme je me suis lancé dans l'apprentissage de ce langage, j'ai décidé de poster régulièrement mes découvertes pour les partager. Cet article est le premier d'un grand nombre sur le sujet, et j'espère que vous allez les suivre ! Dans ce tutoriel, nous allons développer une application iOS qui téléchargera des chansons iTunes à partir de l'API iTunes, affichera cette information sur l'iPhone en utilisant un contrôle commun, appelé Table View, et nous permettra de regrouper ces morceaux dans un album et d'en jouer quelques-unes des pistes. Donc, je vais commencer avec une application assez basique et expliquer comment le code fonctionne. Par exemple, là où en Objective-C vous avez ceci : NSString *maChaine = @"C'est ma chaîne vous avez maintenant ceci : var maChaine = "C'est ma chaîne."
cgross/generator-cg-angular Apprendre à programmer avec le framework Angular : démarrer avec l'outil Angular-CLI, un tutoriel de William Koza Bonjour à tous, Dans ce tutoriel, nous allons apprendre à utiliser le client Angular-CLI qui est d'une grande aide pour commencer un projet. Google nous propose un outil clé en main pour réaliser les tâches de développement les plus courantes. Ce projet est basé sur le projet Open Source ember CLI, qui a maintenant plus de trois ans. Grâce à notre Angular Cli, il est possible de :créer une application from scratch via un scaffolding ;Générer des squelettes des composants type Components… ;Builder un projet ;Lancer des tests de type « End-to-End » ou « unitaire » ;Proxyfier le back end ;Et beaucoup d'autres choses… Bonne lecture.