Chris Mendez in Javascript, For Developers, Tools for Software Engineers, Angular

Anatomy of an Angular 2 App

Angular 2 is out and I'm currently working on a single web app hosted on Firebase. This will be a simple landing page website and

If you come from Ruby on Rails or Express JS, you're probably familiar with command-line generators. Thankfully, Angular 2 now has a set of commands to help you get started quickly.

What do these new commands provide?

  • It sets up boilerplate code including test files to accompany new components and models.
  • It can add entries to your routes.
  • It can automatically import any dependencies you might need while running a client command.
  • You get a development environment that auto compile files when they change.

Step 1 - Install Angular 2 Client

Let's first (globally) install the Angular 2 command line interface.

sudo npm install -g angular-cli  

Step 2 - Create an App

Create a new Angular 2 app.

ng new my-landing-page  

Change directory into your app.

cd my-landing-page  

Start App

Start your web server.

npm start  

Run Your Unit Tests

As a final check, run your unit tests to make sure everything is working.

npm test  

Command Line Generators

Similar to Ruby on Rails, Angular provides a suite of commands to help you build our your app.

Component

At a high level, there are two types of components: Smart Components and Reusable Components. There are many synonyms associate with each component so here's a cheat sheet.

Smart Components

They are generally application specific and are directly related to the app your making. Other names for those smart components include:

  • Application Specific Components
  • Controller Components

Reusable Components

These are components that are not directly connected to any specific application. For example, a login system where you enter your email and password might be a good example of something reusable.

  • Presentation Components
  • Pure Components
ng g component my-new-component  

Directives

Directives are the meat and potatoes of Angular. Directives add behaviour to an existing DOM element. They are super flexible to use and are three types of directives in Angular:

  • Components—directives with a template.
  • Structural directives—change the DOM layout by adding and removing DOM elements.
  • Attribute directives—change the appearance or behavior of an element, component, or another 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  

Anatomy of an Angular 2 app

Angular 2 App Structure

  • e2e/ is used for end-to-end testing.
  • src/app/ is for application.
  • src/app/index.html is used to run your application.
  • src/app/app.component.spec.ts are your tests.
  • src/app/assets are for assets.
  • src/app/environments are for environment configuration.
  • src/tsconfig.json is used to compile typescript.
  • karma.conf.js is used for running unit tests.
  • package.json is where you record the libraries you are using.
  • protractor.conf.js is for End-to-End testing.
  • tslint.json is used for checking your typescript.

Property Bindings

Sending messages from Components to the DOM.

[ Property Binding ]

Event Bindings

Sending messages from the DOM to Components.

( Event Binding )

Two-way Binding

From Components to DOM to DOM to Components.

[(ngModel)]

Troubleshooting

Port Already in Use

If you see this error, run the command below:

Port 4200 is already in use. Use '--port' to specify a different port.

sudo lsof -t -i tcp:4200 | xargs kill -9  

Resources