Category: javascript

My Experience with Angular 2

My Experience with Angular 2

I’ve been working with Angular 2 since the early betas, and now into the release candidates. Working with a new platform (yes Angular 2 is a platform vs. a framework) during beta releases is a bit painful. Even working through the release candidates (1-4 so far) has been trying as well. You have to know what you’re signing up for, be patient, and willing to learn new things quickly.

To be the most productive when developing in Angular 2, you should be developing with Typescript. If you’ve done ES6 (ES2015) recently, then Typescript will feel right at home. The Typescript learning curve is pretty small, so don’t be intimidated by it. Trust me, it’s worth learning. It’s worth it because Angular 2 is written in Typescript and most of the examples you’ll see on the blogs and overflows are in Typescript.

So how does it stack up against Angular 1? For starters, it’s much simpler to learn. There are 50 some less built in directives in Angular 2. There are no factories, just services (which are now called providers). Directives and Controllers are now pretty much the same thing which are called components. Components have a selector attribute, which is the tag name the component represents (such as <registration>). Directives are there just for element attributes (<button sound-alert-on-click>) with sound-alert-on-click being the directive.

Routing is pretty straightforward, but the router is still in beta while the Angular 2 platform is currently in release candidate 4 (July 10th 2016). The new router isn’t hard to learn at all.

Forms and validation still seem to be in flux too. They were changed a little bit in release candidate 3, so hopefully they will stable now.

Binding and event handling is different, but not hard to pick up if you’ve done Angular 1.x development before. The main difference is that you can bind to any dom event and any standard html element attribute without using an Angular directive, like ngModel. So for example if you want to bind to the click event of a button, you do <button (click)=”submit()”>Submit</button>. submit() is simply a method in your class that represents your component.

Binding is isolated more in Angular 2 with use of Zones, made in party by zone.js. zone.js is what Angular 2 relies on for binding. Without zone.js in your project, binding won’t work.

What’s the hardest thing to learn in Angular 2? I would have to say Observables. Angular 2 uses the RxJS framework in place of promises. What the difference between observables and promises? I suggest watching this video from ng-conf. It’s the best explanation I’ve seen yet. You can get going without really knowing a lot about RxJS, but I suggest digging into it. I’ve already used for a global event provider that was extremely useful in my application.

One last learning curve you should be aware of is the CLI (command line interface) to build your Angular 2 project. ES5 should be not be used when building a Angular 2 application (even though the build process spits out ES5). So if you’re using ES6, you’ll be using babel. If you’re using Typescript, you’ll need to transpile that to ES5 as well. I’ve been using Webpack along with the Angular 2 Webpack starter. Webpack is a little overwhelming at first, but once you get what it’s doing you realize how powerful it is and how much you love it 😍.

You can also go with the Angular CLI project which is a lot simpler and straight forward, but not near as powerful as Webpack.

Nativescript recently added support for Angular 2. So you can now use Angular 2 to build native iOS and Android apps. I’ve also heard about a little hack that will allow Nativescript to build an app for Apple TV, so you can technically use Angular 2 to build Apple TV apps as well.

The Angular 2 ecosystem will only continue to evolve, which is why I said that Angular 2 is a platform earlier. The future is bright for Angular 2 and your future will be bright as well if you hop onboard.

Dynamic ng-controller with Angular

Dynamic ng-controller with Angular

If you’re dynamically pulling in views through frameworks like jQuery, or anything else that isn’t Angular, Angular won’t know you are referencing the controller on the page without re-compiling.  To let Angular know about your new HTML is pretty straight forward.  I have a method in my Main controller that I can access whenever I need to.

    $scope.activateView = function (elements) {

I then have a common function I setup to be able to access anywhere I need in the application.

    function activateAngularController(controllerWrapperId) {
        var wrapperElement = angular.element(document.getElementById(controllerWrapperId));
        var mController = angular.element(document.getElementById("body"));

My Main controller is defined in the body tag, hence it’s getting it from body to populate the mController variable.

<body ng-app="coolApp" ng-controller="MainController">

And finally when you’re instantiating your HTML dynamically, just have it wrapped in a div you can reference.

<div id="myControllerWrapper">
 <div ng-controller="MyController as my">
     <!-- Your html and angular stuff -->


And that should do it. Angular now knows about the new HTML and directives within your controller wrapper. Alright Peter man, ouu ouu!

Dynamic form validation with ng-form

Dynamic form validation with ng-form

Validation with ng-form isn’t difficult, once you get the hang of it. But figuring out some of the advanced features isn’t that trivial. One pretty common scenario a web application needs to do is dynamic form validation. Dynamic meaning the HTML isn’t pre-defined, but is dependent on a condition, which is one of the things that make Angular so great in the first place!

Let’s say you have a ng-repeat and you include a ng-form within that loop. The ng-form needs a unique name.


<div ng-repeat=”arg in inputArray”>

<ng-form name=”form{{arg.Name}}”>

<div ng-show=”form{{arg.Name}}.$valid == false”>





The name is unique within the inputArray object collection. The validationMessage property is defined on the arg object, and when the validation isn’t met, the message will display.

For example when you’re iterating through the inputArray you can place a ng-required on an input tag.

<input ng-required=”arg.required()” />

Have required as a function works great because you can put logic in the function to support conditional logic. If there’s not conditonial logic you can simply return true.

Angular form validation works really well once you understand how it works. Give it some time and you’ll really like working with it.

Solving the document domain

Solving the document domain

I recently ran across an issue where a web page in a separate web site was trying to communicate with a web page on another site, through javascript. It was trying to do a window.parent.parent.somefunction call and was failing with an access denied script error. The site is full of Iframes, with embedding classic asp. Fun stuff!

The last few browser updates have locked down on javascript cross-site communication. The solution is to set the document.domain to equal values. The key is to have both sites sit on the same sub domain. Example site names and how they need to be set in script:

Site 1:
Site 2:

In your javascript you’ll need to set the document.domain to on each page, in each site, that interacts with each other.

If your users are on IE, have them add your site to their trusted sites. There is also an IE setting to allow cross site scripting. Just setting this to enabled didn’t solve the problem with my scripts, so I’m not sure how effective it is.