Angular

What is the Ionic Framework?

I had the good pleasure of presenting to a full room at the recent SoCal Code Camp on the Ionic Framework. Here are my slides from the talk.

ionic-slide

The Ionic Framework combines Google’s Angular with Apache’s Cordova to create fast and beautiful cross-platform mobile apps for iOS and Android (and Electron or Progressive Web Apps). Built atop the web technologies you know and love, this solution can help take your web skills beyond the browser.

AngularFire 2 Updates

As I warned in the book about “everything in beta” (a phrase my friend Leif Wells loves to quote), some recent updates to AngularFire 2 impact the To Do application in my book.The reason behind these changes is by breaking AngularFire into smaller modules, your app will load and run faster (always a good thing). For example, if you don’t need the user auth module in AngularFire, no need to load it.

There are just a few minor changes, so let get started…

First, make sure you have installed the latest versions of AngularFire2 and Firebase. Check your package.json and check the version numbers:

"angularfire2": "^4.0.0-rc.0",
"firebase": "^3.9.0"
If you are referencing an older version, update the version numbers and update your node modules.
Next, in the app.module.ts file you need to now import this additional module:
import { AngularFireDatabaseModule } from 'angularfire2/database';

and then include it within the imports array:

imports: [
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp),
  AngularFireModule.initializeApp(firebaseConfig),
  AngularFireDatabaseModule
]
The tasklist.ts file will also need two changes. The first is to change
import { AngularFire, FirebaseListObservable } from 'angularfire2';

to

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

The AngularFire variable will need to be typed to AngularFireDatabase.

constructor(public navCtrl: NavController, public af: AngularFireDatabase, public dialogs: Dialogs) {...}

Finally, our reference to the data is now just:

this.tasks = af.list('/tasks');

And with that, your Ionic2Do app will run with the latest AngularFire.

Mobile App Development with Ionic is Released!

My Ionic book has just been published by O’Reilly!

Mobile App Development with Ionic 2 Cross-Platform Apps with Ionic, Angular, and Cordova

Mobile App Development with Ionic 2 Cross-Platform Apps with Ionic, Angular, and Cordova

Learn how to build app store-ready hybrid apps with the Ionic 2/3, the framework built on top of Apache Cordova (formerly PhoneGap) and Angular. This practical guide shows you how to use Ionic’s tools and services to develop apps with HTML, CSS, and TypeScript, rather than rely on platform-specific solutions found in Android, iOS, and Windows Phone.

The book takes you step-by-step through Ionic’s powerful collection of UI component and then helps you use it to build three cross-platform mobile apps. Whether you’re new to this framework or have been working with Ionic 1, this book is ideal for beginning, intermediate, and advanced web developers.

  • Understand what a hybrid mobile app is, and what comprises a basic Ionic application
  • Learn how Ionic leverages Apache Cordova, Angular, and TypeScript to create native mobile applications
  • Create a Firebase-enabled to-do application that stores data across multiple clients
  • Build a tab-based National Park explorer app with Google Map integration
  • Develop a weather app with the Darksky weather API and Google’s GeoCode API
  • Debug and test your app to resolve issues that arise during development
  • Walk through steps for deploying your app to native app stores
  • Learn how Ionic can be used to create Progressive Web Apps

The digital version is available now, and the print edition will be out soon. Amazon, Barnes & Noble, or O’Reilly.

Hiking Guide: Joshua Tree released!

We have released our second paid app, Hiking Guide: Joshua Tree! It is available for both iOS and Android for $0.99. The app contains over 20 hikes in the Joshua Tree National Park. You can find a wide range of hikes; from easy to hard, from short to long, the perfect hike is a few taps away.

The app contains USGS topographic maps that outline each trail’s route, as well as providing descriptions of the trail and directions to the trail head.

We hope you enjoy the app and use it explore the many hikes in Joshua Tree National Park.

 

Hybrid Mobile Apps with Ionic 2

rc_cat
I am excited to announce the early access release of my new book, Hybrid Mobile Apps with Ionic 2! For anyone looking to learn about this powerful mobile framework, this book aims to get you up and running. Here is overview:

The book itself provides a solid overview of hybrid mobile development before diving in and walking you through building 3 different applications. In it, I also cover Angular 2, TypeScript and Apache Cordova.

The core of the book focuses on building three applications, each that showcase different aspects of the Ionic Framework; the Ionic CLI, their starter templates, its component library and more.

Now, this is an early release version of the book, meaning there might be an error or two. Plus, Ionic 2 is not quite done yet, so something might break. I will keep a careful eye on its progress and flag anything that might arise. In the meantime, I will be pushing forward on the rest of the book as its technical dependencies allow.

You can pick up your digital copy from O’Reilly’s website now! I hope you enjoy reading it.

Angular 2 CSS Validator

I am working on a new Angular 2 application and one of the inputs allows you to define a CSS color. This is an interesting input to validate.

Valid input includes the standard hex code value (#ff2112), but named colors (rebeccapurple) are also valid.

For the hex code, we can use a standard regular expression to validate directly in-line, but that won’t let us also validate against the CSS names.

RegEx for CSS colors:
/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i

To validate both the hex code and the name we need to use a custom validator.

The basic flow of a validator is to take the input, perform the test(s), and then return the validity.

Create a new file named cssColor.validator.ts and save it within a directory named validators. I like to keep all my custom validators in a validators directory.

We need to import the FormControl module from @angular/forms

import { FormControl } from '@angular/forms';

Next, we need to declare the export function that we can call to validate our input

export function validateCSSColor(c: FormControl) {

Into this function, we will pass in the reference to the form. Now it is a simple matter of performing the tests. We will define the COLOR_REGEXP, then see if the input matches:

let COLOR_REGEXP = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i;
if (COLOR_REGEXP.test(c.value)) {
  return null;
 }

If the input is valid, the validator should just return a null value. Since this is the more probably input type by the user, I opted to test it first.

Next, if the input does not match this regex, we can see if is one of the custom CSS names. The full list of these names can be found here.

let validColors: Array<string> = ["black", "silver", "gray", "white", ...

With our array defined (and properly typed), we test if the input:

if ( validColors.indexOf(c.value.toLowerCase() ) == -1) {
  return { validateCSSColor: { valid: false } };
 } else {
  return null;
 }

Here is where we handle the case where the input matches neither a valid hex code nor a valid CSS name. In this case, we need to return a custom object. This object has one property, which is the name of the validation function (in our case validateCSSColor), and its value also, an object: { valid: false }.

Now our standard Angular validation directives will function, just like the built-in validators. The full code of the validator can be seen here.

With the validator written, we can now reference it within our code. In your component’s .ts file, import the validator:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule } from'@angular/forms';
import { validateCSSColor } from'./validators/cssColor.validator';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})

export class AppComponent {
 pwaForm: FormGroup;
 themeColorCtrl: FormControl;
 title = 'Angular 2 Custom Validator Demo';

 constructor(private fb: FormBuilder) {
 this.themeColorCtrl = this.fb.control('', [Validators.required, validateCSSColor]);
 this.pwaForm = this.fb.group({
 themeColor: this.themeColorCtrl,
 });
 }
}

The key addition to this simple component is passing in our custom validator as part of the validator array when we declare the themeColorCtrl.

Let’s set up of HTML file for a simple input for the CSS color, and some feedback. Here is the snippet:

<input type="text" label="Theme Color" formControlName="themeColor" />
<div *ngIf="pwaForm.controls.themeColor.errors">Invalid CSS Color</div>

Now, we have linked our <input> to our component’s FormControl through the formControlName attribute. Then we can test if there is an error by querying ‘pwaForm.controls.themeColor.errors’ and display some feedback to the user.

For a complete example, see the GitHub repo.

Atom Autocomplete Packages

atom_logo

After a few fits and false starts, I have finally been able to port my various code hinting modules that I wrote for the Bracket editor to the Atom editor. I switch between these two editors and not having my code completion functionality for my various frameworks was frustrating.

Luckily, I found the autocomplete-html package that is now built into the Atom editor by default. What was an added bonus, the tag and attribute sources were actually from the Brackets repo! Thus meant once I understood the Atom packaging publishing flow, I should be able to port each of the Brackets extensions.

To install the package, go to Atom > Preferences > Install. Then enter the package name and press enter.

The available packages are:

autocomplete-ionic-framework
Ionic Framework element and attribute autocompletions

autocomplete-onsenui
OnsenUI Framework element and attribute autocompletions

autocomplete-jquery-mobile
jQuery Mobile Framework element and attribute autocompletions

autocomplete-zurb-apps
Zurb Foundation for Apps element and attribute autocompletions

autocomplete-angular-material
Angular Material element and attribute autocompletions

autocomplete-polymer-project

Polymer Project element and attribute autocompletions

Enjoy!