background preloader

Controller/Directive Interaction

Facebook Twitter

The Promised Land (in Angular) Removing the unneeded watches. Having too many $watch can create performance issues for webpages, especially on mobile devices.

Removing the unneeded watches

This post will explain how to remove extraneous $watch and accelerate your application! Any $watch can be disabled when it is no longer needed. Thus, we have the freedom to choose when to remove a $watch from the $watch list. Let’s see an example: Try it. $http response interceptors. Time ago I wrote a post about dealing with asynchronous requests in AngularJS; in this post I showed how to assign to a variable a value, synchronously even when the value is not static, but is fetched asynchronously from the server.

$http response interceptors

One thing that I didn’t wrote in that post, is that AngularJS allows to intercept the response coming from the server, before that the control of the execution is returned to the code that initiated the request. Have this possibility is useful for different reasons, but in general a response interceptor is needed every time the application needs to preprocess the response that it gets from the server. To register a new interceptor is not difficult, but requires the possibility to access the $httpProvider server provider, so generally this kind of operation is executed in the configuration section of the web application.

AngularJS promise, or dealing with asynchronous requests in AngularJS. AngularJS Promise is one of my favourite features of AngularJS.

AngularJS promise, or dealing with asynchronous requests in AngularJS

Promises help a lot by handling asynchronous return of data, and allow to assign properties synchronously even when the return is asynchronous. This post will show you a typical use case for the promise feature of AngularJS. I will describe the scenario in which I was working. It could be siplified as follows: function stageController(scope, p) { scope.revenues = []; scope. Dynamically Loading Controllers and Views with AngularJS and RequireJS - Dan Wahlin. Dynamically Loading Controllers and Views Updated: August 30th, 2014.

Dynamically Loading Controllers and Views with AngularJS and RequireJS - Dan Wahlin

Developing with AngularJS - Part II: Dialogs and Data. A couple of days ago, I wrote an article on how I started developing with AngularJS.

Developing with AngularJS - Part II: Dialogs and Data

I used AngularJS for several months to develop a "My Dashboard" feature for a client's product and learned a whole bunch of stuff along the way. This article provides an overview of how I changed some of My Dashboard's features to use Angular instead of jQuery. After finishing the prototype work in January, we started moving bits and pieces into the main application. We kept the same file names for our Angular-related files and copied them into the project. All these files are packaged up into a dashboard.js file that's included at the bottom of our Dashboard page. Around this time, we also had many discussions with the Product Team about charts. We committed the first pass (with sample data still hard-coded) in mid-February. Angular UI's Carousel While finishing our initial prototype, I learned about Angular UI's Carousel, an implementation of Bootstrap's Carousel.

AngularJS Tutorial — Build an App Using Directives and Data Binding. AngularJS is quickly gaining a reputation as one of the most forward-thinking JavaScript frameworks around, with good reason.

AngularJS Tutorial — Build an App Using Directives and Data Binding

Backed and developed by Google, Angular takes an approach to your front end that may seem a little odd at first, but you’ll soon wonder why you did things any other way. Angular gives developers the ability to write front end code without resorting to directly manipulating the DOM. This tutorial will get you started with the framework by building an app using directives and data binding to define dynamic views and controllers. Modular Javascript Using Require.Js. Download demo project : RequireJsDemos.zip I don't know how many of you use lots of JavaScript libraries, but we found ourselves using quite a lot within certain projects.

Modular Javascript Using Require.Js

One of the strange issues that came about from linking JavaScript files was that we occasionally ran into dependency issues, where by a particular JavaScript source file would have a dependency on another JavaScript source file that was not loaded (and therefore not available) yet. As luck would have it there is an excellent library for dealing with interlinked JavaScript dependencies and module loading which is called : RequireJs You may be asking what problem RequireJs is attempting to solve. Well lets consider a most common example, which is that of a custom jQuery plugin, where jQuery MUST be loaded before the plugin will work.

We instantly have a problem, our custom jQuery plugins will not work, as jQuery itself has not be loaded yet. Simonsmith.io - Portfolio and blog of a London based front-end web developer. RequireJS is great, and if you are using or planning on using RequireJS for managing JavaScript then you’ll really notice the benefits.

simonsmith.io - Portfolio and blog of a London based front-end web developer

However one of the trickier parts of RequireJS greatness is finding a way to organise JavaScript modules across multiple pages and on a more granular level, multiple HTML modules on those pages. Angular injection. Tl;dr is marked throughout by ∴ I don't like magical code.

Angular injection

AngularJS is magical. I must fix this. Dependency injection was one of AngularJS's first evil magicks I encountered. The idea that calling this function function myFunction($scope, $http) { ...} will magically reach out to the universe and grab the correct values for $scope and $http runs contrary to all the JavaScript I've ever used. So I dug in to discover the magicks. Modules. Design patterns - How to explain Dependency Injection to a 5-year old. AngularJS, Dependency Injection, and when is a singleton not a Singleton? There can be only one.

AngularJS, Dependency Injection, and when is a singleton not a Singleton?

The Singleton is the Highlander of design patterns. There can be only one. Directive - Calling Controller Methods. Controllers & Directives - Communication Between. Controller/Directive. Data Binding with AngularJS.