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.
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
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
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.dev
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
Start Your App Locally
To build your local development environment use the
nanobox run command.
This will read your
boxfile.yml, create an isolated development environment, and drop you into a console within that environment.
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:
If you've exited outside of the console already, you can pass your app's start command with
nanobox run yarn start
Thats it! You're application should be running and you can visit it at angular.dev:3000 (or whatever alias you created above).
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!