<  Back to article list

Rapid prototyping with Angular2 - Part 1


This article series will show you, in a simple way, how to get started with Angular 2 as you prototype a project.
We will provide you with code samples but our main objective here is to demonstrate the structure and architecture of a flexible prototyping method using Angular 2.

Scaffolding an Application


In order to get started there are 2 things you are going to need:

Follow the links for the tools websites for information on setting up NodeJS and angular-cli on your system.

# Angular-cli

Why angular-cli? What is it? Angular-cli is a cli tool that will help you scaffold a new project and create the base structure of components you will need along the way.

There are 3 main things you can do:

  • Create a new project
  • Create a new component (component, module, controller, service, etc)
  • Run your project locally
Scaffolding a new project

we will be using angular-cli to create our base structure for the project. We will go through it later but for now we want to setup the base files and structure for our project, by using angular-cli we avoid having to set up all the different pieces manually.

Go to your favourite command line (bash, zsh) terminal, navigate to the folder where you want the project to reside and type in the following:

ng new <PROJECT NAME>  

In our case let's call it "looktest"

ng new looktest  

Your output should be something similar to:

installing ng  
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.  
Installing packages for tooling via npm.  
Installed packages for tooling via npm.  
Project 'looktest' successfully created.  

Now let's see what angular-cli did for us, go into the project folder, in my case i'll use:

cd ./looktest  

Ok, so let's have a look at what was created for us:

scaffolding resulting folder tree

So we have a bunch of things already pre-made for us, starting from the top a e2e folder to hold our tests (not included in this series of posts), a node_modules folder that will hold our external modules and dependencies, and a src folder, this is where we are going to spend most of our time.

Apart from the folders, we have a few extra files like a package.json, a sample README.md (that you should modify to fit your project) and some config files (for angular-cli, your editor, typescript, etc...) that you can use as a starting point and adjust to your needs as you go deeper into your own project.

Inside the src folder we have an app, assets and environments folder, we will see these in more detail later on. For now you can structure it this way, the files in the root of the src folder are related to how your app is loaded, bootstrapped and started. Your environment configuration goes into environments, and by the same logic all your assets will reside in the assets folder.

Let's run our app and see what we get, type the following in your terminal:

ng serve  

Your output should look similar to this:

** NG Live Development Server is running on http://localhost:4200 **
Hash: 352cd8f27d08ee1362ab  
Time: 5592ms  
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 153 kB {4} [initial] [rendered]  
chunk    {1} main.bundle.js, main.bundle.js.map (main) 4.04 kB {3} [initial] [rendered]  
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]  
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.69 MB [initial] [rendered]  
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]  
webpack: Compiled successfully.  

Now if you open your browser and navigate to http://localhost:4200 you should be seeing something like this:

Ok, so now you know how to create a new project in minutes from 0 to a base running app. Not very exciting yet but we managed to produce a base structure for our projects. Before we move on, and since we covered most of the basic usage of angular-cli, lets finish by explaining a last essential command you need to know:

ng generate <blueprint> <resource-name>  

or the short version:

ng g <blueprint> <resource-name>  

There are a few blueprints you can use while developing your project:

Blueprint | Usage
-- | -- Component | ng g component my-new-component
Directive | ng g directive my-new-directive
Pipe | ng g pipe my-new-pipe
Service | ng g service my-new-service
Class | ng g class my-new-class
Interface | ng g interface my-new-interface
Enum | ng g enum my-new-enum
Module | ng g module my-module

And that is it for this first part, we will be adapting this structure going forward using the generate command and other structures, stay tuned.

Miguel Pinto

Lookatitude CEO. Coder at heart. Aims to be the one who firstly opens the door for a great environment at the company, and who will ultimately drive people to share, learn and experiment.

Subscribe to Blook

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!