Rocky Jaiswal | Angular.js Hacks A couple of good things happened this week, I got a MacBook Pro (Retina Display) from my generous employer (which I setup promptly after the recent pain Linux distros have been giving me) and I got an underground car parking at work. At 45 degrees, walking back to my car from my office was no easy feat and I am glad that now I've got a cool car (literally) waiting for me when I head home. Also, I have been lucky enough to work on Angular.js for the last two weeks. Initially I was a bit apprehensive to work on it since I have been learning some Backbone.js lately, but then I gave Angular.js one more shot and have been really happy with it. Since I am a CoffeeScript admirer and Backbone.js played really well with CoffeeScript I tried a bit to make Angular.js also work with CoffeeScript. Angular.js and CoffeeScript Controllers Services / Factory Directives I am reasonably pleased with the controller and service code. Animate a view with Angular 1.0.x Well, it worked! with That's it.
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 - Modern workflows for modern webapps Why its best practice to inject $rootScope and $controller unit testing controllers? $rootScope has some attached functionality. For example, $broadcast, $emit, $on (probably more than that). As such, supplying your own fakes might not test the actual behaviour. I've found it useful to only mock things that can't be run in a test suite. For example, $window and $http. Thank you for your responses, clarifies some things. Hi Jason i wondered if you could elaborate why using $rootScope. Hi Lior, When I said "pure unit testing", I just meant in terms of Jorge's comment about mocking ALL injectables. Got it. well no need to mock what can run without dependencies (unlike $browser, $http etc).
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
Best practices for unit testing angular directives I'm writing some unit tests for directives in AngularJS using Jasmine and Karma as my test runner. As I'm doing this, I'm wondering whether or not I'm following the best means of setting this up and was hoping someone could help me out. If my directives use a template by means of templateUrl, is it best to import the actual template, which has proved to be a bit tricky, or to insert a mock of the template using $templateCache and make my assertions of of that? For unit testing, it would seem to me that creating mocks would be the best option because it avoids pulling in the additional resources which clutters up the point of unit testing. Also, I'm having trouble searching within individual DOM elements, and have been using element.text() to search for content that is bound to the DOM. Say I have the following element as my template: <div><div id = "one">data1</div><div id = "two">data2</div></div> And I compile it into an angular.element. Thanks
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