Raible Designs

The Angular Mini-Book 1.0 is now available!

I'm pleased to announce that the Angular Mini-Book has been released! You can download it in PDF and EPUB formats from InfoQ.

About this book

The Angular Mini-Book is a guide to getting started with Angular. You'll learn how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication. Spring Boot is a popular framework for building REST APIs. You'll learn how to integrate Angular with Spring Boot and use security best practices like HTTPS and a content security policy.

This initial edition (v1.0) uses Angular 12 and Spring Boot 2.5. I do plan on updating it for Angular 13 and Spring Boot 2.6. If you have any tips for upgrading, please let me know!

Purpose of the book

I think building web and mobile applications with Angular, Bootstrap, and Spring Boot is a great experience. I'd like to encourage more developers to try it.

Thanks!

I'm incredibly grateful to Trish, Abbie, and Jack. They put up with my late nights and extended screen time while I worked on this book.

Announcing Angular CRUD 2.0

Friends shouldn't let friends write CRUD apps. At least, not by hand. That's why I used a schematic called Angular CRUD in one of my last Angular + Spring Boot blog posts. That post is kinda old (January 2020), but the combination of Angular and Spring Boot remains popular. That's why I decided to turn the series into an Angular Mini-Book for InfoQ.

The book has five different sections:

• Build an Angular App
• Integrate Angular with Spring Boot
• Beautiful Angular Apps with Bootstrap
• Angular Deployment
• Angular and Docker

My goal with the book is to show you everything you need to get your Angular + Spring Boot app to production. But, what about JHipster?

Of course, you can just use JHipster, but I've found that a lot of beginners are intimidated by all the code it generates. That's why I wanted to create a bare-bones Angular guide that uses Spring Boot for its API.

I published the news on Twitter at the end of June.

As part of creating the book, I updated Manfred Styer's Angular CRUD project and released v2.0. The 2.0 release adds support for Bootstrap and Angular Material for CSS framework aficionados, like me.

Getting Started + Testing with Angular CLI and Angular 2 (RC5)

I started creating Angular 2 applications when it was in beta (back in March). To keep up with Angular 2's changes, I wrote a tutorial about developing with RC1 in June. Earlier this month, RC5 was released and many things changed once again. I think Scott Davis sums it up nicely in a tweet.

To keep up with the rapid pace of change in Angular 2, I decided to write another tutorial, this time using Angular CLI. The biggest change I found since writing the last tutorial is testing infrastructure changes. Since Angular's Testing documentation hasn't been updated recently, hopefully this tutorial will help.

Upcoming Events: Devoxx4Kids Denver, Testing Angular 2, DevoxxUS CFP and VJUG24

It's been awhile since I've posted anything on this here blog. That usually means one thing - I've been off having fun! That couldn't be more true this summer. The day after my last post, I began traveling and haven't stopped since. In fact, this weekend will be the first weekend I've been home since writing that post. Hawaii, Montana, Denver, Montana, Colorado Springs and Utah - it's been a fabulous summer. I'll write more about those adventures soon.

In the meantime, I wanted to mention some upcoming events you might be interested in:

• September 10: Devoxx4Kids Denver has an upcoming workshop on Exploring JavaScript with the world famous Dr. Venkat Subramaniam. If you know Venkat, you know this is a session you shouldn't miss. Your kids will love it, you'll get a lot of good laughs and everyone is sure to have a good time. Make sure and RSVP soon so you get in before this baby fills up!
• August 22: HTML5 Denver has a sessions on ES6 vs. Typescript and Testing Angular 2 Applications. The first session will be delivered by my good friend Geoffrey Filippi and I'll be performing the second act with the help of angular-cli.
• September 1: One of my favorite conferences, Devoxx, is coming to the US! DevoxxUS recently announced that registration is open. Even more interesting is that the CFP begins September 1st. I'm biased because I'm on the program committee, but I'd love to see your ideas for great talks!
• September 27: Our good friends from vJUG are hosting the first 24 hour Virtual Java Conference in the world! I'll be speaking about the Art of Angular in 2016 at 10pm EDT.
• September: I'm looking for new clients. My current contracts end on August 31 and I'm searching for the next cool team to work with. My expertise: Java, JavaScript and I'm really good at CSS. This is a hard combination to find! LMK if you have a need.

I hope to see you at one of these events!

Testing Angular 2.0 RC1 Applications

As mentioned on Friday, there's been quite a bit that's changed with Angular 2 between its Beta 9 and RC 1 releases. This article is an update to the Testing Angular 2 Applications I wrote in March. That tutorial was based on Angular 2.0 Beta 9. Rather than simply updating that tutorial and blog post for 2.0 RC1, I decided to create a new version for posterity's sake. The 2.0 Beta 9 version will remain on my blog and I've tagged the source on GitHub.

If you've already read the first version of Testing Angular 2 Applications, checkout the diff of the Asciidoctor version to see what's changed.

git clone https://github.com/mraible/angular2-tutorial.git
cd angular2-tutorial
git checkout testing-start
npm install

Getting Started with Angular 2.0 RC1

A few months ago, I wrote a tutorial on Getting Started with Angular 2. That tutorial was based on Angular 2.0.0 Beta 9. Rather than simply updating that tutorial and blog post for 2.0.0 RC1, I decided to create a new version for posterity's sake. The 2.0 Beta 9 version will remain on my blog and I've tagged the source on GitHub. This is an updated version of Getting Started with Angular 2, complete with the largely undocumented component router, and lazy-loaded components.

If you'd just like to see what's changed since the last release of this tutorial, you can view the pull request on GitHub. Note that I did sync my angular2-tutorial project with angular2-seed. This made it fairly easy to upgrade, believe it or not. My upgrade notes are in a gist. The best diff to read to see what changed is likely the diff of this tutorial.

git clone https://github.com/mgechev/angular2-seed.git angular2-tutorial
cd angular2-tutorial

Getting Started with Angular 2

Click here to see an updated version of this tutorial that's been upgraded for Angular 2.0 RC1.

I was hired by one of my current clients in November to help them develop a project management application with AngularJS. I'm proud to say we've built the application, it looks great, and it's scheduled to be released next month. The team had lots of experience with ExtJS, but was new to AngularJS. While using AngularJS worked, they're keen on moving to Angular 2 shortly after it's released.

To help them learn Angular 2, I decided to write a couple tutorials similar to the AngularJS tutorials I wrote last year. In this tutorial, I did my best to keep the functionality and features similar to Getting Started with AngularJS so you can compare the code between the two.

Create your project

Clone the angular2-seed repository using git:

git clone https://github.com/mgechev/angular2-seed.git angular2-tutorial
cd angular2-tutorial

How to Implement a Smart Chunking Bootstrap Carousel with AngularJS

I've been helping a client develop a project management application for the last several months. One of the features I implemented uses UI Bootstrap's carousel directive to display a list of project templates to choose from when creating a new project. Rather than displaying one at a time, we wanted to display as many as the user's screen would allow. That is, if they were on a large monitor, we wanted to display five templates, a medium size monitor would display three and so on. This is a story of how I implemented a smart chunking carousel.

2015 - A Year in Review

2015 was the year The Bus was supposed to be finished. If you read my year in review from last year, you'll see I was certain of it. To be fair, I did have estimates from people that had me expecting it to be done in July. The good news is the interior was finished in July. Since then, it's been back at Reincarnation getting the finishing touches applied. I believe if it was worked on for a week straight, it could be finished. It's that close. So close I can taste it. THIS will be the year!

For this Year in Review post, I'll same the format I've used the last few years.

• Professional
  • Speaking
  • Devoxx4Kids
  • Projects
• Personal
  • The Ski Bus
• 2016

Professional

I had four different clients in 2015. The first was in the healthcare industry, the second in the API hosting space, one in the fashion industry and one in computer software. For the first client, I wrote about integrating Node.js, Ruby and Spring with Okta's SAML support. I also helped them adopt and learn AngularJS. Learning about Foundation and Angular was a nice treat too.

In March, I revisited how to setup your own software company. In that post, I wrote about how I felt when valuing time over money.

Earlier this year, I had the opportunity to work 20 hours per week instead of 40. It was one of the greatest work-life experiences I've had to date. I was still able to pay all my bills, and I had time during each-and-every-day to do something fun. When working 40 hours per week, exercising and cooking dinner were somewhat of a chore. When I flipped to working less, work became the chore and exercise and cooking became the fun parts of my day. I read somewhere recently that if Americans valued health over wealth, we'd be a lot better off. I felt like I did this when working less and that I was rich in time.

Angular Summit 2015

I was in Boston this week, speaking and attending the very first Angular Summit. I had the privilege of delivering the opening keynote on Monday. I spoke about the Art of Angular and used a slide deck similar to last time. I did update the presentation to show the astronomical growth of AngularJS in terms of candidate skills (on LinkedIn) and job opportunities (on Dice.com)¹.

I mentioned the recently announced good news for Angular 2:

• We're enabling mixing of Angular 1 and Angular 2 in the same application.
• You can mix Angular 1 and Angular 2 components in the same view.
• Angular 1 and Angular 2 can inject services across frameworks.
• Data binding works across frameworks.

In related news, Craig Doremus recently posted a state-geo-angular project that shows how you can develop an Angular 1.x application that will be easy to upgrade to Angular 2.x. Thanks Craig!

After my keynote, I attended Pratik Patel's session on High Performance JavaScript Web Apps. Pratik pointed out mobitest.akamai.com for testing an app's performance and seeing its blocking resources. He also mentioned speedgun.io (currently unavailable) for capturing performance numbers as part of a continuous integration process. Finally, he recommended Addy Somani's JavaScript Memory Management Masterclass.

My second presentation was about JHipster. Near the end of the presentation, I mentioned that I hope to finish the JHipster Book this month. Writing presentations for SpringOne 2GX and the Angular Summit occupied a lot of my free time in September. Now that it's October, I'll be dedicating my free time to finishing the book. In fact, I think I can finish the rough draft this week!

For the last session of the day, I attended John Lindquist's session on Angular 2 Components. John showed us how everything is a component in Angular 2. He also said "now is the time to learn ES6" and built an Angular 2 ToDo App using ES6 and a bit of TypeScript. You might recognize John's name; he's the founder of egghead.io, an excellent site for learning Angular with bite-sized videos.

Tuesday morning started with a Angular 2.0 keynote from Peter Pavlovich. I really enjoyed this session and received lots of good tips about getting ready for Angular 2. The tweet below from Ksenia Dmitrieva shows his advice.

My biggest takeaway was to start following John Papa's Angular Style Guide ASAP.

The first session I attended on Tuesday was Judd Flamm's Google Material Design & Angular. I'm using Material Design for Bootstrap on a side project, so I was interested in learning more about its inspiration. We learned that Google Design has everything you need to know about why Material Design exists. We also learned about Angular Material and spent most of the session looking at its components. Judd recommended Angular Material-Start for those looking to get started quickly with both frameworks. Judd was a very entertaining speaker; I highly recommend you attend one of his talks if you get the opportunity.

After being dazzled by Peter's knowledge of Angular 2 in Tuesday's keynote, I attended two more of his talks: one on Meteor and another on Aurelia. I've known about Meteor for a while, but have become more intrigued by it lately with its 1.2 release and Angular support. Meteor's command line tools that auto-inject CSS and JS demoed very well, as did it's installable features like a LESS support and Facebook authentication.

After hearing all the good things about Angular 2 from Peter, it was interesting to hear him downplay it in his Aurelia talk later that day. When he started showing code, it was pretty obvious that Aurelia is doing a great job of simplifying JavaScript MVC syntax for developers. You can develop components with almost half the code that Angular 2 requires, and it uses ES6, jspm and SystemJS. If you're developing JavaScript, learning these tools will help prepare you for the future. It's cool that Aurelia encourages learning things you should learn anyway.

Aurelia and Angular 2 are both still in Alpha, so I'm not sure it makes sense to use them on a project this year. However, I do think it's important to track them both. I especially think it's interesting that the founder of Aurelia, Rob Eisenberg, left the Angular Team in November 2014 and announced Aurelia in January 2015 (Hacker News thread). Peter mentioned several times that Aurelia wants to help developers write apps, while AngularJS is more tied to helping Google write apps.

There were around 400 people at Angular Summit, which I think is pretty good for a first-run conference. As with most No Fluff Just Stuff shows, it ran smoothly, had plenty of time between sessions and was filled with knowledgeable, entertaining speakers. It was fun doing my first keynote and I look forward to speaking again in November (at Devoxx) and December (at The Rich Web Experience).

1. I know Dice.com is probably not a great site, but it makes sense to use it since I've been tracking JavaScript MVC framework job stats on it since February 2014.