background preloader

Things I Wish I Were Told About Angular.js

Things I Wish I Were Told About Angular.js
Recently I have worked on a project using Angular.js. As of writing this post, it’s a medium sized app (~10 modules, ~20 controllers, ~5 services and ~10 directives) with quite decent test coverage. When I look back, I find myself learning much more about Angular.js than before. It’s not a smooth ride: I’ve gone through lots of refactor and rewrite. And there are lots of things I wish I were told before I started to work on Angular.js Heads up! About Learning Curve Angular.js has a very different learning curve from Backbone.js. However, Angular.js is very different. The problem is when you dive into Angular.js and start to write some serious app, the learning curve suddenly becomes very steep and its documentations are either incomplete or cumbersome. Understand Modules Before You Start Angular.js does not force you to use its module system. So I had to stop and refactor my code. So if you do not want to go through the refactor, learn and plan your modules before you start. About Testing

Related:  AngularJSAngularJSAngular.js

Classical OOP Inheritence in AngularJS using Coffeescript var __hasProp = {}. hasOwnProperty , __extends = function ( child , parent ) { for ( var key in parent ) { if ( __hasProp . call ( parent , key )) child [ key ] = parent [ key ]; } function ctor () { this . constructor = child ; } ctor . prototype = parent . prototype ; child . prototype = new ctor (); child . __super__ = parent . prototype ; return child ; }; angular . module ( 'myApp' , [ 'ngCookies' ]). factory ( 'BaseObject' , [ '$log' , '$http' , function ( $log , $http ) {

Your First AngularJS App: A Comprehensive Tutorial What is AngularJS? AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front-end applications. And Why Should I Use It? If you haven’t tried AngularJS yet, you’re missing out. The framework consists of a tightly integrated toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility. AngularJS extends HTML by providing directives that add functionality to your markup and allow you to create powerful dynamic templates.

AngularJS tips and tricks for neophytes and the all-around curious developer. – bytes for thought Article written as of AngularJS 1.0.7/1.1.5. Forget jQuery’s event handling altogether. I know it’s hard at first, but the temptation to use jQuery is the first and most common mistake developers make when starting out with Angular. It is so deeply engrained in our minds that you must force yourself to perform a paradigm shift. Since the entire application now has much fewer physical entry points (i.e. HTML files) – likely a single one – events such as $(document).ready() will only be triggered once throughout the entire application (on the initial load), and not with every Angular view change.

Eugene on dev: Kotlin, Node.js and TeamCity In this post I describe Node.js support plugin that was implemented in Kotlin Node.js The goal of the plugin is to provide an initial support for Node.js scripts execution on TeamCity. Plugin does the following: Detects system installed Node.js on the agent machine, it adds node.js configuration parameter with Node.js versionProvides a build runner to start .js file or script text AngularJS Best Practices: I’ve Been Doing It Wrong! Part 2 of 3 Three sanity-preserving ideas that will make me and you 10x more productive with real-world AngularJS applications This is the second in a three-part series on practical large-scale development with AngularJS. The TL;DR version is at the end of the article. If you have not read the first part, you might want to start with it.

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.

Dan Wahlin - Using an AngularJS Factory to Interact with a RESTful Service What’s covered in this Post? Creating a RESTful ServiceCreating an AngularJS ModuleCreating a FactoryCreating a Controller AngularJS provides a great framework for building robust Single Page Applications (SPAs) and provides built-in support for routing, MV*-style programming, services and factories, modules, testing, and much more. Although Angular can consume virtually any HTTP resource, in this post I’m going to focus on using it to consume a RESTful API created using ASP.NET Web API (note that any back-end service could be used). If you’ve worked with jQuery before then you’re used to calls such as $.getJSON() or $.ajax(). Although Angular plays really well with jQuery, it has built-in HTTP functionality that can be used out of the box and a way to encapsulate data functionality using factories or services.

AngularJS tips'n'tricks part 2 - revolunet blog Here’s a new batch of AngularJS tips and gotchas; If you didn’t read it yet, you can check the part 1 and feel free to comment below :) Access an element scope from outside This is useful for debugging: in your Chrome console, highlight a node in the Elements tab, then, in the console, to check its scope : Linux Scripts for Easy Installation To quickly install YouTrack from .jar distribution under Linux, perform the following steps under root user: You can now access YouTrack on port 80 via HTTP. To upgrade YouTrack to a newer build, execute the following script (make sure to change <version> to match the version of the build you're upgrading to):

Dynamically Loading Controllers and Views with AngularJS and RequireJS - Dan Wahlin's WebLog Dynamically Loading Controllers and Views Updated: August 30th, 2014 A complete sample application that uses the techniques shown in this post can be found at AngularJS provides a simple way to associate a view with a controller and load everything at runtime using the $routeProvider object. Routing code is typically put in a module’s config() function and looks similar to the following: While this type of code works great for defining routes it requires controller scripts to be loaded upfront in the main shell page by default.

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.

Related:  AngularJS