background preloader

Learn AngularJS this Weekend

Learn AngularJS this Weekend
Get ready to learn AngularJS - Photo Credit: Nomadic Lass AngularJS has a reputation for a steep learning curve. It’s definitely complex, but follows the 80/20 rule. 20% of the features are what you will use 80% of the time. If you are new to AngularJS and have a weekend to study, there are some very high quality resources that will let you start Monday with a strong working knowledge of AngularJS. Already know AngularJS? Feel free to skip ahead. The Official Tutorial ~4hrs Start with the official tutorial. The official tutorial is very well put together. Don’t use the angular-seed to start your real projects! Kickass (free!) You’ve done the tutorial, and should have a good grasp of the basics. All of the videos are great, but the series on directives is extra fantastic. Watch them all and take some notes. ahhhhhhh Learning AngularJS is refreshing - Photo Credit: chotda That will take you through Saturday evening, and you deserve a rest. Things get real with angular-app ~4hrs Congrats! Related:  AngularJS

Votre premier module AngularJS | Tutoriel AngularJS Spécifier le contrôleur Avant tout, on déclare notre contrôleur, comme on l'a vu au chapitre précédent, avec son nom et ses dépendances. Ici, il ne dépend que du service $scope. Et par la même occasion, on initialise la liste des todos avec un tableau vide. todoList.controller('todoCtrl', ['$scope', function ($scope) { var todos = $scope.todos = []; }]); J'ai profité de cette initialisation pour faire correspondre la variable todos à la variable $scope.todos. Vous remarquerez à ce propos, qu'on se contente d'appeler le service $scope pour manipuler LE scope de notre contrôleur et uniquement celui-là. Attention à ne pas confondre le service $scope et UN scope comme par exemple celui du contrôleur ou encore celui de ng-repeat. Ajouter un todo Ensuite, on implémente la fonction qui permet d'ajouter un todo : Quelques remarques sur cette fonction : Déclaration dela fonction À la ligne 30, on déclare bien la fonction comme une propriété du scope du contrôleur. Ajout du todo Two-Way DataBinding

Comprehensive Beginner's Guide to AngularJS - AntJanus Last Saturday, I gave yet another talk on getting started with AngularJS and with good success. I found myself wondering though, along the way, why is it that we keep needing these “getting started” talks with Angular? What makes it so complicated? Why do we need endless “basic” tutorials? I think the answer lies in the fact that AngularJS docs do not prepare you for Angular and good getting started tutorials don’t exist in the top 10 of google’s results. On top of that, we’re in the age of Udemy and similar services where you pay for a class as a way to thank an expert for sharing their knowledge. So I would like to rewrite my talk for you as a tutorial. So before we get to “how to use Angular”, let’s discuss “why” and “what” Angular is. About AngularJS AngularJS is an MV*-style javascript framework. Now, despite AngularJS coming into the mainstream just about two years ago, its initial release was actually back in 2009. What do I mean by that? “Single Page Apps” the Old Way. App 1 App 2

Javascript, retour aux bases : constructeur, prototype et héritage Depuis quelques temps, l’utilisation du javascript se démocratise. De langage permettant de faire clignoter un texte ou défiler un bandeau de pub sur votre site multimania, il est progressivement devenu un outil à part entière de toute application web, jusqu’au point, atteint récemment, d’être auto suffisant, et ainsi de voir émerger un certain nombre de librairies permettant de réaliser la partie interface d’une application (presque) exclusivement en javascript. Pourtant, on partait de loin ! C’est pourquoi je pense qu’il est très important de comprendre les particularités de ce langage lors de son utilisation. La déclaration inline Parce qu’il faut bien partir de zéro, la première façon de construire un objet en javascript est la déclaration inline. Ceci est une simple déclaration d’objet. Heureusement, des méthodes plus convaincantes existent. Le constructeur auto déclarant Prenons un exemple tout simple : Et voila, voici une classe toute bête. Cette méthode fonctionne bien. Voila.

jmcunningham/AngularJS-Learning End to end web app in under an hour–Part 1 | Jeremy Howard Here is the video tutorial that goes with this post: Here’s how to create a complete web app in under an hour. We will (naturally!) create a todo app. The features: Create, update, delete a todoSort (and show sort order)SearchPagination We’ll try to make it somewhat user friendly, e.g. Date-picker widget for todo due dateEnable/disable buttons as appropriate for context Our infrastructure will be: Backend Language: C#Backend Framework: WebApiDatabase: SQL Server (including SQL Express LocalDB during development)ORM: Entity Framework Code First + MigrationsFrontend Framework: AngularJSCSS styles: BootstrapIDE: Visual Studio + ResharperHosting: Appharbor As you’ll see, this particular choice of tools is well suited to rapid application development, and is also very flexible. The goal is not just to throw together the minimal necessary to have something working, but to create a really flexible infrastructure that we can use as a foundation for many future applications. The Backend <! The List Page

Ultimate guide to learning AngularJS in one day Angular is a client-side MVC/MVVM framework built in JavaScript, essential for modern single page web applications (and even websites). This post is a full end to end crash course from my experiences, advice and best practices I’ve picked up from using it. Mastered this? Try my Opinionated AngularJS styleguide for teams Terminology Angular has an initial short learning curve, you’ll find it’s up and down after mastering the basics. You’ve probably heard of MVC, used in many programming languages as a means of structuring/architecting applications/software. Model: the data structure behind a specific piece of the application, usually ported in JSON. You’ll then grab this information either from the server via an XHR (XMLHttp Request), in jQuery you’ll know this as the $.ajax _method, and Angular wraps this in _$http, or it’ll be written into your code whilst the page is parsing (from a datastore/database). View: The view is simple, it’s your HTML and/or rendered output. Controllers Output:

Le routage | Tutoriel AngularJS Organisation Avant de créer tout plein de templates et de contrôleurs, voyons comment organiser nos fichiers. Le but est de pouvoir facilement s'y retrouver tout en évitant la duplication de code. Je vous propose donc cette arborescence très simple mais bien adaptée pour les petits projets comme le nôtre (je vous rappelle qu'ici on fait une application qui n'a que 2 vues) : routeApp/ ├── index.html ├── js/ │ ├── script.js │ └── vendor/ │ ├── angular.js │ └── angular-route.js ├── partials/ │ ├── home.html │ └── contact.html └── web/ ├── css/ │ ├── style.css │ └── style.min.css └── img/ ├── logo.png ├── favicon.ico └── ... Je ne pense pas qu'il y ait besoin de beaucoup d'explications. La directive ngView Comme on l'a vu, on va donc faire un layout qui sera le même pour toutes nos (2) pages, le fichier index.html. <! On peut donc profiter du fait que le layout sera repris par toutes les pages pour y mettre un (tout) petit menu par exemple : <! Configurer le routeur Le path La route Écrire nos pages

A Better Way to Learn AngularJS - Thinkster Congratulations on taking the plunge! This AngularJS course is built with the intent of exposing you to the best available resources on each Angular topic. Our desire is to present these topics richly, and from a variety of vantage points, in order to afford you a more complete perspective on them. This course is accompanied by AngularJS Tutorial: Learn to Build Modern Web Apps with MEAN. The learning curve of AngularJS can be described as a hockey stick. With AngularJS, the "Ready, Fire, Aim" learning methodology of duct taping together a handful of tutorials and a cursory glance through the documentation will lead to confusion and frustration. Prerequisites Resources Since AngularJS is still in its infancy relative to other JavaScript frameworks, the number of encyclopaedic resources on it is still insufficient. AngularJS is not a library. Rather, it is a JavaScript framework that embraces extending HTML into a more expressive and readable format. Filling the Tank Adjusting Your Mirrors

L’architecture REST expliquée en 5 règles REST (Representational State Transfer) ou RESTful est un style d’architecture permettant de construire des applications (Web, Intranet, Web Service). Il s’agit d’un ensemble de conventions et de bonnes pratiques à respecter et non d’une technologie à part entière. L’architecture REST utilise les spécifications originelles du protocole HTTP, plutôt que de réinventer une surcouche (comme le font SOAP ou XML-RPC par exemple). Règle n°1 : l’URI comme identifiant des ressources Règle n°2 : les verbes HTTP comme identifiant des opérations Règle n°3 : les réponses HTTP comme représentation des ressources Règle n°4 : les liens comme relation entre ressources Règle n°5 : un paramètre comme jeton d’authentification Les 5 règles à suivre pour implémenter REST Règle n°1 : l’URI comme identifiant des ressources REST se base sur les URI (Uniform Resource Identifier) afin d’identifier une ressource. Quelques exemples de construction d’URL avec RESTful : Liste des livres Filtre et tri sur les livres

AngularJS — Superheroic JavaScript MVW Framework A Beginner's Tutorial for Understanding and Implementing ASP.NET Web API Introduction In this article we will talk about the basics of ASP.NET Web API. We will try to understand what a Web API is, what is the basic structure of a Web API project. Background Connectivity between applications is a very important aspect from a business applications perspective. SOAP and ASP.NET Web services Traditionally, Web Services provided a great way of creating connected web applications. Note: Refer this article for details on Web Services: Understanding the Basics of Web Service in ASP.NET[^] Problems with SOAP The SOAP offered an excellent way of transferring the data between the applications. but the problem with SOAP was that along with data a lot of other meta data also needs to get transferred with each request and response. Welcome to REST REST stands for Representational State Transfer. When we talk about the Database as a resource we usually talk in terms of CRUD operations. i.e. Now the basic CRUD operations are mapped to the HTTP protocols in the following manner:

Introduction à Angular JS | Blog d'une développeuse AngularJS est un framework JavaScript open source, fonctionnant avec une version minimale de jQuery. Il a pour but de faciliter la réalisation d’applications web monopages en étendant le HTML traditionnel pour servir le contenu dynamique de façon améliorée grâce à un data-binding bidirectionnel qui permet la synchronisation automatique des modèles et des vues. Les objectifs du framework sont notamment de découpler les manipulations du DOM de la logique métier, pour améliorer la clarté et la testabilité du code. Angular suit le design pattern MVC (Model-View-Controller) et encourage le couplage faible entre l’interface, les données, et la couche métier grâce à l’injection de dépendances. Ce framework voit sa communauté grandir rapidement. Il faut avouer qu’avec Google comme paternel, ça donne du crédit dès le départ ! Je ferais très bientôt un tutoriel afin de présenter plus précisément Angular JS, mon petit coup de coeur du moment !

La logique d'AngularJS | Tutoriel AngularJS AngularJS repose en grande partie sur le patron de conception (en anglais, Design Pattern) Modèle-Vue-Contrôleur. Ce design pattern — parce que ça sonne quand même mieux en anglais :) — se base, comme son nom l'indique, sur la subdivision conceptuelle de chaque page en un Modèle, une Vue et un Contrôleur. J'ai précisé en partie parce que l'on verra dans les parties suivantes du tutoriel qu'AngularJS ajoute au Contrôleur d'autres outils comme les services et les directives. Mais le plus important de tous est bien le Contrôleur puisque c'est celui qui contient la logique de la page. Si vous avez déjà développé des applications en PHP, avec ou sans framework (tel que Symfony2 ou Zend Framework 2), vous avez sûrement dû rencontré le modèle MVC. Pour illustrer les explications quelque peu abstraite, je vais utiliser l'exemple basique de la Todo List (= liste de choses à faire). La Vue C'est ce que voit l'utilisateur final. C'est la partie la plus facile à lire et à écrire. Moteur de template <!