A Simple Angular.js Example App

This tutorial goes through the steps of creating a simple Angular.js application. I'll be using Angular 4 as the example since that's the current version.

Who is this for?

This article is meant for developers who:

  • Are just getting started with Node.js and Angular.js and want an example of how to create a simple application using Angular.js.

  • Are already familiar with Angular.js application development but don't like doing DevOps, and are interested in a better dev to production workflow.

The Tools

I'll be using Nanobox for the tutorial for a few reasons:

  • It's the easiest way to get started with application development.
  • It ensures that I won't have to worry about creating, configuring, and managing my applications infrastructure when it's ready for production. Which, for me, is a big deal.

Note: If you've never used Nanobox before, you'll first need to create a free account and download Nanobox Desktop. Also, Don't worry about whether or not you have Node.js or Angular.js installed. You won't need them!

Create a Simple Angular Application

Google has recently updated the installation process for Angular. It used to be very complicated, however they've created a really nice quickstart that you can either clone or download to get started.

Clone The Angular Quickstart

For this tutorial, I'll be cloning the quickstart, rather than downloading it, only because that's my preferred workflow when doing development.

# Clone the Angular quickstart
git clone https://github.com/angular/quickstart.git nanobox-angular

# cd into the project
cd nanobox-angular

Setup

Nanobox uses a simple config file, called a boxfile.yml to define your application's infrastructure. Nanobox uses it when creating any of your application's environments (development, staging, production, etc.)

At the root of your project, create a boxfile.yml with the following:

run.config:
  engine: nodejs

Note: All nanobox commands must be run from the root of your project.

Add a DNS Alias

To make your app easily accessible from a browser you can add a DNS alias using the nanobox dns command:

nanobox dns add local angular.local

Note: If you don't generate a DNS alias, you can still access your application using the IP address Nanobox generates for you. You can find this IP when using nanobox info local (listed as Env IP) or nanobox run.

Start Your App Locally

To build your local development environment use the nanobox run command.

nanobox run

This will read your boxfile.yml, create an isolated development environment, and drop you into a console within that environment.

The nodejs engine specified in your boxfile.yml will install Node.js and NPM/Yarm automatically. And since you're using the Angular quickstart, you don't need to worry about installing it, which is awesome.

Run Your App

Note: For this example, I'll be using yarn instead of npm because, among many things, it's faster. If you're not familiar with yarn you should check it out!

From inside of the Nanobox console, start the app by simply running:

yarn start

If you've exited outside of the console already, you can pass your app's start command with nanobox run:

nanobox run yarn start

Thats it! You're application should be running and you can visit it at angular.local:3000 (or whatever alias you created above).

Angular.js Default Landing Page

Where to Go from Here

I've provided a list below of everything you should need to get started, or how you can reach out to us if you need any help!

Posted in Node.js, Nanobox, Getting Started, JavaScript, Angular.js