Tag Archives: AngularJS

Introduction to WebpackBin BETA

Watch out Plunkr, WebpackBin is going to redefine code sharing in 2016

 

A video introduction to the BETA of WebpackBin, a next generation code sharing tool.

Top features include:

  1. Compiling with Webpack including loaders for ES6, Typescript and JSX
  2. Install npm packages
  3. Download your working app
  4. Boilerplates such as a working React app
  5. Live reload
  6. Real-time code sharing, editing, and passing control

Try it out at webpackbin.com

Watch the video on YouTube

Angular 2 Beta is Out

Angular 2 reaches beta, packing a lot of changes from the preview

 

Angular 2 is truly a different framework from Angular 1. Although there is ngUpgrade and ngForward to help transition, the syntax and API are vastly different.

Angular 2 introduces a DOM parser that process html attributes before hitting the DOM. That means the new star, brackets and parentheses are easier to handle under the covers. And Angular 2 makes directives camelCase instead of kebab-case. You may also notice that directive attributes don’t show up on the DOM. All that is parsed out before rendering.

ng-if is now *ngIf and ng-repeat=”item in items” is now *ngFor=”#item of items”. ng-eventname directives are gone in favor of (eventname) syntax.

Property-based directives such as ng-class, ng-style, and ng-disabled are gone in favor of bracket-notated binding: [class.classname], [style.property], [disabled].

ng-model becomes [ngModel] for one-way binding and [(ngModel)] for two-way binding.

The digest cycle is gone, replaced by an immutabile object style checking.

Typescript (or the ES6 subset of Typescript) is recommended, but Angular 2 comes with a webpack-style server and live reloader for development.

Read the announcement on the blog: angularjs.blogspot.com or checkout the updated angular.io website.

The Disadvantages of Single Page Applications

Frameworks like AngularJS take away much of the pain, but let’s not forget that client-side navigation has downsides

 

Adam Silver runs down the cons:

– Navigating back and forward take longer than a multipage app

– Hard to remember scroll position when navigating back and forward

– Hard to handle case where user wants to cancel navigation

– SEO solutions are not straightforward

– Analytics take more work

– Automated testing is tricker in the asynchronous world of XHR

Read full article

Creating Reusable Angular Providers

Last night at the AngularJS meetup, I talked with AJ and Joe Eames about how to make a reusable providers. They didn’t know exactly but I finally figured it out so I thought I’d share.

See this plunker demo.

Basically, I wanted to make a provider similar to ngResource that could simplify data resolution. I wanted to make it reusable so I put it into its own module.

It had to be a provider so that I could inject it into my main app’s .config() function. Services and factories cannot be injected into .config(). The Angular docs haveĀ a helpful table to explain that.

I needed the provider available in .config() so I could define my routes there and use the provider for the resolve objects.

So my provider needs to rely on $http and $route. The problem is that those are not defined at the .config() phase of a module. So I couldn’t define any provider functions that rely on those.

That is where the concept of $get comes in with providers. $get is processed by $injector.invoke() which allows $get to be a function with a dependency. Usually you see an array like this:

this.$get = ['$http', '$route', function($http, $route) { ...
    return this; // or any other object
}];

So in .config() my provider can’t do anything with $http or $route, but it can queue up tasks that will be handled by $http and $route later. In my case when a route was fired.

So when I write a controller that relies on ApiProvider I access it as Api instead of ApiProvider. And the controller will receive the object returned by this.$get() so the provider is guaranteed to have those dependencies by then.

That was probably hard to follow but hopefully that helps someone.