Free Angular2 Training from Rangle.io

Posted Jun 3, 2016

Guest post by Rangle.io (an AngularAttack Partner)

Angular 2 online training from Rangle.io is now free!

Learn Angular 2 best practices this June 15th & 16th from the experts who developed Augury (formerly Batarangle), the official Angular 2 DevTool for navigating, inspecting and debugging your Angular applications.

You will learn project setup, build, styles, test driven development and other key concepts designed to get you up to speed, quickly, so you can use Angular 2 on new and existing applications.

The training is offered as two 4-hour sessions that can be attended remotely from anywhere in the world, and is now FREE for Angular Attack members! All registrants will also receive a downloadable recording to access after the training.

Register FREE now!

There are also custom training options available to individuals and teams. Since every application is different, Rangle will tailor instruction directly to the needs of your project. That way you’ll see immediate value and results. From looming deadlines to meeting specific goals, you can now leverage Rangle’s expertise with laser focus. For custom training and other inquiries, please email [email protected]

Also Remember to Watch Rangle’s 4-Part Angular 2 Video Series

Refer to Rangle’s video series so you can get started on using Angular 2 today.

The Decision Maker's Guide: Why You Should Move to Angular 2: http://rangle.io/resources/decision-makers-guide-why-you-should-move-angular-2-now/

Thinking in Angular 2: Key Angular 2 Concepts for JavaScript Developers: http://rangle.io/resources/thinking-in-angular-2/

Mastering Your Angular 2 Workflow with Batarangle (now Augury), TypeScript, Webpack, and other Key Tools: http://rangle.io/resources/master-your-angular2-workflow-with-batarangle-typescript-webpack-key-tools/

How to Start Using Angular 2 with Your Angular 1 Code Base: http://rangle.io/resources/how-to-start-using-angular-2-with-your-angular-1-code-base/


Rollbar - Automated Error Logging for Angular Apps

Posted May 13, 2016

Guest post by Mike Smith, Head of Growth at Rollbar, an Angular Attack service sponsor

We have all been there. Fixing errors and debugging can take up to half of your time, or more if you're working on that hard-to-repo edge case exception. It can be particularly tricky when you're in a hackathon situation and quickly assembling code into a MVP app. It's hard to know what errors your app will throw in production and what sort of experience or performance impact they might cause.

That's where Rollbar comes in. No need to be anxious about any unknown exceptions in your Angular Attack project. By including the ng-rollbar library in your Angular application, errors are automatically logged and reported before they become critical issues and ruin your day. With Rollbar, you can spend more time hackathon-ing, writing new code and building new features (the fun stuff) instead of fixing bugs (the not-so-fun stuff).

Getting Started

The first thing you'll want to do is sign up for a Rollbar account. When you signup, Angular Attack participants get 100,000 error events tracked for free. :) This should help you become familiar with Rollbar and see if it is right for your Angular application. Also, Angular Attack hackathon winners will receive 3 months of Rollbar free (a $300 value), per team member.

Once you're signed up, you'll create a new Rollbar Project.

project creation

Since we're using Angular, we'll select JavaScript for our language. On the next page, you'll receive a client-side access token which you'll need to save for later. Don't worry about the <script> tag provided. We'll be installing the ng-rollbar library instead to use Rollbar with Angular 1.x (ng-rollbar is not currently compatible with Angular 2).

Installing ng-rollbar

Installing ng-rollbar is easy.

Simply run:

bower install ng-rollbar --save

Then, include the library in your application with this script tag:

<script type="text/javascript" src="bower_components/ng-rollbar/ng-rollbar.min.js"></script>

Inject the library into your app.js file:

var app = angular.module('myApp', ['tandibar/ng-rollbar']);

Configuring ng-rollbar

The last thing you'll need to do is update your application's configuration:

app.config(function(RollbarProvider) {
  RollbarProvider.init({
    accessToken: "YOUR_ACCESS_TOKEN",
    captureUncaught: true,
    payload: {
      environment: 'YOUR_ENVIRONMENT'
    }
  });
}); 

You can test if everything was set up correctly by opening a console window and entering this:

window.onerror("TestRollbarError: testing window.onerror", window.location.href);

Once everything is installed correctly, you should see the TestRollbarError in your Rollbar Dashboard.

Rollbar Dashboard

Working with Rollbar

Now that you have Rollbar integrated into your Angular app, any errors that occur will be automatically captured and viewable from your Rollbar Dashboard and Error Items page. You'll be able to easily see what errors are occurring, how often they occur and the full context and analytics into your exceptions.

Rollbar provides a full stack trace of every exception allowing you to see exactly what's happening in your application when an error occurs. You can also view the user's browser and OS where the error occurred.

Errors are grouped by frequency so that you can prioritize which ones to work on first. You'll be able to view trends over time. If a certain error spikes in frequency, you'll know about it right away.

Rollbar also allows you to manually handle errors in your application and prioritize which errors are the most critical to your application's health.

Manually Handling Angular Errors with Rollbar

To manually handle errors, just inject Rollbar into the corresponding Angular component. This code looks something like this:

myApp.controller('MainCtrl', function($scope, Rollbar) {
  $scope.onSomeEvent = function() {
    Rollbar.error('this is an error with special handling');
  };
});

You can also flag errors by severity, so that you can make sure the most critical errors are known and handled first.

// Rollbar severities
Rollbar.critical("some critical error"); // most severe
Rollbar.error("some error");
Rollbar.warning("some warning");
Rollbar.info("some info");
Rollbar.debug("some debug message"); // least severe

Moving Forward

Now that you have Rollbar integrated into your Angular app, you can rest assured that you'll know about any bugs you accidentally write into your Angular Attack project. No worries, it happens.:)

We're excited to sponsor Angular Attack and can't wait to see all of the amazing projects that are built this weekend! For more information about ng-rollbar, view the docs. Happy hacking!


Sentry - Deploy Early; Deploy Often

Posted May 13, 2016

Guest post by Eric Feng at Sentry, an Angular Attack service sponsor

Having attended and judged many hackathons, I can confidently say winning a hackathon requires you focus on perfecting your demo. In Angular Attack, you don’t have the luxury of handwaving over errors with Sketch prototypes. Nothing is more important than making sure your app actually works.

For this, I have just one bit of advice: don’t wait until the last minute to deploy.

Deploy early; deploy often. At Sentry, we deploy as many as 20 times a day. Some integrations, like webhooks, only work well in production, and some errors are most easily found in production. Enlist friends and family who aren’t familiar with your “golden path” and can discover the potholes before the judges.

Of course, the worst part of responding to errors that users have emailed you is the back-and-forth while you pinpoint the problem.

Sentry not only helps you catch application errors—it helps you diagnose and resolve them. Our user feedback feature allows users to submit a description of what they were trying to do alongside the the crash report.

Sentry User Feedback

We even capture breadcrumbs, which are the trail of user events leading up to the error. These can be invaluable for reproducing and triaging what’s triggering the error.

Sentry Breadcrumbs

Best of all, installing Sentry takes only a few minutes. Signup for Sentry, create a project, and grab your data source name (DSN). If you’re using Angular 2, use the instructions below. If you’d prefer to use Angular 1, check out our Angular plugin docs.

Install

Load the Sentry client SDK, Raven.js: ​ html <script src="http://cdn.ravenjs.com/3.0.4/raven.js"></script> <script> Raven.config('<YOUR DSN>'); </script> Alternatively, Raven.js can also be installed via npm and loaded as a module: ​ npm install --save [email protected] javascript var Raven = require('raven-js'); Raven.config('<YOUR DSN>');

Configure

In your main.js / application bootstrap: ​ javascript (function(app) { document.addEventListener('DOMContentLoaded', function() { class RavenExceptionHandler { call(err) { Raven.captureException(err.originalException); } } ​ ng.platformBrowserDynamic.bootstrap( app.AppComponent, [ng.core.provide(ng.core.ExceptionHandler, {useClass: RavenExceptionHandler})]); }); })(window.app || (window.app = {}));

That’s it! Best of luck and if you have any questions, feel free to email us at [email protected]


Opbeat - Monitor the performance of your Angular apps

Posted May 13, 2016

Guest post by Vanja Cosic, Community Manager at Opbeat, an Angular Attack service sponsor

Performance monitoring is no longer just for backend apps. You can spend countless hours shaving off milliseconds from response times but if your frontend app has rendering bottlenecks, it will still feel slow to your customers.

Now you can get in-depth performance insights about your frontend app with Opbeat for AngularJS. It helps you pinpoint performance issues instantly and takes only minutes to set up.

Opbeat shows you an activity breakdown timeline of how your app renders, complete with AJAX calls, template rendering, and the digest cycle. This allows you to quickly spot where to start optimizing your code.

See how it works in the video below:

 

It's easy to get started by signing up for the free plan at Opbeat.com.

You can install Opbeat using npm

npm install opbeat-js

and include it in your project to start receiving insights about your application.

Read more in the documentation.


How to track Angular exceptions automatically

Posted May 11, 2016

Guest post by Freyja Spaven, from our service sponsor Raygun

As developers, time is usually of the essence, and even more so during competition hours. Focusing on building your application is what really matters, and hunting down exceptions manually can be a waste of precious time.

You certainly won’t want to spend all that time and effort coding a great app, only for your final end users (or the judges) encountering bugs, or for it to crash entirely.

We need to make sure that when it comes to deployment, our code is flawless.

Angular is extremely useful in its ability to identify exceptions, as it usually indicates why code could have errors. However, it’s often the case that our applications work perfectly on our own dev machines, only to produce a different story on our user’s browsers in production.

This is where an error monitoring and crash reporting software like Raygun can help.

Raygun makes finding and fixing exceptions easy by receiving every exception your Angular web app throws, so you don’t have to trawl through lines of code or build your ownsolution.

It can save precious time and resources during the entire production process, and we hope you will find it useful through the phases of the competition.

We have a free 30 day trial of crash reporting here.

It’s really quick to set up, too – follow the steps below to hook Raygun into your app.

Installation

First, download the tiny Raygun4JS provider script and add it to your project. There's three delivery channels:

Via Bower

bower install raygun4js

From NuGet - in Visual Studio, open up the Package Manager Console and type

Install-Package raygun4js

Manual download - grab the dev version here, or the minified production version here.

Configuration

Next, reference the script - if you're using static HTML add something like <script src="js/raygun.js" type="text/javascript"></script> or add it to your module loader/minifier.

Finally, call the following code before your main Angular logic to set up Raygun4JS:

Raygun.init('YOUR_API_KEY').attach();

You get an API key for each app you create in Raygun, which is available in your Raygun dashboard - there's a free 30-day trial available for you to test it out.

Catching exceptions in Angular

There are at least two options for injecting an unhandled exception function into Angular modules, with a decorator or a factory. Both of these provide your specified implementation of $exceptionHandler, which we will use to send to Raygun via the Raygun4JS provider we referenced above.

Using a decorator

The Decorator pattern is great for injecting behaviour onto arbitrary services ensuring separation of concerns among other desirable properties, and is the preferred way for logging and exception handling as it doesn't override the original behaviour. In Angular this is available on the $provide service, which we will use to implement our own $exceptionHandler function:

app.config(function ($provide) {
    $provide.decorator("$exceptionHandler", ['$delegate', function($delegate) {
      return function (exception, cause) {
       Raygun.send(exception);
       $delegate(exception, cause); 
      }
    }])
  });

The $delegate is the instance of the exception handler, which we call to get the original behavior of outputting to the console.

You can also make as many other services available as required:

$provide.decorator("$exceptionHandler", ['$delegate', '$log', function($delegate, $log) { r
 eturn function (exception, cause) { 
  $log.debug('Sending to Raygun'); 
  Raygun.send(exception); 
  $delegate(exception, cause); 
  } 
}])

Depending on what sort of error gets thrown within Angular logic, the cause parameter can be populated. If one occurs within a factory or service you may get the scope available on that parameter, which you can transmit to Raygun as custom data, along with anything else you need, by replacing the Raygun.send call above:

Raygun.send(exception, { cause: cause });

Using a factory

A quick way for getting Raygun into your app's exception handler is to override it using a factory, although this removes the original console logging and you'll need to store the original value then call it again, if you want this functionality.

app.factory('$exceptionHandler', function () { 
 return function (exception) { 
  Raygun.send(exception); 
  }
});

Manually sending errors

Raygun4JS also gives you the ability to manually track errors easily at any time, like this:

Raygun.send(new Error('my custom error'));

There's also a bunch of other useful tools available on the provider, including unique user tracking, version tracking, tags and more - check out the documentation here for all the details.

Raygun even tracks jQuery Ajax errors in your Angular app without any extra effort needed from you, so you get full coverage out-of-the-box.

Sign up for a free trial here (there’s even some free developer swag)

NOTE: We are currently working on support for the new Angular 2 framework


Introducing the Angular 2 Starter Project by Wijmo

Posted May 5, 2016

Guest post by Chris Bannon, Project Manager at Wijmo, an Angular Attack Partner

Wijmo has been providing comprehensive support of the Angular framework since day one. And now we’ve extended it to the latest version of the framework - Angular 2. The goal of our components, and this Starter Project, is to save time during development.

We hope this Starter Project will help you jump start your application for the Angular Attack contest.

This Starter Project is a true Angular 2 application. It includes all of the basics of an Angular 2 app. It also uses Wijmo components for Angular 2, which are designed to represent Wijmo controls in Angular 2 application markup.

Included in the project:

  • Material Design theme (layout and style)
  • Multiple pages (Components)
  • Navigation menu
  • Wijmo components: FlexGrid, FlexChart, BulletGraph, Input
  • Data Service with mock data

Visit wijmo.com to access Wijmo 5 documentation.

Download to Get Started

Download the source code for the Starter Project to jump start your application.

Try it! Test out the Starter Project online.

Application Views

The Starter Project includes the following pages. These are included in the src/components folder. They are linked to from the src/app.html document. And they are routed from the src/App.ts class. You can copy these pages to create your own or modify them to your liking.

Intro Page

The introduction page includes some simple markup and explanation of the app itself. Files: src/components/introCmp.html, src/components/IntroCmp.ts

Grid Page

The grid page includes the Wijmo FlexGrid, with columns defined in markup and two custom cell templates.

Files: src/components/gridCmp.html, src/components/GridCmp.ts

Dashboard Page

The dashboard page includes the Wijmo FlexChart and BulletGraph that display fictitious sales data.

Files: src/components/dashboardCmp.html, src/components/DashboardCmp.ts

Form Page

The form page includes a variety of Material Design Lite elements as well as Wijmo Input controls and a Radial Gauge. This page gives you an idea of the different UI controls available to build a form.

Files: src/components/formCmp.html, src/components/FormCmp.ts

Running the App

We use Visual Studio in our team, so you’ll notice that the Starter Project contains VS solution and project files. However, you do not need Visual Studio to run the Starter Project.

Use without Visual Studio

  • Install NodeJS https://nodejs.org/, if not installed yet, which is bundled with NPM package manager.
  • Run NodeJS command prompt.
  • Execute the following commands through command prompt:
    • cd "" (where is the one where the package.json file is located.)
    • npm install (which installs angular2 and related modules in the sample's node_modules folder)
  • After completing the above steps, execute the following command in order to run the sample:
    • npm start (which will run the lite-server web server and will open the sample in the default browser)
  • This command also runs the TypeScript compiler in watch mode that allows you to modify the .ts files and get their compiled .js versions automatically.

Visual Studio 2015 Users

  • Make sure that you have installed Visual Studio 2015 Update 1 or above.
  • Simply open the VS solution and run the project.

Visual Studio 2013 Users

Start Building

Download the source code for the Starter Project to save time while developing your application for the Angular Attack competition.

And the Wijmo team wishes good luck to everyone competing in Angular Attack!


The Case for Component Libraries

Posted Apr 27, 2016

Guest post by Chris Bannon, Product Manager at Wijmo (an AngularAttack Partner)

Build vs. Buy

As a web developer, I want to be able to efficiently build applications. In order to do so, I need to have a well-structured application. In other words: a framework.

I have two options when beginning development:

  1. Write everything from scratch
  2. Choose an existing framework to build upon

I choose #2 almost every time. And in the rare occasion I choose #1, I end up with something that looks similar to a framework.

When you decide to not pick a public framework, you will end up with a framework anyway: your own. - Ryan Florence

Judging by the popularity of today’s JavaScript frameworks, it’s safe to say that picking a framework is a very common choice. We won’t get into the debate of which framework to choose. You can research those and come to your own conclusion. I often choose AngularJS, so let’s assume we made that choice.

Why did I choose to use AngularJS?

There’s one fundamental reason I choose a framework AngularJS: to save time.

I know from experience how long it takes to build everything from scratch, not to mention maintain it. I choose AngularJS, because I want to focus on developing my application immediately. Using a framework gives me the building blocks to start with instead of having to create them myself.

There are many other reasons to choose a framework, such as testability, maintenance, upgrading, and the fact that frameworks usually have a large number of very talented developers working on them. But really, the final benefit of all of those in the end is saving me time.

Remember, saving time is saving money.

How else can I save time?

Developing the user interface of an application can be very time consuming, even if I’m using a framework, and it’s become even more challenging with higher expectations from end users and the need to support so many browsers and devices.

Now I’m faced with the same question of “build vs buy”: only instead of a framework, now I’m considering UI components.

Again, I often choose to adopt an existing component set instead of making my own. I choose to use third party component sets for the same reason I choose to use a framework: to save time.

By choosing a UI component set, I can focus on building application screens immediately. If I were to build my own components, I’d need to invest time to create them before my application development could begin.

Here are additional reasons to use component sets:

  • Often already support many browsers and devices
  • Contain common features needed in most applications
  • Match modern style trends
  • Customizable to my needs
  • Get bug fixes as issues are found
  • Benefit from a large community of developers using the same components

Choose a basic component set

First, I choose a basic component set, sometimes referred to as a CSS framework. Many options are available, such as Bootstrap, Material Design Lite, etc.

For this example, let’s say I choose Material Design Lite.

A basic component set gives me the fundamental UI elements I need to begin development, such as:

  • Layout (including responsive design)
  • Styling HTML elements (headings, links, lists)
  • Simple UI components (button, dropdowns)
  • Navigation components (menu, tabs)
  • Form components (input, selects, checkbox, radio)

These basic components will save a tremendous amount of time in the short and long term.

Choose other UI components as needed

While a basic component set covers 90% of what we need, the last 10% can be the most difficult. These more complicated UIs should be considered as needed.

One example of a complicated UI component is a data grid. Grids are used in nearly every application, each requiring different scenarios (behaviors). For something like a data grid, using a third-party component is often a no-brainer. The amount of time it takes to research, develop, test and maintain a data grid is astronomical, especially if it’s done well.

When choosing a grid, I research all of my options including open source and commercial components.

Commercial components are sometimes overlooked because of cost, but I see a large number of companies choose them every day. Here are some reasons they choose commercial components:

  • Developed and maintained by a company with history
  • Customer support provided
  • Feature requests taken
  • Bugs fixed in a timely manner
  • Released on a schedule

An example of a commercial components is the Wijmo FlexGrid, a performance-focused grid with a small core and different features as optional extensions. It’s very flexible (hence the name) and can be customized to do almost anything. It also has built-in AngularJS support, so integrating it into a framework is already done. FlexGrid is a commercial product, but the cost of the license is more than justifiable in time saved.

If you’re interested in using the FlexGrid in Angular 2, you can learn more at http://wijmo.com/angular2/.

Save time, save money, start building

We choose frameworks to save us time, so why not choose UI components to save even more time? We have to choose how we want to spend our time. I prefer to leverage a framework and a UI component set so that I can begin building applications immediately. I hope you’ll try things like Material Design Lite and Wijmo to do the same!

Coming soon… Starter Template

We want to make it easier for you to get started in the Angular Attack competition. We’re putting together a Starter Template that includes a working Angular 2 app with Material Design Lite and Wijmo. Hopefully it’ll save you precious time during the competition. Keep an eye on the blog here to find out more.


Attention Poland Devs!

Posted Apr 12, 2016

Attention Poland!

Looking for some developers to code with? Need a place to sit together and compete?

Selleo is providing office space for any developer competing in Angular Attack!

They are also running a free one day workshop and will provide assistance in the team forming phase.

12 April at 11:00 a.m. - Short presentation about Angular learning opportunities.

23 April 9:00 a.m. - 17:00 - Angular 2 Workshop

Workshop Agenda

  1. Getting started with Angular2
  2. Components
  3. Routing
  4. Forms
  5. Working with API

Participants will get free drinks (coffee, tea, water) and pizza for lunch.

14-15 May - Starting at 8:00 a.m. - Angular Attack

Participants will get free drinks (coffee, tea, water, energy drinks) and pizza for lunch (day 1 and 2). There is also access to the kitchen with two microwave ovens.

All the events will be hosted at Selleo premises (Bielsko-Biała, ul. 1 Maja 17.).

If you want to join some of these events or need more details please contact Dariusz Wylon at [email protected]


Helpful Angular 2 Information

Posted Mar 29, 2016

As promised, we’ve put together a list of informative webinars and resources to help you learn more about Angular 2. We’d prefer it if the applications that are submitted are using Angular 2, and we’ll even have some extra prize incentives!

Rangle.io, the JavaScript design and development firm that built the Angular 2 Dev Tool for Chrome with the Angular core team, have offered a few different learning options to help get you up to speed.

New Webinar: Introduction to Angular 2 Components

Sign up here for this free online webinar happening April 25th.

An In-depth Angular 2 Video Series:

  1. The Decision Maker’s Guide: Why You Should Move to Angular 2
  2. Thinking in Angular 2: Key Angular 2 Concepts for JavaScript Developers
  3. Mastering Your Angular 2 Workflow with Batarangle, TypeScript, Webpack, and other Key Tools
  4. How to Start Using Angular 2 with Your Angular 1 Code Base

Intensive Angular 2 Online Course

Looking for something more involved? Learn Angular 2 best practices during a 2 - half day course online. You will learn project setup, build, styles, test driven development and other key concepts designed to get you up to speed, quickly, so you can use Angular 2 on your projects and during the competition.

Rangle is offering a 25% discount on the regular rate with promotional code: “AngularAttack”. You can learn more about the course and take advantage of your discount here.

There are some additional training materials here along with a starter project on GitHub.

Still want more? You can view other Angular Resources, including blog posts and tutorials.