background preloader

Kickstart Your AngularJS Development with Yeoman, Grunt and Bower

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

Related:  AngularJSNode.js

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 setup. 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.

AngularJS and Twitter Bootstrap playing nicely? 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.

Why you should use ng-init Let's see some (incomplete) code that use ng-init <ul ng-controller="UserCtrl" ng-init="loadCurrentUser()"><li>{{currentUser}}</li></ul> myApp.controller("UserCtrl", function ($scope, AuthSrvc) { $scope.loadCurrentUser = function() { AuthSrvc.fetchCurrent().then(function(answeredUser) { $scope.currentUser =; }); }; }); And it's equivalent without ng-init <ul ng-controller="UserCtrl"><li>{{currentUser}}</li></ul> myApp.controller("UserCtrl", function ($scope, AuthSrvc) { AuthSrvc.fetchCurrent().then(function(answeredUser) { $scope.currentUser =; }); }); At first glance second possibility is less verbose.

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.

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.

Building Nested Recursive Directives in Angular - Sebastian's Blog I learnt a new trick over the weekend using Angular, how to build a recursive tree of objects using directives. In this post I want to share how to do it. Let’s say that you have some data that looks like this, it can be as deep as you want: And using this data you want to build a tree, e.g.

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:

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.

Interceptors in AngularJS and Useful Examples - Web Development is Easy! The `$http` service of AngularJS allows us to communicate with a backend and make HTTP requests. There are cases where we want to capture every request and manipulate it before sending it to the server. Other times we would like to capture the response and process it before completing the call. Global http error handling can be also a good example of such need. Interceptors are created exactly for such cases.

Build a real-time polls application with Node.js, Express, AngularJS, and MongoDB Recently while lecturing on HTML5 to a large group of students, I wanted to poll them and display their voting results, updating in real-time. I decided to quickly build a polling app for this purpose. I wanted a simple architecture and not too many different languages and frameworks. So I decided to use JavaScript for everything — Node.js and Express for the server-side, MongoDB for the database, and AngularJS for the front-end user interface. “This MEAN stack (Mongo, Express, Angular, Node) may one day surpass the simplicity of the LAMP stack (Linux, Apache, MySQL, PHP) for web application development and deployment.”

Superspeed your angularjs apps AngularJS renders HTML incredibly fast.But when rendering large DOM trees like containing tables with sort able columns, filtering and stuff ... it might get slower than you want ...While working on Orangevolt Ampere (which is heavily based on AngularJS) I realized a few remarkable performance tricks.The hints detailed in this article can improve AngularJS pages rendering up to 1000% and more - no kidding !Performance is actually not a AngularJS problem - it's YOUR code. Let me explain you why:If you read the excellent answer over at Stackoverflow: Databinding in angularjs then you might noticed that AngularJS compares the last rendered data with the current datamodel whenever $apply was called to evaluate which parts of the DOM must be updated.That's - simply said - the whole magic behind AngularJS.With that knowledge you may guess the answers to the following questions:What happens when a INPUT element with attached ng-model changes its values during user input ?

What You Need To Know About AngularJS Data Binding You hear a lot about data binding in AngularJS, and with good reason: its at the heart of everything you do with Angular. I’ve mentioned data binding more than a few times in my guides to directives and filters, but I haven’t quite explained the internals of how data binding works. To novices, it seems like straight sorcery, but, in reality, data binding is fundamentally very simple. Scoping out the situation Fundamentally, data binding consists of a set of functions associated with a scope. A scope is an execution context for the expressions you write in your HTML.