Skip to content

Setup, Startup

Jump to bottom
Magnus Gudmundsson edited this page Jun 28, 2016 · 29 revisions

###(stand up for your bytes)

These basic setup steps are also laid out here:
https://angular.io/docs/ts/latest/quickstart.html
If you feel that the information here is a bit terse, please check out the angular.io quickstart.

Node JS

Install nodejs -Latest and greatest. We will not be using Node itself, but we will be using its excellent package manager, npm.

https://nodejs.org/en/

If you want to you can try a small hello world before cloning the repository from github. If not, then jump directly to cloning the repo

Hello worldy

This is a light variation of https://angular.io/resources/live-examples/quickstart/ts/plnkr.html
If you want to try this one before diving into the project, go ahead, create a directory and save the following files in it. Copy the code from plunkers tsconfig.json and systemjs.config.js into your own files. You need to keep this directory structure:

systemjs.config.js
tsconfig.json
index.html   
app  
--app.component.ts  
--main.ts

otherwise it will not work.

app.component.ts

import {Component} from '@angular/core';

// Annotation section
@Component({
  selector: 'my-app',
  template: '<h1>Hello {{name}}</h1>'
})

 export class AppComponent {
  name: string;
  constructor() {
    this.name = 'World';
}

main.ts

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

@Component is an annotation that the AppComponent class will be annotated with.

index.html

 <html>
      <head>
        <title>Angular 2 Quickstart</title>
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>

    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>


    <!-- 2. Configure SystemJS -->
      <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

The app component is called the root component, the entry for your application. It's bootstrapped in main.ts

To get this running you need a webserver, lets install lite-server via npm

npm install lite-server -g

open the directory where you saved index.html type

lite-server

If all goes well a web browser opens up after a while.
It's serving on port 3000
and its saying:

Cannot GET /

Cool ? Nope. Ok add to the path, make it look like this:

http://localhost:3000/index.html

Awesomeness! You will notice that the page says connected to browser sync, which means that any time you change the HTML the file will reload. (I am old school, so I always press F5 a couple of times too, just in case...)
To reach Nirvana we would like it to reload when we change the code :) We are getting close.

These little applications are compiled via a Typescript compiler referenced in the html.

<script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>

This is ok for a small app, but for the big application we are going to build we want everything installed locally, so that we can reach Nivea.

Second app, a litle array never hurt anyone

Edit app.ts

export class AppComponent {
	  name: string;
	  avengers : Array<string> =  ["Captain America", "Hulk", "Thor"];
	  constructor() {
	    this.name = 'Bear2';
	  }
	}

  1. we added a reference to a list avengers

  2. we initialized it with 3 items

  3. Edit the template to loop a list

    template: `

    My name: {{ name }}

    Friends:

    • {{ name }} nr {{(ix+1) *5}}
      {{name}} is my favorite
    `

Whats new here is the for loop starts with

*ngFor

To loop the items you type #name of avengers

\name is called inline template variable \ix is set to the index of the loop.

notice that name in the for loop refers to the inline variable, while name in the first line refers to the property called name.

we also get to meet *ngIf. ngIf and ngFor are inbuilt directives.

##Clone the Repo and get it on

Clone repository

https://github.com/Cyberdada/Angular2Worksho.git

open up a cmd window type

npm install

The package manager will now chew through the file called package.json, It has all the dependencies you need. If there are any problems, a proxy setting is probably needed.

After this you should have a Typescript compiler installed, however it is only installed locally. To install Typescript globally so that it can be used on the command prompt type this:

npm install -g typescript

Let's try it out and verify...

tsc -v

should give you Version 1.8.10

if not, type where tsc

It seems that every installation of tsc adds a line to the Path system variable and if you have installed it previously you could have another installation lurking. If so, you need to edit the path so it' pointing to the tsc compiler you just installed, it should be in %user%\AppData\Roaming (on windows.)

What we want is for the typescript compiler to keep watching our repo and compile TS files as soon as we save them, to do that, open a command window in the application folder and type tsc -w
w means watch. Now we are in REPL heaven.

Lite-Server

We need a web server in order to serve the files. We are going to use John Papas lite-server. Lite-Server was also a part of the stuff installed via package.json, but we want to be able to access it everywhere. If you skipped the hello world example then type this in the command window:

npm install -g typescript

after that you can now type

lite-server

on the command line, and the webserver will start serving from the folder you are located in.

##Editors I have tried to use Sublime, Visual Studio and Visual Studio Code. Of these I like Visual Studio Code best, because I do not have to install any special packages for Typescript to make it work. (Sublime lovers, correct me if I am wrong.) I find the normal Visual Studio to be too heavy, it's constantly nagging me about the license, and it's easier to get lost there than in Visual Studio Code. Jet Brains Web Storm looks great, but I haven't tried it. (It has syntax highlighting of the HTML template when it's inline. That is one feature I would like to have in Visual Studio Code.)

Download Sublime https://www.sublimetext.com/3
Download Visual Studio Code https://code.visualstudio.com/
Download Web Storm https://www.jetbrains.com/webstorm/download/#section=windows-version

###Visual Studio Code tips

  • Ctrl + P to quickly switch between files

  • hide js files.

For TypeScript, you can exclude generated JavaScript for TypeScript files with:

"**/*.js": {"when": "$(basename).ts"}

This pattern will match on any JavaScript file ( ** / * .js) but only if a sibling TypeScript file with the same name is present. The file explorer will no longer show derived resources for JavaScript if they are compiled to the same location. Configure this with the files.exclude setting in your workspace settings (File > Preferences > Workspace Settings).

This should go to the files.exlude part of settings.json
my settings.json now looks like this:

{
"files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/*.js": {"when": "$(basename).ts"},
    "**/*.js.map": true
}    
}

I also hide all js.map files.

Angular cli and Angular 2 Seed

angular cli

In my opinion the hardest thing in Angular 2 is setting up the environment. Of course there are tools for that. One is called Angular Command Line Interface aka Angular CLI. It's currently in pre alpha, and for now, personally I find it easier to scaffold my own code. You should check it out though. :)

There is also a seed project https://github.com/mgechev/angular2-seed

Work loop

  • Go to the working directory of your application
  • Start a cmd, type tsc -w
  • Start a new cmd , type lite-server
  • Open up the solution in your favorite editor
  • Buy two new monitors, so that we don't miss the gory glory of the command prompts :)

You can of course bypass the start a cmd yada yada,
I just like to manually open cmd windows and type :) Compare the package.json file supplied with Project 1 with the Package.json file shown in https://angular.io/docs/ts/latest/quickstart.html

If you want to recreate the script magic shown there, go ahead and copy the scripts section from the package.json file and add the concurrently devDependency, then type

npm install

after that, you only have to type

npm start

You have to keep an eye on the lite-server command window though, because it sometimes stops unexpectedly.

Home

[Setup, Startup](Setup, Startup)

Typescript

[Assignment #1] (Assignment-%231)

[Assignment #2] (Assignment-%232)

[Assignment #3] (Assignment-%233)

[Links] (Links)

[Slide Shows] (Slide Shows)

Clone this wiki locally