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

or you can add the path above to the PATH object:

export PATH=$PATH:node_modules/@angular/cli/bin/

and then simply call ng:

ng new app-alix

Note: 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
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

Now you should be able to browse to your web app... mine is here:

• http://mi-linux.wlv.ac.uk/~in9352/angular-2018/app-alix/dist/

ng serve

Currently you have to rerun the last 2 commands (ng build and chmod 755 dist) every time you make a change to the source code.

You can use the ng serve method instead, to automatically rebuild your app every time a change is made to a file... but I haven't quite worked out how to do that yet... more soon!

GitLab

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