New to Angular? How to bootstrap your first app in 2 minutes

Zoe Koulouris Augustinos
Upstate Interactive
2 min readMay 30, 2017

In my last post I gave a quick overview of the new version of Angular and why we’re investing in it at Upstate Interactive. If you’re interested in trying it out, my video below outlines how the new Command Line Interface (CLI) automates a lot of the configuration and setup process, making it quick and easy to get a project up and running.

Step1: Install Angular CLI

Step 2: Create a new project

Step 3: Start the application

Step 4: Open and edit!

In four commands, you have a development environment and starter project. This takes care of manual work like creating the JSON file, installing dependencies, installing a testing system, setting up the main component and module with boilerplate code and setting up a server to run the application. It also ensures that the code follows the recommended directory structure and style guide.

I recommend reading Angular documentation and tutorials to learn about the directory structure and what the boilerplate code is doing, but the CLI helps reduce errors and increase efficiency on reusable code over time.

You can see in the video, the new project will create a large directory structure for you but the majority of the app will live in src/app.

app/

  • app.component.css
  • app.component. html
  • app.component.ts
  • app.module.ts

As you start building your Angular application, you’ll need to create new components, directives, routes, pipes and services.

Follow my next post, to learn more about the file structure and to edit more of our hello-world application.

☞ If you enjoyed this please consider clicking or tapping the “︎❤”

--

--

Zoe Koulouris Augustinos
Upstate Interactive

Entrepreneur / Software Developer / Health enthusiast — Cofounder, Upstate Interactive & Women in Coding