Skip to content

tedneward/AngularLabs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 

Repository files navigation

AngularLabs

About

This is a series of steps towards doing the Hands-On-Labs for Angular training. Each lab step is in its own Git branch, so that each step can be done independently if desired.

Setup

If you are doing TypeScript and Angular for the first time, there are a few things you should have installed on your machine:

  • NodeJS: Download the "LTS" (Long-Term Support) version for your platform, or use your platform's favorite package manager to install Node. If you have Node already installed, verify you have a relatively recent version by running node -v; anything after 6.x should work fine.

  • Git: This lab assumes you have some familiarity with Git at the command-line, but not much is required. If you choose to use Git from a tool other than the command-line (such as from within SourceTree or VisualStudio), you will need to be able to check out branches.

  • Text editor: You will need a text editor with which you are somewhat comfortable; I like VSCode, but this is a topic of some discussion. The assumption is that during the labs, we will be running commands from the command-line, so if you use an editor with an integrated terminal, you may find it a more seamless/smooth experience.

  • A recent version of a modern browser: Usually this means Chrome latest, but recent versions of any modern browser should also work.

Two additional steps that can either be done ahead of time or during the labs include:

  • TypeScript: Once NodeJS is installed, you can install TypeScript to your machine by running npm install -g typescript. This will create a global command, tsc, the TypeScript compiler. Run tsc --version in a new command-line window to verify it was installed. (You may need to do it in a new command-line window because of how npm works on Windows.)

  • Angular-CLI: This is a command-line tool for Angular projects, and we will be using it extensively. Install it by running npm install -g @angular/cli. (The "@" is not a typo.) Verify it is installed by running ng version.

This will get all of the necessary tools set up on your machine. Now, how do you want to work?

Make your choice

There are two ways to do these labs:

  • Clone this project Working on our version of the project files has the advantage of keeping everything localized inside of one directory, but does run the risk that you may have to "git stash" your changes when you move back and forth between branches. Whether you want to work in this directory, or just run the code in this project, make sure to run npm install in this directory before ng serve or ng test, or you may get strange errors. (npm is the Node Package Manager, and it is used to pull down all the dependencies--including Angular itself--into the current directory so that the project can run.)

  • Create a new project If you choose to create a new project, do a ng new JokeApp in an empty directory. (You will not need to do an npm install, as that is done as part of generating a new project.) WARNING: If you copy files out of the AngularLabs project, you will need to make sure everything is registered in the AppModule class by hand; normally this is done for you when we run the ng generate commands.

Ready?

At this point, you are ready to begin the labs. If you are not sure if you got it all to work, you can always fast-forward to the next lab by doing a git checkout lab-1.

Boilerplate notice

Everything below this point is boilerplate generated by the AngularCLI tool, which has been left here simply as a convenient reference.

This project was generated with Angular CLI version 1.5.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

About

This is a series of instructions (and incremental solutions) intended as a hands-on-lab exercise to go along with Angular workshops held at various conferences. While there is no reason why somebody couldn't do the labs without attending the workshop, some of the lab instructions may not make sense except in that context. This code also comes wi…

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors