/media-watch-list

An angular application for organizing and viewing video content.

Primary LanguageTypeScript

Angular Essential Training

This is the repository for my course Angular Essential Training
The full course is available at lynda.com and LinkedIn Learning.
Lynda.com subscribers: watch here
LinkedIn Learning subscribers: watch here

Course Description

JavaScript frameworks help you code more quickly, by providing special functionality for developing specific types of web projects. Angular was designed by Google to address challenges programmers face building single-page applications. This course introduces you to the essentials of this "superheroic" framework, including declarative templates, two-way data binding, and dependency injection. Justin Schwartzenberger steps through the framework one feature at a time, focusing on the new component-based architecture of Angular. After completing this training, you'll be able to tackle the other project-based courses in our library and create your own Angular app.

Topics include:

  • What is Angular?
  • Setting up an Angular template
  • Creating a component
  • Displaying data
  • Working with events
  • Using two-way data binding
  • Creating a subcomponent
  • Using the built-in HTTP module
  • Using the built-in router module

Instructions

  1. Make sure you have these installed
  1. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC)

    git clone https://github.com/LyndaExerciseFiles/angular2-essential-training.git

  2. CD to the folder

    cd angular2-essential-training

  3. Run the following to install the project dependencies:

    npm install

  4. Run the npm start command to build the code, watch for file changes, and serve up the site locally:

    npm start

The repository has a branch for each video starting point. For example, the branch 02-01b is used as the starting code for the video 02-01 NgModule and the root module. You can checkout branches using git checkout -b <branchname> and not have to re-run npm install each time since you will remain in the same root folder.

Note that the site will run using lite-server and will be served up at the following local address:
http://localhost:3000

If you use a code editor that launches its own web server please note that it may run on a different port number. You will want to use npm start for this project.

FAQ

If you are getting a list of errors on npm install that look like Cannot find name 'Promise', check your package.json file and see if the following DevDependencies have a caret in front of the version number (the ^ symbol):

"devDependencies": {
  
  "@types/core-js": "0.9.34",
  "@types/node": "6.0.41"
  
}

If the caret is there (would look like "@types/core-js": "^0.9.34") then remove it (or copy the contents of the package.json file on the origin repository) and run npm install again.

More Stuff

Check out some of my other courses on lynda.com. You can also follow me on twitter, or read my blog.