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.
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. Runtsc --versionin a new command-line window to verify it was installed. (You may need to do it in a new command-line window because of hownpmworks 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 runningng version.
This will get all of the necessary tools set up on your machine. Now, how do you want to work?
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 installin this directory beforeng serveorng test, or you may get strange errors. (npmis 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 JokeAppin an empty directory. (You will not need to do annpm 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 theng generatecommands.
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.
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.
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.
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.
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.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.