Angular+JUMP-START SESSION

Prepared by: M.Carbone

For use with Angular-cli version: 1.0.0-rc.2, March 2017

Angular+ is short for Angular 2 and beyond

Angular - The Init KitTo get started with Angular development the following marked in green must be installed :

1) Node js 7.x (Windows | Mac | other)Node js is the engine that runs the dev tools on your platform.Note: Node installs NPM which is the package manager that can install your code dependencies.https://nodejs.org/en/

2) Angular-cli via NPM - to install use from: terminal/bash:npm install -g @angular/cliNote: If you’ve installed the angular-cli before you will need to follow the uninstall process.https://github.com/angular/angular-cli#installation

Angular - The Init KitAfter the installation of the Angular-cli you can check the version by typing at the command prompt: ng --version. You should see return values based on your installation.

Angular - The Init KitThe Angular community as well as Google recommends Typescript (strong typed):

● Install Microsoft Visual Studio Code: (free for Mac and PC)*.Best for Angular front-end development - fast and smart. Microsoft is the developer of Typescript, MS hascreated plug-ins for JetBrains, Sublime Text and other editors.http://code.visualstudio.com/Download

● Webstorm and IntelliJ IDEA

https://www.jetbrains.com/webstorm/

*For this tutorial the free Microsoft Visual Studio Code will be used.

Angular - The Init KitInstallation continued:

Yarn is an improved package mgr (Facebook) - npm install --global yarnYarn improves upon what Npm offers with quicker more reliable installs. Yarn has a lock file that can be

distributed and used by another team member for consistent dependencies in your project.

Learn more about Yarn:https://code.facebook.com/posts/1840075619545360Yarn vs. Npm - YouTubehttps://www.youtube.com/watch?v=ToW1WJne53Q

Summary: you should have installed:1. Node js - follow Windows/Mac download process. - ( node -v should return v7.x )

2. Created a new directory (folder on Mac) on your desktop: “A+”3. Installed Angular-cli4. Angular-cli version check: ( ng --version returns: 1.0.0-rc.1 )

5. Installed Yarn version check: ( yarn --version returns: 0.16.x )

6. Installed Microsoft Visual Studio Code editor7. Optional* : git for Windows (Mac uses by default):

More info: https://git-for-windows.github.io/

*Installation of git for Windows may be required if your Windows command prompt does not support gitcommands.

Hello Angular World: Step-by-step document download1. Open the new “A+” directory in terminal/windows command prompt.2. In git bash / command prompt: type: git clone https://github.com/MatteoNY/aplusdemos.git3. After the git clone process completes it will install the aplusdemos directory with the following:

|-demoa|---docs - docs for this tutorial|---e2e - used by Angular-cli for end-2-end testing|---src - the source code for our project|-----app - we will be working in this folder, saving and viewing in the browser updates to .ts (TypeScript) files|-----assets - this is the location for images etc.|-----environments - used by Angular-cli for development vs. production settings

4. Navigate to the docs directory:Open the doc file: “a-plusSession1-tasks.txt” this contains the full instructions for the Jump-start session.Follow the steps (1-10), use copy and paste to complete the session.

Note: In the docs folder there is also a git bash tip text file for snippets, a placeholder for future usage.

Hello Angular World1. Open the new “A+” directory in terminal/windows command prompt.2. Use the Angular-cli to Generate Tutorial project: (use the PROJECT_NAME “demo”)

ng new PROJECT_NAMEcd PROJECT_NAME

3. ng serveOpen your favorite browser at:http://localhost:4200/

3. App works!

2. Angular-cli - scaffolds your app

Congratulations: Hello Angular WorldI hope you were able to view “App works!” in your browser.

The goal of this tutorial is to Jump-start your development tool kitusing the new Angular-cli for Angular 2 and above projects.

It is recommended that you build your own Angular 2 project following the step-by-step instructions you downloaded in the git clone doc directory earlier. Inside of the A+ directory you should see two subdirectories: “demo” and “aplusdemos”. 1. Demo is the project directory you generated with the angular-cli2. Demoa is the project directory (downloaded from the git clone as part of the aplusdemos repository).

If you run into any issues or want to verify all is working you can also navigate to the “demoa” directory and use the instructions on the slides that follow.

3. App works!

Summary: what we’ve learned!● How to use the Angular-cli to run angular2 projects● We’ve have only touched the surface of Angular 2, we’ve

passed the famous Hello Angular world’s “App works!”● We’ve used the Angular-cli to generate, an interface,

component, service and pipe as well as touched on .scss (css) and modulesamong other goodies that include TypeScript. Congrats again for all the hardwork!

3. App works!

Angular+ What’s next?● The next three slides cover the git clone you installed, “demoa” in the

“aplusdemos” directory and how to use the git checkout to optionally use.● The latter slides offer FYI insights on what the Angular-cli installed as well as

links to advanced learnings that you can consider using in the future

Thanks for using the Angular+ Jump-start tutorial. I hope you were able to use this tutorial and gained insights into your future Angular and beyond development projects.

Please send feedback to: m.carbone@nutravel.com. I look forward to hearing about your success. There is also room for improvement, comments and suggestions are always welcome.

A+Demos - git clone from github.com, instructionsIn the directory/folder on your desktop: “A+” part of initial installation step.You should have already downloaded the repository using the git command:git clone https://github.com/MatteoNY/aplusdemos.git

This will download the initial project. Navigate/cd to the “demoa” folder and type in yarn. This will install what is needed to get started. After install has completed you should be able to type-in “ng serve”

Open your browser and type-in: Localhost:4200 (bookmark as you will be using a lot).

A+Demos - git checkout (part2) from github.comWe will work inside of the “demoa” directory/folder for the rest of this session:

$ git status This will provide information about the current repository. $ git checkout demobThis will be our first task we will add a service and list.component to display data from a server.

Use ng serve to view the updated project in your browser.

$ is visible for bash for Windows users

A+Demos - git checkout (final) from github.comWe will work inside of the “demoa” directory/folder for the rest of this session:

$ git status This will provide information about the current repository. $ git checkout democThis will be our second task to add some .scss styles and html attributes and [class.selected] = values to highlight the selected item on our list view.

Use ng serve to view the updated project in your browser.

FYI: Angular-cli - what gets installed.Project Root

Important hidden files. Visible in Code editor or if visible: .angular-cli.json (used by angular-cli)..gitignore is used by git to ignore folders/files for example, the node_modules folder. We do not need to commit local development files to a repository.

SRC - we will work in this folder to start!

Open up Visual Studio Code editor following the step-by-step document downloaded ( git clone ) explained on an earlier slide.

FYI: Initial package.json Package.json:

● Used by Npm and Yarn for projectdependencies and dev support tools

● Use Yarn as your main tool for projects.NPM may be used initially and if Yarn hasany issues.

Note: As your project progresses, Angular or dependencies are updated you can change the version of dependencies in the package.json file, use Yarn to update your project. For example, update from Angular 2 to Angular 4 release candidates etc. Always keep backups using .zip for git repository if a rollback is needed.

Additional learnings and recommendations for Angular development● Install: Bash for Windows (may be required).● Important learning topics:

○ The Git repository - how to clone, push, pull etc. https://git-scm.com/book/en/v1/Getting-Started

○ Es2015+ (fat arrows => cool stuff)https://speakerdeck.com/jfairbank/scenic-city-summit-functional-programming-basics-in-es6

○ Rxjs - (observables) is used in Angular++ (>=2) for http, offers cancellation of requests vs the promise approach which is a guaranteed response. Rxjs supports promises with much more.Highly recommended (YouTube): https://www.youtube.com/watch?v=ei7FsoXKPl0&t=2313s,

○ Ng2-Bootstrap & Material-Design.https://valor-software.com/ng2-bootstrap/index-bs4.html#/

○ Scss - sassy css http://sass-lang.com/guide

Angular - Advanced topics● NgRx (Redux) - is a design pattern that started with Facebook’s Flux - it was kicked-up by (Dan Abramov

the originator of Redux*) used by Facebook React.js and then kick-up again by Google (Ngrx uses Rxjs)

● Learn more...Angular Ngrx (Google): https://www.youtube.com/watch?v=mhA7zZ23Odw&t=567sDan Abramov video on Egghead.io*: https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree?play=yes

Notes:*You may have to sign-up with your email to view Egghead.io free videos. 1. Dan’s videos will also give you insight into React as this is not Angular tutorial. 2. There is also a Redux version for Angular put out by Netflix and Rangle.io but I like the fact that Google wrote Ngrx and it uses Rxjs. 3. There are Redux development tools for both Chrome and Firefox browsers that support both Redux and Ngrx implementations.

Resources Angular● Angular.io

https://angular.io/● Angular-University (sign-up for a free getting started)

https://angular-university.io/● Ionic - Hybrid Mobile Apps:

https://ionicframework.com/● jsDocs - The latest version of Microsoft’s Visual Studio Code editor now supports /*

with Node version of jsDocs to generate code lib html (jsDocs still needs work but a good start). https://www.npmjs.com/package/jsdoc

● Es2015 gitbook - https://www.gitbook.com/book/drboolean/mostly-adequate-guide/details

Resources - Nice-to-havesHttp Node Servers that can be used to mock data or present data:

● Json-server: In your project folder where you have the package.json you would open the terminal/command and use: npm install -D json-serverhttps://scotch.io/tutorials/json-server-as-a-fake-rest-api-in-frontend-development

● Live-server - additional features for Ng build option where Angular-cli is not your host (global install).Npm install live-server -g

Note: you may need to run both json-server (data) and live-server (http ui presentation).

Community :-)● Share and ask questions.

● Angular.io events: https://angular.io/events.htmlLinks to Angular conferences with videos from talks.

● Angular Meetup NYC :-)https://www.meetup.com/AngularNYC/

Thanks again for taking the time to use this Jump-start tutorial.