Difference between revisions of "7CC005 Workshop w2"

From mi-linux
Jump to navigationJump to search
Line 14: Line 14:
  
 
== Installing on mi-linux from Putty ==
 
== 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:
 
First, go into your '''public_html''' folder, create a NEW folder and locate yourself inside it:
Line 30: Line 32:
  
 
Note: The above will take a while...
 
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.
  
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:
 
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:
Line 53: Line 56:
 
drwx------ 760 in9352 acad  24576 Jan 31 12:48 node_modules
 
drwx------ 760 in9352 acad  24576 Jan 31 12:48 node_modules
 
</pre>
 
</pre>
 +
 +
=== Build your application ===
 +
 +
Next you need to '''build''' your application from the source files, using the command '''ng build''', like this:
 +
 +
<pre>
 +
cd app-alix
 +
node_modules/@angular/cli/bin/ng build
 +
</pre>
 +
  
 
== GitLab ==
 
== GitLab ==
 
'''Important:''' Make sure that you commit your work to [[GitLab_server|GitLab]] on a regular basis!
 
'''Important:''' Make sure that you commit your work to [[GitLab_server|GitLab]] on a regular basis!

Revision as of 14:43, 31 January 2018

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:

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

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


GitLab

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