background preloader

AngularJS

Facebook Twitter

Upload

Recipes with Angular.js - Listening on Route Changes to Implement a Login Mechanism. Listening on Route Changes to Implement a Login Mechanism Problem You wish to ensure that a user has to login before navigating to protected pages. Solution Implement a listener on the $routeChangeStart event to track the next route navigation. The most interesting part is the implementation of the route change listener: Next we will define a login form to enter the username, skipping the password for the sake of simplicity: <form ng-submit="login()"><label>Username</label><input type="text" ng-model="username"><button>Login</button></form> and finally the login controller, which sets the logged in user and redirects to the persons URL: app.controller("LoginCtrl", function($scope, $location, $rootScope) { $scope.login = function() { $rootScope.loggedInUser = $scope.username; $location.path("/persons"); };}); You can find the complete example on github.

Discussion This is of course not a fully fledged login system so please don’t use it in any production system. Recipes with Angular.js - Listening on Route Changes to Implement a Login Mechanism. Techniques for authentication in AngularJS applications — Opinionated AngularJS. Creating a CRUD App in Minutes with Angular's $resource. Most Single Page Applications involve CRUD operations. If you are building CRUD operations using AngularJS, then you can leverage the power of the $resource service. Built on the top of the $http service, Angular’s $resource is a factory that lets you interact with RESTful backends easily.

So, let’s explore $resource and use it to implement CRUD operations in Angular. Prerequisites The $resource service doesn’t come bundled with the main Angular script. Also, your main app module should declare a dependency on the ngResource module in order to use $resource. Angular.module('mainApp',['ngResource']); Getting Started $resource expects a classic RESTful backend. You can create the endpoints using the server side language of your choice. How Does $resource Work? To use $resource inside your controller/service you need to declare a dependency on $resource. The result of the function call is a resource class object which has the following five methods by default: get()query()save()remove()delete() Bootstrap Tabs with Angular.js. Twitter Bootstrap Tabs are a very popular feature - at least for me.

I have them several times in my app. As part of my migration to Angular.js I want to use directives to switch between tabs. This has turned out so much easier than expected. Assume this HTML code: <ul class="nav nav-tabs"><li class="active"><a href="#standardNav">Standard</a></li><li><a href="#quickadd">Quick Add</a></li></ul><div class="calendarNav tab-pane fade in active" id="standardNav"> Pane 1 </div><div id="quickadd" class="tab-pane fade"> Pane 2 </div> This is some kind of basic Bootstrap Tab. $('.nav-tabs a').click(function (e) { e.preventDefault(); $(this).tab('show');}); But with Angular.js it is recommended to write directives for all UI manipulations.

<ul class="nav nav-tabs"><li class="active"><a showtab="" href="#standardNav">Standard</a></li><li><a showtab="" href="#quickadd">Quick Add</a></li></ul> Note: I could have left of equality and quote symbols, but some browser might complain. To map to.

OAuth

Angular html5Mode support for Yeoman & generator-angular. Smash the hash: Angular’s html5mode and pushState In my previous article about using generator-angular to develop Angular applications, we left Angular with its default setting of using hashes for urls, for example This is the way that Angular ships by default and it’s completely fine, but for us pickier devs there’s the html5Mode setting which uses pushState with a fallback shim for unsupported browsers. There are a few things we need to do in order to enable Yeoman & generator-angular to work in this way. First off is setting html5Mode in our app so that Angular knows we want to use pushState instead of hashes. Open up app.js, add the $locationProvider service to the config function, and tell Angular to use html5Mode: .config(function ($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); //... }) Easy, right?

The development server has a very tight focus First we’ll install it, saving it to our package.json: Relative vs root-relative paths. Using Yeoman with AngularJS.

MaterialDesign

Alexey Migutsky - 2 years with Angular. Tests. AngularJS 2.0 Status and Preview. AngularJS 2.0 Status and Preview AngularJS team has been busy working on AngularJS 2.0. As we mentioned before, this is not a complex major update; this is a whole rewrite! Having learnt many lessons from AngularJS and AngularDart a lot of thinking is being done to produce the future core and its ecosystem. We will walk you through what you need to know to stay up to date. Table of Contents What is AngularJS 2.0 all about? The team has opted to document each module into an architecture design document. Just when I was about to publish this article Brad Green (AngularJS manager) published an article on angularjs blog providing insight on what was being done and which goals were in mind. Brad does an excellent job expressing the key areas the team is working on. I will briefly review these cross cutting subjects and then I will try to summarize all different efforts the team has queued for AngularJS 2.0.

What are the challenges? These are the many facets the team is working on. Templating Notes. Injection rapide. AngularJS Multi-Step Form Using UI Router. Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create an animated multi-step form. This technique can be used for large forms that you would like to simplify for your users.

We can see this technique used in many places on the web. Places like shopping carts, signup forms, onboarding processes, and more have used the multi-step form to ease users through their online forms. Here’s what we will be building: Using UI Router and its ability to have nested states and different views per state, we will be able to make a multi-step form fairly easily. For a quick understanding of the benefits and how UI Router works, check out our other article: AngularJS Routing Using UI-Router Let’s get down to business and start creating our awesome form! Setting Up Our Project We will be using a simple structure for our application. Here are the files for our application. Each of the form-____.html files will be used as nested views inside of the form. Conclusion. Les nouveautés d’AngularJS 1.3 | Hype Driven Development. La team Angular prépare avec amour sa nouvelle version.

Ayant abandonné son précédent système de versionning pour adopter le semantic versionning, la 1.3 sera donc la nouvelle version stable (précédemment 1.0.x, puis 1.2.x, la 1.1.x étant la branche de développement, à la Unix Kernel). Mais que contient cette version fraichement émoulue? Outre les nombreux "fixes", on note l’abandon définitif du support d’IE8 : cette fois vous êtes seuls au monde si votre application doit tourner sur ce bon vieux IE. Pour le reste, nous avons passé au crible pour vous les différents commits (plus de 400!) Qu’elle contient ! Disclaimer Nous sommes dans la phase finale de rédaction d’un livre sur AngularJS en français, nous vous en dirons bientôt plus! NgModelOptions Jusqu’ici la directive ngModel lançait une mise à jour du model à chaque action utilisateur (donc à chaque frappe clavier par exemple, les validations étaient exécutées, et une boucle $digest se déroulait). Input date Like this: NgActivityIndicator.js - preloaders for Angular.js apps made easy - Pixelhunter - Dmitri Voronianski's blog.

1 day ago Recently I’ve decided to move into separate module a small bunch of code that was used in several of my Angular.js apps. That’s how appeared ngActivityIndicator.js! This small lib is an Angular provider for loading indicators, which you can use on directives, controllers or services. The most handy piece of it is a directive called ng-activity-indicator which can be used to inject the indicator into the DOM automatically. Another useful option is a set of 3 built-in CSS preloaders inside. So if you don’t need much customized behavior your app master view integration with ngActivityIndicator should be as easy as adding one line of code: If it feels like not enough styles for you I strongly recommend to take a look at CSS-loaders repository.

I should also say few words about API. More usage examples and customization options are listed on Github and you can see it in action on this Demo. AngularJS : le “petit” framework JavaScript (encore un?!) qui monte , qui monte! - JavaTeam Sodifrance. Introduction : AngularJS , qu’est ce que c’est ? AngularJS est un framework JavaScript, créé en octobre 2010 par des développeurs de chez Google et sous la licence MIT. Il propose une architecture basée sur le pattern MVC (Model View Controller) pour des SPA (Single Page Application), autrement dit des applications web où la navigation se fait sur une même et unique page (exemple : Gmail, Dropbox, iCloud, etc.).

Il a été créé avec la philosophie suivante : le HTML est très bien pensé pour les documents statiques mais il n’est pas du tout adapté pour un usage dynamique tel qu’on le voit dans les applications web. AngularJS enrichit le HTML avec une grammaire similaire, spécialement conçue pour des RIA (Rich Internet Application). Angular est permet donc d’animer des pages Web (comprenez : ce n’est pas une bibliothèque de somptueux composants -comme Sencha-, les composants devront être rajoutés) et ce framework repose sur cinq principes architecturaux hyper connus : Particularité : - Vue :

Cookie based authentication in angularJS applications. Authentication in angularJS applications can be cookie based or token based. In this post, I'll talk about how to implement a simple cookie based authentication mecanism. The server In the server, there are some prerequisites: An API to login: POST /login the request body should contain the username and the password.

A call to this API create a session returning a session id as a cookie. An API to get the currently loggedin user: GET /me the user object returned can be like this: the user roles will allow us to do some authorisation routing later. A loggout API do destroy the session: GET /loggoutThe protected APIs should return a 401 status if not loggedin and 403 if the user loggedin doesn't have the appropriate roles. The client A nice approach to handling authentication in angularJS applications is a route based one. To achieve this, we are going to add a custom attribute to angularJS routes' definition like this (the security attribute here): $rootScope. And that's it!!! AuthenticateJS. Youknowriad/authenticate.js. Cleaner AngularJS Directives With Curried Functions — Opinionated AngularJS. Say Hello to Partial Application! There are different approaches to define a function outside of the return block of the directive.

One of them is to use curried methods. Currying methods is a well known pattern in functional programming and also applicable to JavaScript. I think the documentation of the Lo-Dash library has a good explanation for their _.curry method: Creates a function which accepts one or more arguments of func that when invoked either executes func returning its result, if all func arguments have been provided, or returns a function that accepts one or more of the remaining func arguments, and so on. Or, as a code example… var curried = _.curry(function(a, b, c) { console.log(a + b + c);}); curried(1)(2)(3);// → 6 curried(1, 2)(3);// → 6 curried(1, 2, 3);// → 6 The Lo-Dash _.curry method provides a some nice additional features, but since ECMAScript 5 you can do this simply using Function.prototype.bind. function concat(a,b,c){ return [a,b,c].join('&'); } see Plunker example.

How do I implement the bootstrap navbar active class with Angular JS. How do I implement the bootstrap navbar active class with Angular JS. Comment utiliser les services $resource avec AngularJS. Comme je ne vous l’ai jamais dit, j’ai commencé à apprendre à utiliser AngularJS pour faire des applications Web. Et c’est pas mal du tout. J’apprécie particulièrement le fait de construire les vues (la partie HTML) en … HTML, ou presque. Et construire une application Web en HTML ce n’est pas aussi courant que cela puisse paraître. Enfin bref, voilà ce que j’ai appris à propos de la communication entre AngularJS et un serveur REST, en utilisant les services $resource.

AngularJS ? Voyons ce qu’est AngularJS, comme il s’agit de mon premier article sur le sujet. AngularJS est un framework JavaScript développé par Google, qui offre, comme son nom l’indique un cadre pour travailler avec JavaScript et produire des applications Web (voire des sites Web). Il est basé sur le principe Modèle/Vue/Contrôleur (MVC). Le principe : le contrôleur en JavaScript gère les données et les actions disponibles dans la vue en HTML.

Dans le contrôleur, on définit les données : Créer une ressource Utilisation La création.

AngularEtPolymer

L’authentification avec AngularJS | Occitech. Un framework front-end comme AngularJS ne peut pas être utilisé seul pour gérer l’authentification de manière sécurisée. En effet AngularJS étant entièrement instancié dans le navigateur, l’utilisateur peut modifier absolument tout le code et les données que vous lui fournissez. Nous devons donc mettre en place l’authentification du côté serveur de notre application, ce qui entrainera généralement la création d’une session serveur qui contient les informations de l’utilisateur connecté. Et là vous allez surement vous demander comment AngularJS va-t’il récupérer ces informations ? C’est là en effet tout le problème : gérer une authentification dans la partie backend de notre application, c’est une partie de plaisir avec les frameworks actuels, mais comment faire passer l’information à notre partie cliente ? Le cookie C’est la méthode traditionnelle, elle consiste à mettre en place un cookie généré en backend qui contient les informations de l’utilisateur.

Le token Et voila le travail ! Authentication with Ionic and Angular.js in a Cordova/Phonegap mobile web application | KD Moore Consulting | Keith D. Moore. There are many different approaches to authentication in general. One size certainly does not fit all. However, I will explain one approach to solve this problem using the ionic framework and Angular.js. First, we need to discuss how the backend web service will handle authentication.

One common approach is for the backend web service to require that an auth token be sent with each resource request. To obtain an auth token, the client will make a login request with a username and password. All resource requests from the client will require the auth token to be placed on the HTTP request header with the “Authentication” key. On the client side, once we get an auth token from a successful login, we save it locally so that we can pass it to the backend on subsequent resource requests. Witold Szczerba created a wonderful Angular.js module called angular-http-auth that will help us create an elegant solution. Our app will have a left side menu with “Home”, “Customers” and “Logout” links. 1. Les services AngularJS | Angular-js.fr. Les services AngularJS permettent de partager du code dans toute votre application, grâce à ce que l’on appelle l’injection de dépendances.

AngularJS propose un grand nombre de services (et providers) prêts à l’emploi. Ceux-ci sont précédés du symbole $. En voici quelques exemples : $timeout$http$compile Si vous débutez sur AngularJS, et avant d’utiliser une méthode fournie par jQuery (au hasard), demandez vous toujours si le framework ne propose pas une solution. Les services AngularJS sont : Lazily instantiated, c’est-à-dire instanciés que quand on en a besoinDes singletons, c’est-à-dire qu’ils ne sont instanciés qu’une seule fois (et non une fois par importation) Voici quelques exemples d’utilisation : Récupérer des données via requêtes Ajax (au lieu de le faire un peu partout dans les contrôleurs)Regrouper des fonctions « utilities » qui peuvent être utiles un peu partout dans votre applicationDéfinir les paramètres de votre application (ex: mode développement/production …) index.html.

Des sous-vues dans Angular. Building the 2048 game in AngularJS. "Étendre" un controlleur avec Angular. Java EE 7 with Angular JS – Part 1 | Roberto Cortez Java Blog. AngularJs Models / Angular Model : où placer mon modèle et ma donnée ? What You Need To Know About AngularJS Data Binding. Interceptors in AngularJS and Useful Examples - Web Development is Easy! Building Nested Recursive Directives in Angular - Sebastian's Blog. Why you should use ng-init.

VNC/RemoteDesktop

AngularEtRails. Développer et industrialiser une web app avec AngularJS | Java & Moi. Apprendre Angular en un jour, le guide ultime - VF svp. SocketIO. AngularJS : Les directives. Building a Customer Management App Using AngularJS and Laravel. Infinite scroll with angular - Anthony Estebe. How to use two ng-app in same page. Angular.js - create reusable HTML widgets with directives. AngularJSDoc. Apprendre Angular en un jour, le guide ultime - VF svp. Article/url-rewriting-with-angularjs. Load a module on demand with AngularJS. Developer Guide. How to integrate AngularJS with Rails 4 - Blog - Shelly Cloud. AngularJS collaboration board with Socket.io | JavaScript. When to use directives, controllers, or services in Angular JS :: Kirk Bushell.

0 - Bootstrapping. Kickstart Your AngularJS Development with Yeoman, Grunt and Bower. Ninja Squad - Angular, Express et Socket.io. AngularJS : pourquoi les développeurs en sont fous. Angular Weekly Digest #21 - Arthur Itey. Grid Pinterest like with Angular - Anthony Estebe. Que sait-on sur Angular JS 1.2 et 2.0 ? Angular filter – Part 1 | Hype Driven Development. Learn AngularJS in 5 steps - revolunet blog.

Learn AngularJS in 5 steps - revolunet blog. Yacine Rezgui – Web developer & geek dreamer (How to be a rockstar in AngularJS) Résolvez vos problèmes de Hashbangs grâce au PushState en HTML5. Firehist/grunt-angular-translate. Jmcunningham/AngularJS-Learning. Building minification-safe Angular.js applications | Flippidy Bits. Things I Wish I Were Told About Angular.js. AngularUI for AngularJS.