Installing Angular

npm install -g @angular/cli

This will install Angular and its controller program, Angular-CLI including all the dependencies therein:

{
"dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.2",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

Remember the long list of dependencies we installed to get up and running with TypeScript? This takes care of that for you.

Angular is NOT the same as AngularJS. Angular 2+ is NOT the same as Angular 1.x. Any AngularJS or Angular 1.x resources including the previous edition of our book are irrelevant to what we will cover in class.

Some resources

An Angular Site

We will start with a simple Angular site.

Some commands to try out
ng new my-site # You can use the default options for now
cd my-site
ls
ng --help
ng version
ng serve --open
  1. Create a site as above

  2. Explore the files a bit

  3. Notice that ng is the CLI app that controls Angular functionality

  4. You can see what it can do with ng --help

  5. You can see version information with ng version

  6. Run the serve command to see your website in a browser

    1. You can leave this window open in the background and update your code. It will recompile the site and refresh your browser on any file changes.

My current version
$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.0.2
Node: 10.6.0
OS: darwin x64
Angular: 7.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
@angular-devkit/architect         0.10.2
@angular-devkit/build-angular     0.10.2
@angular-devkit/build-optimizer   0.10.2
@angular-devkit/build-webpack     0.10.2
@angular-devkit/core              7.0.2
@angular-devkit/schematics        7.0.2
@angular/cli                      7.0.2
@ngtools/webpack                  7.0.2
@schematics/angular               7.0.2
@schematics/update                0.10.2
rxjs                              6.3.3
typescript                        3.1.3
webpack                           4.19.1

Create your first component!

  1. Run ng generate to see the kinds of things available to you to create.

  2. Run ng generate component my-great-component-name to generate a component named my-great-component-name.

  3. Edit one of the component HTML templates that exists (the root app component for starters)

  4. Add the tag identified in your component’s .ts file

  5. See the results!