Kick Starter:

Rapid Application Development using Angular CLI

Sean Olson seanolson-io

Get the code samples, slides and resources from this presentation:

http://bit.ly/2FB7oP8

What do we want to accomplish here?

Demonstrate essential techniques and design patterns for app development using Angular CLI
Introduce you to this self-teaching resource: http://bit.ly/2FB7oP8. It provides code samples, step-by-step instructions, and other resources to build this cool little app: 4208.

Working with the ArcGIS API for JavaScript

The esri-loader, briefly

A tiny library to help load ArcGIS API for JavaScript modules in non-Dojo applications

https://github.com/Esri/esri-loader

About the Angular CLI, briefly

It makes it easy to create an application that already works, right out of the box.
It generates components, routes, services and pipes with a simple command.
It eliminates the time consuming task of creating a custom build script.
It provides a standard application architecture that supports team development.
It facilitates rapid development with generator commands for components, services, directives and more.

Installing the Angular CLI

requires Node.js and npm
install Angular CLI through npm

$ npm install -g @angular/cli

A few basic CLI commands

$ ng new < application-name > [options]

$ ng generate < type > [options]

$ ng serve [options]

$ ng build [options]

for more complete list of CLI commands checkout the Angular CLI Wiki

Generating a new app

# from your terminal, run

$ ng new < application-name > [options]

It's that easy.

Serving an Angular app

# navigate to the root directory of your app, and run

$ ng serve[options]

# Open a browser and navigate to localhost:4200

Exploring the application structure

Too much to show in a slide.

Let's checkout the project app 0-app-scaffolding.

So, let's get started with our app.

Step one: create a component

Local Instance Running on port 4201

Create a component using Angular CLI

# Syntax: ng generate <item> <name> [options]

$ ng generate component key-manager

# Abbreviated syntax: ng g c <name> [options]

$ ng g c key-manager

See it work

Two-way property binding:

Let's walk the code that demonstrates the two-way property-binding pattern.

Building with a little style

Here is our task list for step two:

Create a header component
Create a component that will maintain a list of our favorite foods
Leverage built-in Angular directives
Add some global styles

Here's what we're going to build 4203

Working from the terminal:

$ ng generate component header

$ ng g c cuisine-type-list

$ npm install bootstrap --save

$ npm install font-awesome --save

Let's checkout the code.

Make the UI more dynamic.

Here's the behavior we we're looking for: 4204

Review the completed code.

Save the data!

We have a problem with our cuisine-type list that we need to resolve.

Working from the terminal:

$ ng generate service cuisine-type --flat true

Review the the code.

Use routing to manage multiple views

We need to create console that will support both search and map visualizations, but first will add routing, another service and a few more components. Here is what we're trying to accomplish 4206.

Working from the terminal:

$ ng g c console

$ ng g c search-panel

$ ng g c map-panel

$ ng g s yelp --flat true

Let's see the code.

Time to add search functionality

We need components for our search and to build out the Yelp service to manage our API requests.

This is the functionality we want to create: 4207.

Using the Yelp Proxy

At the time this app was developed the Yelp Fusion API did not support CORS, preventing calls from client-side apps. To enable API access, a simple Yelp proxy is included in this repository.

Navigate into the yelp_proxy directory at the root of this repository.
From a terminal, run npm install
From a terminal, run npm start
Test by opening a browser to localhost:3000

Working from the terminal:

$ ng g c search-control

$ ng g c search-results

Leveraging RxJS Observables

Establishing communication between services and components is trivial matter with RxJS Observables

Let's see how we manage code state.

Bring in the Map

Alright, we have a functioning app. Now let's add a useful visualization, so we can figure out how to get to the restaurant. To bring the ArcGIS API for JavaScript into Angular, we need the esri-loader.

Working from the terminal:

$ npm install --save esri-loader

$ npm install --save @types/arcgis-js-api

# after installation
# add "types": ["arcgis-js-api"] to tsconfig.app.json
# add "types": ["arcgis-js-api"] to tsconfig.spec.json

Import the esri-loader into a component

import { loadModules } from 'esri-loader';
    ...
loadModules([
    'esri/Map', 'esri/views/MapView', 'esri/Graphic'
    ])
    .then(([EsriMap, EsriMapView, Graphic]) => {
    // Work with your map
    ...
    });

Let's look at a sample implementation

Thank you

Sean Olson seanolson-io