background preloader

Authentication in Single Page Applications with Angular.js - A Modest Proposal

Authentication in Single Page Applications with Angular.js - A Modest Proposal
9/2/2014 update:The GitHub repo now uses UI-router instead of the standard ngRoute routing module. This blog post will still illustrate the original technique utilizing ngRoute, while information regarding the UI-router approach can be found in the GitHub repo as well as this blogpost. The example app in the repo has been deployed to Heroku, so now you can test it out live for yourself right here. I have been working a lot with Angular.js lately, and love how easy it makes it to create web applications with rich client-side functionality. How do I deal with authentication and authorization in single page applications? Since only the initial load of the app is a full page load, and subsequent communication with the server is entirely done via XHRs I need a slightly different model from the traditional one. The server needs to communicate what permissions/role the client has on inital page load. Configuring access levels and user roles Setting up client-side routing

AngularJS. Framework JavaScript para Webapps « Los Tiempos Cambian En nitsnets | studios vamos a desarrollar un nuevo gran proyecto para una importante multinacional. Un B2B (business to business) de la que pronto podremos contar más. El reto: desarrollar toda la intranet sin lenguaje servidor ya que la capa de lógica de negocios está totalmente implementada por webservices y por tanto la creación de una Webapp o Web Application con tecnología estándar HTML/CSS3/Javascript para la correcta visualización en multiplataforma y multidispositivo. Después de tiempo investigando y planteando incluso una solución realizada a medida con nuestro jefe de proyectos Alex Such dimos con la solución: AngularJS un framework javascript MVC que se adapta a la perfección y encaja a todo lo que habíamos ideado. Durante este artículo os mostraremos un ejemplo de cómo empezar y una buena forma de organizarnos con AngularJS ¿Qué es AngularJS? AngularJS es un impresionante framework javascript opensource desarrollado por Google. Proyecto: listado de libros y acceso a su ficha en

Kickstart Your AngularJS Development with Yeoman, Grunt and Bower Whether you love or hate it, there’s no denying that AngularJS is the framework on every developer’s lips. It may not be for everybody, but AngularJS has a quirky, efficient and powerful feature set. Couple that with a few useful development tools like Yeoman, Grunt and Bower and you’ve got yourself an incredibly fast rapid prototyping process. What we’ll cover This AngularJS tutorial will cover: Generating a bare bones AngularJS app with YeomanUsing Grunt to speed up development and help perform repetitive tasksUsing Bower to add third party plugins/frameworksMaking minor changes to your AngularJS app Prerequisites To get the most out of this tutorial we recommend you have the following skills and resources available: A terminal and basic knowledge of the command lineNodeJS and NPM installedFundamental JS, CSS and HTML knowledge Files You can find a repo of this tutorial project here. Let’s get started yo! Alright, let’s get this thing underway. npm install -g yo grunt-cli bower Yeoman yo angular

AngularJS and Twitter Bootstrap playing nicely? | Will Vincent It seems a large contingent of people have an inordinately difficult time getting AngularJS and Twitter Bootstrap to play nice together. Maybe I'm lucky, maybe I'm doing something right, or maybe I'm doing something wrong, but for me.. it just works. I'm still pretty new to Angular, so I won't presume to tell you how to do things. But having read about all the various struggles people have working with some of the Twitter Bootstrap UI pieces, drop downs, tabs, and modals for example, I guess I expected my mileage not to vary much. As it turns out, my mileage does vary. So, when I ran across this question External Links icon on stack overflow regarding getting modals to work without polluting the DOM with excessive instances of the modal markup, I decided I'd share my experience and approach. Any AngularJS gurus who may stumble across this, please be gentle if I'm way off here -- remember, I'm still a noob :)

Form validation with AngularJS Client-side form validations are one of the coolest features inside of AngularJS. AngularJS form validation enables you to write a modern HTML5 form that is interactive and responsive from the start. There are many form validation directives available in AngularJS. We’ll talk about a few of the most popular ones here and then we’ll get into how to build your own validations. AngularJS makes it pretty easy for us to handle client-side form validations without adding a lot of extra effort. To use form validations, we first must ensure that the form has a name associated with it, like in the above example. All input fields can validate against some basic validations, like minimum length, maximum length, etc. It is usually a great idea to use the novalidate flag on the form element. Let’s look at all the validation options we have that we can place on an input field: Required To validate that a form input has been filled out, simply add the html5 tag: required to the input field: Minimum length

Egghead IO Learn AngularJS With These 5 Practical Examples Martin Angelov By now you’ve probably heard of AngularJS – the exciting open source framework, developed by Google, that changes the way you think about web apps. There has been much written about it, but I have yet to find something that is written for developers who prefer quick and practical examples. What is AngularJS? On a high level, AngularJS is a framework that binds your HTML (views) to JavaScript objects (models). To use AngularJS, you have to include it in your page before the closing <body> tag. AngularJS gives you a large number of directives that let you associate HTML elements to models. It should be added to an element that encloses the rest of the page, like the body element or an outermost div. Enough with the theory! As a first example, we will build a navigation menu that highlights the selected entry. <! Run In the code above, we are using Angular’s directives to set and read the active variable. 2. <! 3. 4. Use the angular.module("name",[]) function call in your JS. <!

Related: