Tag: 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) {
        $compile(elements.contents())($scope);
        $scope.$apply();
    };

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"));
        mController.scope().activateView(wrapperElement);
    }

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 -->
 </div>
</div>

<script>
activateAngularController('myControllerWrapper');
</script>

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.

Example:

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

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

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

{{arg.validationMessage}}

</div>

</ng-form>

</div>

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.

The use of C# will continue to fall, along with the eventual extinction of VB.NET

The use of C# will continue to fall, along with the eventual extinction of VB.NET

C# is a modern programming language that runs on the Microsoft.NET Framework. Just a few years ago being a C# developer allowed you to use your skills across multiple technologies that were in relatively high demand. You can use C# writing a desktop application using WinForms or WPF, or write the server side code for web site using ASP.NET or ASP.NET MVC. A developer could also write a rich internet application with Silverlight technology in C#. Things have changed in the last few years as many of these technologies are becoming irrelevant.

With Windows 8 coming onto the scene Microsoft has de-emphasized the desktop experience, wanting users to do most of their work with Windows 8 applications in the tile mode. Desktop based browsers are slimming down and halting support for some third party plugins. The combination of this shift has left WinForms, WPF and Silverlight out in the cold. What’s left for developers on the PC is Windows 8 apps, which can also be written in javascript or C++. Windows 8 apps are not a priority for most companies as Windows 8 still has a very small tablet market share.

Windows 8 Phone is another potential target for C# developers, but with market share in the low single digits there isn’t much demand for developers writing a Windows 8 Phone app. Windows Phone 8 now also supports native C++ apps, and I’m guessing they won’t want to be supporting Silverlight on the phone for future versions.

Server side C# for ASP.NET MVC web applications is still very popular as many companies are still running Windows based servers. This will slowly shift as more companies move their servers from on-premise to cloud hosted. Many new web sites are written in mostly javascript with the rise of rich client side frameworks like Angular and server side technology with node.js. Which leads me to my point about the extinction of VB.NET…

Nobody writes VB.NET on the server! If they do, they probably don’t belong in our society.

It will be interesting to see what Microsoft does with C# in the coming years. It’s already a very powerful and flexible language so they may well leave it alone for a while. On MSDN C++ has been getting a lot of love in their monthly tech how-to articles. It seems they are trying to steer developers to use C++ as their primary language choice.

A recent article on Dr. Dobbs has C# as a rising language, but I don’t think it can keep holding its own with the main uses being Xamarin and MVC server side code.

As a developer who is strong in .NET and relies on that technology for a career, it will be worth taking a look at where you think the market for developers is headed. I believe that if you are strong in javascript, Objective-C, Swift, C++ and Java your future looks brighter than only knowing C#. One of the challenges developers face is keeping up with technology and adapting. This is clearly a time for .NET developers to realize what they can do to still keep their skills competitive and in demand.

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 asp.net 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: tiger.surfdew.com
Site 2: woods.surdew.com

In your javascript you’ll need to set the document.domain to surfdew.com 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.