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. 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 :)
ftlabs/fastclick Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. PreprocessingPreprocessing permalink CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. You can also watch individual files or directories with the --watch flag. sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. 💡 Fun fact: SCSS Syntax
yeoman/generator-angular 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. A separate blogpost discussing the complementing server-side code can be found 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.
PhoneGap and AngularJs, The Start This series of tutorials will focus on using PhoneGap and AngularJs together in an iOS application. We will start off small but build upon the PhoneGap api to expose some AngularJs services so they both play nice together. PhoneGap PhoneGap is an open source framework that allows you to develop cross device capable mobile applications in Html5 and JavaScript. Disclaimer, this tutorial assumes you have a Mac and XCode installed. Getting PhoneGap Setup The first thing you want to do is download PhoneGap here. /Users/YourUser/Downloads/phonegap-2.7.0/lib/ios You will next want to run the create script that setups and creates your XCode project. The first argument is the path to the location where your project is being stored.The second argument is the package name, org.example.angulargapThe last argument is the project name, AngularGap . After running that command your empty folder of AngularGap now contains all the fun bits of your empty PhoneGap application. The pieces that are created: and
Grunt pour ceux qui pensent que Grunt est compliqué On parle beaucoup de Grunt aujourd'hui, mais les articles disponibles sont souvent abscons et techniques. Pourtant Grunt n'est pas réservé aux spécialistes, comme le montre cette introduction de Chris Coyier. Par Chris Coyier On donne souvent les conseils suivants aux intégrateurs web : Divisez votre CSS et votre JavaScript en autant de parties que nécessaire, puis concaténez-les pour la version de production de votre site. Il y en aurait encore beaucoup à ajouter, mais voilà déjà quelques basiques. Je suis sûr que vous avez entendu parler de Grunt. Mais soyons clair : Grunt est un de ces nouveaux joujoux à la mode que tous les cool kids utilisent, mais qui à première vue semble étrange et intimidant. Écartons tout de suite quelques malentendus Peut-être avez-vous entendu parler de Grunt mais ne l'avez pas utilisé vous-même. Je n'ai pas besoin de ce que fait Grunt Probablement que si, en fait. Grunt fonctionne avec la console - Je ne suis qu'un designer Je suis designer, moi aussi. grunt
Using Yeoman to Create a Web Application ← Big Data Roundup | Meteor Web Application Creation → A guest post by Jonnie Spratley, who currently works for GE as a UI Developer on the Industrial Internet Team building user interfaces for next generation products, and teaches a variety of programming courses at AcademyX. In this post we will discuss using Yeoman, which is a client-side stack that contains three tools and frameworks to help developers quickly build beautiful and scalable web applications. These tools include support for linting, testing, minification and more. Read Yeoman: Optimizing Your Workflow in AngularJS for more about Yeoman. Yo is used to generate things, from other generators to files and more.Bower is used for dependency management, downloading and installing .js components.Grunt is used for task management such as building, previewing and testing. How To We are going to use all of these tools described above to create an AngularJS application. 1. $ npm install -g yo grunt-cli bower 2. 3. a. b. c. d. e. f. g.
AngularJS Tutorial - AngularJS in 30 minutes I started using AngularJS over 3 years ago when it was new and relatively unknown. Since then AngularJS has become one of the most popular JavaScript frameworks and for good reason. The AngularJS team have done superb work and are very dedicated to ensuring AngularJS is the best it can be. This AngularJS tutorial will be using version 1.3.4 and will cover just the basics and follow the best practices recommended by Google and by me through my own experience. To get started create a folder called angularjs-tutorial and create the following files copying the directory structure below. - angularjs-tutorial | - main.ctrl.js | - app.js | - index.html Open index.html and add the following simple HTML to create a basic web page that includes AngularJS and Twitter Bootstrap from a CDN. <! This HTML document also includes app.js and main.ctrl.js which you have just created. Within our app.js file we need to instantiate an AngularJS module which we will use for our app. angular.module('app', []); Info
Jens Rantil's Hideout Lately I've been working a lot in AngularJS. This is my second project with the framework, and the more time I spend in it, the more I like it. But as with most things, AngularJS has some rough corners. My intention with this blog post is to go through one such use case, namely dealing with complex dependencies. The level of this tutorial is intermediate. A slow service Let's say you have some data you would like to present to your user and you prepare some data in your controller. This is very basic AngularJS and I expect you to have no problems understanding the mapping done here. But in the real world, we rarely hardcode things. Now, let's create a service that simulates a slower API call. Notice that it takes a couple of seconds before the result is presented on the screen when you click "Result". Also, it's worth making a mental note that we are storing a promise to the scope. Obviously, we are not generating any errors here, but you never know! Refreshable data between controllers
Premiers pas avec Grunt Nous vous conseillons aujourd’hui d’utiliser un gestionnaire de tâches qui nous paraît être mieux sur bien des points: configuration plus souple, lisible et facile et rapidité vous attendent avec Gulp. Vous avez sûrement déjà entendu parler de Grunt à droite à gauche, en conférence, voire votre boite l’utilise déjà mais vous ne savez toujours pas trop ce qui se cache derrière ce terme saugrenu digne d’un personnage de Warcraft. Soit, ce n’est pas bien grave. Grunt est simplement un JavaScript Task Runner, un outil vous permettant de créer des tâches automatisées en JavaScript. Forcément ce n’est pas très parlant mais c’est tout l’intérêt de cet article, vous expliquer ce qu’est Grunt et pourquoi il peut vous être utile dans un workflow de front-end dev. Vous est-il déjà arrivé de devoir régulièrement lancer, lancer et relancer des processus tels que Sass, LESS, uglify - en somme des préprocesseurs ou des minifiers - régulièrement à la main ? Voici un workflow assez classique : $ npm init
Modern workflows for modern webapps The Yeoman workflow is comprised of three core tools for improving your productivity and satisfaction when building a web app. These tools are: yo - the scaffolding tool from Yeomanbower - the package management toolgrunt - the build tool Each of these projects are independently maintained by their respective communities, but work well together as a part of a prescriptive workflow for keeping you effective. yo Yo is maintained by the Yeoman project and offers web application scaffolding, utilizing scaffolding templates we refer to as generators. Installing yo and some generators First, you'll need to install yo and other required tools: npm is the package manager for Node.js and comes bundled with it. If you are using npm 1.2.10 or above, this will also automatically install grunt and bower for you. # For npm versions < 1.2.10. npm install -g grunt-cli bower If you have installed Grunt globally in the past, you will need to remove it first: npm uninstall -g grunt Basic scaffolding and then run:
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. Para los más flasheros un sustituto ideal con tecnología estándar web de las RIAs (Rich Internet Application) creadas con Flex. Durante este artículo os mostraremos un ejemplo de cómo empezar y una buena forma de organizarnos con AngularJS ¿Qué es AngularJS? Routing en