background preloader

When to use $scope.$apply

When to use $scope.$apply
If you’ve written a non-trivial amount of code in AngularJS, you may have come across the $scope.$apply() method. On the surface, it may seem like just a method you call to get your bindings to update. To really understand when to use $apply, it’s good to know exactly why we need to use it, so let’s dive in! JavaScript is Turn Based The JavaScript code we write doesn’t all run in one go, instead it executes in turns. Instead, whenever there is a task that takes some amount of time, such as an Ajax request, waiting for a click event, or setting a timeout, we set up a callback function and finish our current turn. Let’s look at an example JavaScript file: var button = document.getElementById('clickMe'); function buttonClicked () { alert('the button was clicked'); } button.addEventListener('click', buttonClicked); function timerComplete () { alert('timer complete'); } setTimeout(timerComplete, 2000); When the JavaScript code is loaded, that is a single turn. How do we update bindings? $scope. Related:  Angular

Services Improve this doc While Angular offers several useful services, for any nontrivial application you'll find it useful to write your own custom services. To do this you begin by registering a service factory function with a module either via the Module#factory api or directly via the $provide api inside of module config function. All Angular services participate in dependency injection (DI) by registering themselves with Angular's DI system (injector) under a name (id) as well as by declaring dependencies which need to be provided for the factory function of the registered service. The ability to swap dependencies for mocks/stubs/dummies in tests allows for services to be highly testable. To register a service, you must have a module that this service will be part of. Using the angular.Module api: Using the $provide service: Note that you are not registering a service instance, but rather a factory function that will create this instance when called. Angular Service API

Code Organization in Large AngularJS and JavaScript Applications — Cliff Meyers Many developers struggle with how to organize an application's code base once it grows in size. I've seen this recently in AngularJS and JavaScript applications but historically it's been a problem across all technologies including many Java and Flex apps I've worked on in the past. The general trend is an obsession with organizing things by type. It bears a striking resemblance to the way people organize their clothing. Let's take a look at angular-seed, the official starting point for AngularJS apps. The "app" directory contains the following structure: css/img/js/ app.jscontrollers.jsdirectives.jsfilters.jsservices.jslib/partials/ The JavaScript directory has one file for every type of object we write. This is a mess. The next logical pass at organizing JavaScript involves creating a directory for some of the archetypes and splitting objects into their own files. Let's imagine we're building a simple e-commerce site with a login flow, product catalog and shopping cart UI's. Nice!

Generating blog posts • Everything you need to understand to start with AngularJS node-inspector/node-inspector Deal with users authentication This post is meant to share some thought about the main issues related to the user’s authentication in an AngularJS web app. This post is about how to maintain, and recognize, the status of authentication of an user (that is, if he’s logged in, or not) between the different routes of a web application. Moreover it also explains how to handle the case of a not authenticated user, who is trying to access to a page, that requires the user to be logged in. Before going into the details of my approach, it is very important to clarify that, because the user has full controll of the browser, each control implemented with front end technologies, must (!) Recognize an authenticated user There are probably several ways to recognize an authenticated user; infact it’s possible to set a global variable, or create a cookie… but my favourite way to reach the objective is to use an AngularJS service. Are you wondering about how to use this service? Mantain reserved content… reserved

A Step-by-Step Guide to Your First AngularJS App (with code) 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. It also implements two-way data binding, connecting your HTML (views) to your JavaScript objects (models) seamlessly. Angular provides services on top of XHR that dramatically simplify your code and allow you to abstract API calls into reusable services. Finally, I love Angular because of its flexibility regarding server communication. So, Where Do I Begin? First, let’s decide the nature of the app we want to build. <! Routes

AngularJs – RequireJs seed | Maxlab | Le Blog Ayant commencé à utiliser AngularJs récemment, je dois dire que je suis largement conquis. Outre la vision sympathique de surcharger le code Html et la facilité d’arriver rapidement à ce qu’on veut, l’organisation en modules réutilisables est très intéressante puisque propre et donc maintenable et surtout testable. Inspiré par certaines vidéos sur egghead.io (que je recommande vivement), j’ai essayé de pousser encore un peu plus loin le concept de modules indépendants en utilisant RequireJs pour gérer le chargement. Accompagné par un serveur http basé sur express, voici un template d’un mix AngularJs RequireJs et serveur Express avec les tests adaptés sur Testacular. Présentation du template Architecture L’ensemble des sources de l’application ( serveur + client ) est dans le répertoire src . app.js est un simple serveur http basé sur express qui pointe sur le répertoire public, le reste de l’application est coté client. Chargement de l’application Ca tombe bien, on y est ! Directives Services

jkrems/bugger service or factory ? tl;dr is at the end In various AngularJS tutorials and documentation, the authors choose to use service or factory but don't explain why you would use one or the other. Few mention that value and constant are also options. Let's see why you would use one over the other. We should also understand how providers work: provider Here's the source for the provider method: function provider(name, provider_) { if (isFunction(provider_) || isArray(provider_)) { provider_ = providerInjector.instantiate(provider_); } if (! name is a string. provider_ can be one of three things: function If a function is passed in, the function is called with dependency injection and should return an object with a $get method. Whatever the second arg to provider is, you eventually end up with an object that has a $get method. // You can run this // Create a modulevar hippo = angular.module('hippo', []); // Get the injector (this happens behind the scenes in angular apps)var injector = angular.injector(['hippo', 'ng']);

Related: