News,Video,Wintellect Blogs

Introduction to Angular 2 Webinar

Wintellect

17 Feb , 2017   Video

introduction to angular 2

Jump start your Angular 2 development

Wintellect’s Eric Greene presented a live webinar this week an “Introduction to Angular 2” which included live coding demos. Angular 2 is the latest JavaScript UI framework for building cross-platform, single page applications. Utilizing TypeScript, the concepts of Web Components, Reactive programming with Observables, and advanced change detection powered by Zones – Angular 2 is the most cutting edge framework available today.

Eric covered the differences between Angular 1 and 2 as well as a live coding session for the essentials of building components, building templates, data binding and handling events.

We hope you find the recorded webinar session above useful. If you want to download the webinar source code you can find it in Github here and view the slides here.

Want to learn more?

If you are interested in learning more about our Angular On-Demand Online training, Instructor-led training, or Angular consulting for your business, please send us an email.Read more

, , , ,

News

AngularJS 2 Beta Announced

Paul Ballard

16 Dec , 2015  

Santa’s elves aren’t the only ones working hard this December, as the AngularJS team has announced the release of Angular 2 Beta.  This release marks point at which further changes should be minimal and significant applications for production can be built.

Through developer preview and alpha we’ve worked closely with several large projects here at Google including AdWords, GreenTea (Google’s internal CRM system), and Google Fiber. In fact, just a few weeks ago we saw Google Fiber launch on their new Angular 2 code base.  — AngularJS Blog Announcement

For those looking to upgrade, there are two paths that they are suggesting.  The first is “big-bang” or just rewriting your apps to use AngularJS 2.  The second approach is a hybrid model using a new ngUpgrade feature.

ngUpgrade lets you mix Angular 2 into your existing Angular 1 application. You’ll get to take advantage of Angular 2’s improved speed and APIs immediately as you replace components a bit at a time over the course of your releases. — AngularJS Blog

For more information, check out the official announcement, and you can learn more about using ngUpgrade in this blog post on thoughtRam.… Read more

,

News

TypeScript 1.5 Released with More ECMAScript 6 Features

Paul Ballard

23 Jul , 2015  

Microsoft has officially released the latest iteration of TypeScript, version 1.5 which includes more support for ES6 features such as modules, destructuring, computed properties, and tagged string templates.

Kangax

In the above table, you can see our progress on the Kangax ES6 support table.  This table, originally for JS engines, also shows coverage of the features transpilers and polyfills support for ES5 output.  With TypeScript 1.5, we doubled the number of passing tests and will continue to improve over the next few releases. — TypeScript Blog

In addition to the support of ES6 modules, the TypeScript team are working to make understanding how to work with modules easier by changing internal modules to “namespaces” and external modules remain “modules” while staying close to the ES6 module syntax.

This version of TypeScript is also looking forward to ES7 with support for the proposed Decorator syntax used in Angular 2.0, Ember, and Aurelia.  The Decorators feature is considered ‘experimental’ for now as the definition goes through the approval process, but many frameworks are already taking advantage of the syntax such as this snippet of AngularJS 2.


import {Component, View, NgFor, bootstrap} from "angular2/angular2";
import {loadFile} from "audioFile";
import {displayAudioFile} from "displayAudio";

@Component({selector: 'file-list'})
@View({template: `
<select id="fileSelect" size="5">
<option *ng-for="#item of items; #i = index"
[selected]="selected === item"(click)="updateSelection()">{{ item }}</option>
</select>`,
directives: [NgFor]
})

class MyDisplay {
items: string[];
constructor() {
this.items = ["item1", "item2"];
}

updateSelection() { … }
}

For more information read the TypeScript teams Blog post.… Read more

, , ,

Wintellect Blogs

Build an Angular 2 App: The Root Component

Josh Carroll

16 Jul , 2015  

Build an Angular 2 App: The Root Component

Angular 2 is in active development right now, but is still in an alpha state. In fact, at the time of writing this article, the alpha 31 release was just cut. There are a lot of things in flux, but the platform has enough meat on it that you can start playing with it, and see just what the next version of Angular has to offer.

And that is exactly what we are going to do; build a small application using Angular 2.

Getting Started

Note: I happen to be using ASP.Net 5, but the server portion of this example is largely irrelevant.

There are several different ways you can get started with the Angular 2 bits, but the easiest way is to simply use the bundles hosted on https://code.angularjs.org/.

That’s exactly what we are going to do.

In our main page, we need to include the following script tags at the bottom of the page in order to get up and running with Angular 2.

<!-- Traceur Runtime -->
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>

<!-- System.js -->
<script src="https://jspm.io/system.js"></script>

<!-- Angular 2 -->
<script src="https://code.angularjs.org/2.0.0-alpha.31/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.31/router.dev.js"></script>

ES6 Polyfills

You will notice that the first two things we import are the Traceur Runtime and System.js.… Read more

, ,

How To

Build Your First Hybrid Mobile App with Visual Studio 2013, AngularJS, Ionic, and Adobe PhoneGap

Paul Ballard

13 Apr , 2015  

This walk through will show you how to combine the features of Visual Studio 2013 with the Apache Cordova CTP 3.1, AngularJS, Ionic, and Adobe PhoneGap to create, build, and deploy a hybrid mobile app.

While Microsoft is hard at work putting the final touches on Visual Studio 2015 support for web based mobile apps, you can get started today if you know how to put the right pieces together.  This primer is intended to get you up and running building a hybrid mobile app using tools available today including Visual Studio 2013, Apache Cordova, AngularJS, the Ionic Framework, and Adobe Phone Build.

Prerequisites

To start this primer you should install the following software.

Step 1 – Create a New Apache Cordova App with Ionic and AngularJS preconfigured

While Visual Studio provides templates for creating a new basic Apache Cordova app, the functionality is fairly limited.  It doesn’t provide you with any of the standard web based frameworks for handling navigation, data binding, interaction, or other features of modern Javascript frameworks..  … Read more

, , , ,

Wintellect Blogs

What Javascript Framework should you be using?

Dave Baskin

5 Mar , 2015  

What Javascript Framework should you be using? This seems to be the question everybody is asking … and everybody seems to have a different answer. I’m here at ng-conf 2015. Is AngularJS the answer?

Angular has a particular opinion about how to build a Javascript application. But other popular alternatives exist. Ember.js prescribes a set of conventions that help build large-scale web applications. React and Flux provide composable view components that can be assembled together to build a solution. And it seems like a new Javascript framework is released every few minutes that touts some amazing new feature (which, of course, has led to Framework Fatigue).

At ng-conf, however, a thought occurred to me. We saw presentations that discussed topics like:

  • how the Angular team discusses plans for Angular 2.0 and the existing 1.x versions in public, open forums with lots of input from the community.
  • how the Angular team didn’t have the right tool to measure performance, so they built their own benchmark tool and showed actual numbers for performance improvements.
  • how the Angular team, having already built unit testing (Karma) and end-to-end (Protractor) testing tools, wanted to also include accessibility testing, to ensure all users of various abilities could use the web applications that Google and others are building.
Read more

,

Wintellect Blogs

ng-conf 2015 – Office Apps Hack-a-thon

Dave Baskin

5 Mar , 2015  

The night before ng-conf 2015 started, there were a number of lightning talks and hack-night activities. You might be surprised to see Microsoft as part of the mix. With the lure of several Xbox Ones to give away, there ended up being 11 teams competing for the prizes. Josh Carroll and I represented “Team Wintellect”.

Why was Microsoft here? If you’ve been keeping up, the “new” Microsoft has really done a lot to be more open and work with technology outside of Microsoft. Tonight, they were talking about building AngularJS application as add-ons to Office 365 applications. These are Javascript-based components that can inject new functionality into Excel, Outlook, and others. (There is more detailed information at the Office Dev Center web site).

Our task was to take one of Andrew Connell’s starter projects:

And create our own project that demonstrates some interesting add-on functionality to one of these office apps.

Oh … and there was only two hours to complete it!

Josh and I decided to take a D3.js visualization, specifically this Aster Plot, and have it take the data from an Excel spreadsheet rather than from a CSV file.… Read more

, ,

Editorial

Top 5 AngularJS Frustrations

Paul Ballard

26 Feb , 2015  

AngularJS may be the latest JavaScript framework darling of the web world, but like all technologies it comes with its share of frustrations.

AngularJS has exploded onto the web world with no small help from Google such that its hard to imagine doing a web based application without giving it at least a passing consideration.  My first impressions of AngularJS was that it made JavaScript client side development nearly appealing, particularly if you start with TypeScript.  But after spending some time and researching the issues that others have had, I can see that it’s not quite the “One Framework to Rule Them All” I was hoping for.  Here are the top 5 frustrations I have seen so far.

  • Client Side Rendering – Being the shiny new hammer in our web toolkit it’s tempting to want to whip out AngularJS and pound out a client based SPA for any web site.  But client based rendering isn’t the best design model for websites that primarily present static content.  This is particularly true if you want your content to be discoverable as most search engines have trouble indexing content displayed as a result of client side processing.  AngularJS is a good tool for highly interactive applications, particularly when presenting significant amounts of data for viewing or editing.  
Read more

, ,

Wintellect Blogs

AngularJS and Benefits to the Development Team

Dave Baskin

8 Aug , 2014  

A few days ago, I found myself in the position of talking with a team about the benefits we’ve seen using AngularJS in developing web applications. There are so many popular choices out there, React, Ember, KnockOut, Backbone, jQuery, etc., etc. These are all solutions that can help a team build very capable web applications. Is there something that makes Angular stand out from the crowd?

I think so, but before examining those benefits, I do want to emphasize that ultimately, a development team needs to deliver a product. The technology should serve the team. I think Angular does that well, but other solutions may be a better fit for your team, given experience, mindset, project history, or other factors.

Angular covers a good range of functionality for building robust web applications. Wintellect has used Angular successfully on very large enterprise projects, using hundreds of controllers, services, and directives. It worked well for us on a large, distributed team. We saw benefits such as:

  1. A project with a lot of Javascript can quickly become unwieldy, but once a team had good patterns in place, other team members were able to easily replicate these patterns as the application was built and expanded.
Read more

,

Wintellect Blogs

Dependency Injection Explained via JavaScript

Jeremy Likness

28 Jun , 2014  

When learning a new framework I often find it is useful to examine the source, use the framework, then go into a separate project and build the functionality from scratch to better understand the motivation behind the framework and what it may be saving me by using it. Angular is no exception. There are many tools in the AngularJS toolbox, from data-binding to compiling new HTML tags, but one of my favorites is the built-in dependency injection. You can browse Angular’s DI code here and read my blog posts about understanding Providers, Services, and Factories. A more advanced version is detailed in Interception using Decorator and Lazy Loading with AngularJS.

chimera3sm “Well, Dimitri, every search for a hero must begin with something every hero needs, a villain. So in a search for our hero, Bellerophon, we have created a more effective monster: Chimera.” – Dr. Nekhorvich, Mission Impossible II

I don’t believe I created a monster, but in my search to understand JavaScript dependency injection, I did create jsInject. This library acts as an dependency injection container for JavaScript components that depend on each other. It is based on constructor injection which inverts control of dependencies by passing them in through the constructor.… Read more

, , ,