7CC005 Workshop w2

Main Page >> Web Technologies >> Workbook >> Week 02 - Google Angular - part 1

Google Angular

You should spend 2 weeks working through The Tour of Heroes tutorial, located here:

• https://angular.io/docs/ts/latest/tutorial/

It is recommended that you cover sections 1-4 this week:

• 1. Introduction
• 2. The Hero Editor
• 3. Master/Detail
• 4. Multiple Components

Installing on mi-linux from Putty

Installing Angular itself

First, go into your public_html folder, create a NEW folder and locate yourself inside it:

cd public_html
mkdir angular-2018
cd angular-2018

Then run the Angular installation, but WITHOUT the -g option (we are not allowed to install globally on mi-linux)

npm install @angular/cli

Note: The above will take a while... Note: You should now have a "node_modules" directory inside your "angular-2018" directory... it contains Angular, including the "ng" command that we need next.

Generate your application files

Next, we need to create a new project, which is done using the "ng new" command... only the "ng" command is buried inside the "node_modules" directory, so you have 2 options:

• specify its full path every time
• add it to your linux path

Running the command specifying the full path would look like something like this:

node_modules/@angular/cli/bin/ng new app-alix

Obviously replace "app-alix" with the name of YOUR app...

Once you have done the above, your "angular-2018" directory now contains Angular and YOUR app director:

drwxr-xr-x   4 in9352 acad    4096 Jan 31 12:52 .
drwxr-xr-x  73 in9352 daemon  4096 Jan 31 12:31 ..
drwxr-xr-x   6 in9352 acad    4096 Jan 31 14:29 app-alix
drwx------ 760 in9352 acad   24576 Jan 31 12:48 node_modules

The source file of your application are located in app-alix/src... we will take a look at them later. For now let's compile the default files!

Update your base URL

Once the application files have been generated, you need to edit the following file: app-alix/src/index.html

You need to specify the base URL on line 6, like this:

<base href="/~in9352/angular-2018/app-alix/dist/">

Obviously you'll have to change the URL above to match your details... the "/dist/" at the end MUST be included though.

Build your application

Next you need to build your application from the source files, using the command ng build, like this:

cd app-alix
node_modules/@angular/cli/bin/ng build

This will create a new dist directory inside your app-alix folder. "dist" is short of "distribution", and contains the files of your application (HTML, JavaScript etc.)

In order for them to work, you still need to make sure that the permissions on dist are suitable:

chmod 755 dist

GitLab

Important: Make sure that you commit your work to GitLab on a regular basis!