Wintellect Blogs

Build an Angular 2 App – Data Binding Syntax

Josh Carroll

20 Jul , 2015  

In our previous article about building a simple application in Angular 2, we laid the foundation for moving forward and covered all the very basics about bootstrapping your application. However, it’s more or less a hello world application, and that, has been done already a number of ways.

The goal is to build a small real-ish application that you can use to gain ideas and inspiration from as you dive into Angular 2 yourself. However, we need to get some basics on the new data binding syntax out of the way.

Data Binding

Now, I cannot possibly do a better job explaining this than Victor Savkin already has in his article: Angular 2 Template Syntax, so I am not going to try. I highly encourage you to go take a look at that article to get an in-depth explanation of the new data binding and template syntax within Angular 2.

Instead, what I want to focus on is the 90% case, and the implications that has in terms of how you build your applications.

The Basics

Again, Victor’s article goes into a great amount of detail on this, but here is a condensed version of the basic data bindings you will be using everyday in your applications.… 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

, ,

Wintellect Blogs

Angular2 Databinding is Fast!

Josh Carroll

25 Jun , 2015  

I’ve been working with the Angular2 alpha ever since ng-conf 2015, and it has been pretty awesome to see how the framework is shaping up. I’ll be the first to admit that the bleeding edge tax is high, but it has been worth it to see just how powerful the next version of Angular is going to be.

The databinding system in Angular2 is so much better than the previous version that it is hard to talk about it in the abstract. I could go into a bunch of boring technical details, but I think seeing is believing.

The Setup

I wanted to see just how fast the new data binding system was, so I thought… why not animate a bunch of elements using nothing but databinding.

<table class="table table-striped table-condensed table-floating">
    <tbody>
        <tr *ng-for="#row of statusBoard">
            <td *ng-for="#col of row" [style.top]="col.top" [style.left]="col.left">&nbsp;</td>
        </tr>
    </tbody>
</table>

If you aren’t familiar with the syntax, don’t worry, basically I am using a nested repeater to create a bunch of rows and columns, and then data binding their position on the page.… Read more

, ,

Wintellect Blogs

Why Should You Attend Codestock?

Josh Carroll

7 Apr , 2015  

Codestock?

If you aren’t familiar with Codestock, then you should be, especially if you live anywhere in the southeast.

Codestock is a regional tech conference hosted in Knoxville, TN, and has been going on since 2007. It is consistently a great conference with incredible speakers and technical content at a very reasonable price.

Ok, so why should you attend?

Bigger And Better

In previous years, Codestock has been hosted at the UT Convention center, which only allowed for a maximum of 450 attendees. Last year, there were well over 100 people on the waiting list, so this year the conference is moving to a larger venue, The Knoxville Convention Center.

There is more than enough capacity for anyone who wants to come this year, and the Codestock organizers are expecting 800-900 attendees!

So if you want to come geek out with 800 of your fellow programmers, then you need to get a ticket.

Scott. Freaking. Hanselman.

This year, Scott Hanselman is going to be the keynote speaker. If you haven’t ever heard Scott speak before then you have missed a great chance to be educated and entertained at the same time.

Sure he works for “the man”, but if you haven’t noticed recently, Microsoft is cool again.… Read more

, ,

Wintellect Blogs

ng-whoa! Top 3 takeaways from ng-conf Day 1

Josh Carroll

6 Mar , 2015  

ng-whoa! ng-conf, Day 1

Yesterday was a pretty amazing lead up to the first official day of the conference. It certainly didn’t disappoint, what with all surprises the organizers put into place.

However, today everyone was pretty eager to hear the opening talk from Brad Green and Igor Minar about both the current state of Angular and more importantly the future of the framework that we have all come to know and love.

It’s no secret that after ng-europe a lot of people were totally freaking out had some concerns about what they were hearing with regards to Angular 2.0

The Angular team could have dismissed the criticism and pushed forward, but the message they put forward today shows they really do listen and care about what the community of developers think.

1.) Angular 1.X is not dead

The big news here was that the Angular team is in no way abandoning the 1.X branch to simply die on the vine. There are currently over 2000 internal applications at Google written in Angular, so they are keenly aware of the vested interest that many companies and developers have made into Angular, and they are firmly committed to providing a strong migration strategy from the 1.X branch to 2.0.… Read more

,

Wintellect Blogs

ng-init @ ng-conf 2015

Josh Carroll

4 Mar , 2015  

ng-conf: Day 0

It’s only the first day at ng-conf 2015 but I am already pretty pumped about the next few days.

There are of course going to be some cool things going on tonight even before the conference gets started. For instance there is a pretty interesting “Building Microsoft Office Apps with AngularJS Hackathon” going on as well as any number of other hacking events, and lightning talks.

Awesomeness

Last year’s conference was nothing short of amazing. The bar was set pretty high, but it is nice to see the ng-conf team taking it to new levels.

The ng-conf team is making sure everybody feels like geek royalty with the very nice swag bag they handed out, which is even better than last year.

ng-conf-2015-swag

And it’s nice to see the team having fun and including some (not so) subtle easter eggs for the attendees. For instance, I got my picture taken with a giraffe and a lobster.

ng-conf-2015-giraffe

I was also told by Aarron Frost that there may or may not be a prophetic narwhal at the conference.

To top off the pre-conference awesomeness there was a professional didgeridoo player literally rocking out that ancient instrument in a way that I didn’t even know was possible.… Read more

Wintellect Blogs

Why You Should Be Writing ECMA Script 6 Now

Josh Carroll

22 Jan , 2015  

JavaScript

If you are reading this article then you have probably at least heard of ECMA Script 6, the next version of JavaScript, and are curious about what it means for you or your organization. You might be wondering how ES6 is different, if it will affect your existing applications, or if it will affect your ability to write new ones that make heavy use of JavaScript.

Those are valid concerns, however, there is another reason to care about ES6 right now that simply isn’t on most people’s radar.

I’ll get to that.

How is ES6 different?

The jump from ECMA Script 3 to ECMA Script 5 brought with it some very nice features to JavaScript, but It wasn’t revolutionary. There was a deliberate effort not to introduce any new syntax into the language. It was a pretty natural progression from 3 to 5 if you were a developer.

ES6 is different because it introduces new syntax. A lot of new syntax in fact.

These changes are a very welcome, and very needed update to the language that will help to meet the demands of ever larger and more complex applications written in JavaScript. However… writing ECMA Script 6 will be fundamentally different than all previous versions before it.Read more

, ,