AngularJS Fun With Scopes | rabidGadfly This is the third in a series of posts detailing my experience learning AngularJS. This post and its accompanying example discusses the handling of scope. AngularJS scopes go hand and hand with the DOM (Document Object Model). DOM objects within a controller reference rely first on their controller counterparts for their property assignments. The example below includes three controllers: Limericks, Limerick1 and Limerick2. Try changing the “Title” and “Field” values within each of the limericks. View this on JSFiddle AngularJS controllers aren’t limited to local property definitions, though. To illustrate inheritance, {{author}} is defined only in Limericks but it’s used within all three controller objects. But wait, there’s more! Try changing the first instance by modifying the value in the “Parent pageTitle” field. For more information on AngularJS scopes, see the dev documentation.
Thinking in React | React Edit on GitHub React is, in our opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram. One of the many great parts of React is how it makes you think about apps as you build them. In this document, we'll walk you through the thought process of building a searchable product data table using React. Start With A Mock # Imagine that we already have a JSON API and a mock from our designer. Our JSON API returns some data that looks like this: Step 1: Break The UI Into A Component Hierarchy # The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. But how do you know what should be its own component? Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. You'll see here that we have five components in our simple app. And That's It #
Communication Between Directives in AngularJS Warning: This article is long and thorough. If you’re in a hurry, you can skip straight to the final product here: Prerequisites to this article Before reading this, get to know these AngularJS terms. You should also peruse the Angular Developer Guide, but don’t feel bad if a lot of the jargon does not make much sense at first. Step 0: Roadmap We’re going to create two custom directives that communicate with each other. Then we’ll glue the directive to a controller via a scope object. Lastly, we’ll create a second directive and glue it all together. Step 1: A basic directive, dissected For this example, we’ll create a custom search box that can be placed in our app with a custom <my-search-box> element. We’ll create a file called “app.js” with this content: Let’s walk through each line of that directive: This line declares a new module called “MyApp”. Here we are declaring a new directive. Now we can use this directive in our HTML like this:
Lucy | How does React decide to re-render a component? React is known for it’s performance. Because it has a virtual DOM and only updates the real DOM when required it can be much faster than updating the DOM all the time, even to display the same information. However, React’s “smarts” only go so far (at the moment!), and it’s our job to know it’s expectations and limitations so we don’t accidentally hurt performance. One of the aspects we need to be aware of is how React decides when to re-render a component. 1. A re-render can only be triggered if a component’s state has changed. Component changed? In this (massively contrived) example the Todo will re-render every second, even though the render method doesn’t use unseen at all. Well, but re-rendering all the time isn’t helpful... I mean, I appreciate that React is being super careful. But re-rendering seems expensive (and your example is melodramatic) Yes, re-rendering unnecessarily does waste cycles and is generally not a good idea. How can we tell React to skip re-rendering? It can be.
In the trenches: Transclude in AngularJS Transclude - That's not a word you'll find in a dictionary :). Once you dive into Angular, creating custom directives is a daily chore and having good understanding of transclusion becomes imperative. To explain it in one sentence, transclusion consists of plucking out the content of a custom directive, processing it against right scope and then placing it at a marked position in the template of that directive. Purpose and usage of transclude argument that a directive compile function receives.Purpose and usage of $transclude injectable in a Controller.Isolate scope and transclude.Transcluding into an attribute. I'll try to throw some light on these with the help of working fiddles. Basic transclude Let's start with the most basic transclude example. Here is the fiddle for it. Take a look at the markup. Transclude at multiple locations Well, that's not possible with the default mechanism. Here is a fiddle that demonstrates this approach. Transclude argument to compile function in a directive
React Patterns ss-angular Create an angular service that can be injected into controllers similar to the angular REST resource library. Create a new socketstream appEdit its package.json to add ss-angular as a dependency: run npm installReference the ss-angular request responder in your app.js: ss.responders.add(require('ss-angular')); This will install the backend request responder, and inject the client library for models specifically and some other wrappers around existing SocketStream features for use in AngularJS. Add the following to your client/code/app/entry.js above the ss.server.on line require('ssAngular'); require('/controllers'); Then define your angular controllres in client/code/app/controllers.js You also have to make sure that you have angular.js in your client/code/lib If you clone this repo, there is an example. This is the real value of this library. It's implemented as a request responder, and it is similar to SocketStream's rpc library. Server Define a model in the server/model directory. Client
Functional Programming in Javascript This is an interactive learning course with exercises you fill out right in the browser. If you just want to browse the content click the button below: This is a series of interactive exercises for learning Microsoft's Reactive Extensions (Rx) Library for Javascript. So why is the title "Functional Programming in Javascript"? map filter concatAll reduce zip Here's my promise to you: if you learn these 5 functions your code will become shorter, more self-descriptive, and more durable. Finishing the Interactive Exercises This isn't just a tutorial, it's a series of interactive exercises that you can fill out right in your browser! Note: Use the "F4" key to toggle full screen mode for each editor. This tutorial is on GitHub, and is asymptotically approaching completion. Your answers will be saved in local storage. Working with Arrays The Array is Javascript's only collection type. This section will follow a pattern. Traversing an Array Exercise 1: Print all the names in an array Filtering Arrays
AngularJS: Send auth token with every request AngularJS is an awesome javascript framework. With it’s $resource service it is super fast and easy to connect your javascript client to a RESTful API. It comes with some good defaults to create a CRUD interface. However if you are using an API, which needs authentication via an auth token, you might run into issues: The resource factory creates a singleton. If you do not already have an auth token when the factory is called, or if the auth token changes afterwards, you cannot put the auth token as a default request parameter in the factory. This article shows, how to solve this. Build a RESTful resource Here is a simple example of how to create a resource in your client, fed by a RESTful backend on your localhost: We are creating a module which depends on ngResource, which provides the $resource service. Inside the factory we create a resource object by passing an URL and a port to the $resource constructor. Now have a look at the :id placeholder: It’s being replaced with @id.