background preloader

AngularJS and scope.$apply — Jim Hoskins

AngularJS and scope.$apply — Jim Hoskins
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. But why does it exist? And when do you need to use it? 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); How do we update bindings? $scope.

node-inspector/node-inspector Promise-ы в AngularJS Одной из ключевых составляющих практически любого веб-приложения является взаимодействие с сервером. В больших приложениях это далеко не один запрос. При этом запросы часто необходимо объединять для последовательного или параллельного выполнения, а часто сочетать и то и другое. Кроме того, большие приложения обычно имеют многослойную архитектуру — обертка над RESTFul API => бизнес-сущности => более комплексная бизнес-логика (разбиение условно для примера). И на каждом слое необходимо принять данные в одном формате и передать на следующий слой уже в другом. Вот со всеми этими задачами могут помочь справиться Promise-ы. За подробностями добро пожаловать под кат. Promise-ы предоставляют интерфейс для взаимодействия с объектами, содержащими результат выполнения некоторой операции, время окончания которой неизвестно. Кроме того, promise-ы можно объединять как для последовательного, так и для параллельного исполнения. Итак, что из себя представляет promise? Что в AngularJS вернет вам promise?

jkrems/bugger JavaScript Promises No I am not talking the promise that JavaScript will fix everything if you use it. I don't even believe that ;) I am talking about the concept of a promise object that several JavaScript libraries use (including AngularJS, jQuery, Dojo and WinJS). A promise is a pattern for handling asynchronous operations. The problem is that essentially when you start an asynchronous operation, you need to execute some code as the operation is completed. Asynchronous code is so common that most libraries have found a solution for passing in callbacks. But there is little commonality to how each libraries does this. In this example you can see the jQuery uses the success property of the settings object to specify the callback. The promise pattern sets out to simplify this process. What is interesting here, is that the object that ajax returns is the xhr object which implements the promise pattern so we can call then as seen here. Let's see how using a promise looks.

How to build and test your Rest API with Node.js, Express and Mocha | thewayofcode If you need to build an API, you want it done quickly and simply and you love JavaScript, then this article is for you! I’m going to show a simple, quick and effective way to build and unit test your API and your routes, using Node.js, Express and a few amazing test libraries: Mocha, SuperTest and should.js that integrate very well together in a natural fashion. The API style is Rest, that is it leverages URLs and HTTP verbs, but I won’t go much into details in this tutorial. If you ever used technologies such as WCF, you will be amazed at how much quicker it is to build your API with Node, there’s virtually no machinery to put in place, no service references to update, no WSDL… it’s pretty much just logic to implement! From words to code: A nice and free dev environment where to start coding is cloud9 ( as it offers everything you need and maybe more: a text editor with syntax highlighting, a Node.js environment, a debugger (!) config.js routes.js server.js index.js $ mocha

jmcunningham/AngularJS-Learning DevTools Extensions For Web App Developers The past year has seen many leaps made to improve developer productivity through better tooling. We're paying increasing attention to our workflow and many of us have spent time optimising our usage of tools like Grunt, Bower, Yeoman and the terminal. Another important area worth spending time on is your debugging workflow – if you're like me, this starts with the Chrome DevTools. When building an application with a specific framework or language abstraction, there's actually some additional tooling available to you in the form of recent DevTools extensions. In this post, I'll share a quick summary of the latest developments in this area, ranging from the recent Ember extension Yehuda Katz presented at EmberCamp through to less well known extensions for Backbone and KnockoutJS developers. Note: Canary DevTools disables icons in the toolbar by default, but I've re-enabled them via the Settings cog to aid with visualisation. Ember Inspector Backbone DevTools Angular Batarang Thorax Inspector

Index There was an error loading this resource. Please try again later. A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. Follow the tutorial to see how AngularJS makes browsers smarter — without the use of native extensions or plug-ins: See examples of how to use client-side data binding to build dynamic views of data that change immediately in response to user actions.See how AngularJS keeps your views in sync with your data without the need for DOM manipulation.Learn a better, easier way to test your web apps, with Karma and Protractor.Learn how to use dependency injection and services to make common web tasks, such as getting data into your app, easier. When you finish the tutorial you will be able to: The tutorial guides you through the entire process of building a simple application, including writing and running unit and end-to-end tests. Install Git Download angular-phonecat cd angular-phonecat

Really simple file uploads with Express Static Version Few days ago I was working on a fairly typical web application and I faced the challenge of implementing a fairly typical web application feature - file uploads. It was the first time I was implementing file uploads with Node (and Express) and I did what anyone else would do - I googled it. Unfortunately all the articles / posts out there are either outdated, too complex or plain wrong. So I did the next most obvious thing - post a question on the mailing list. The upload form This is the most obvious part of the challenge. You will need a form in your browser for the file upload. form(action=" The form.action will point to a route that handles the file upload. Accessing the uploaded file If you're using recents versions of Node and Express, file uploads are a piece of cake. Okay, now let's justify the "piece of cake" claim. The file object contains the type, size and name properties for your server side validations. Saving the uploaded file That's all there is to it.

Related: