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:
It is recommended that you cover sections 1-4 this week:
- 1. The Hero Editor
- 2. Displaying a List
- 3. Master/Detail Components
Installing Angular on mi-linux from Putty
Installing Angular itself
First, go into your public_html directory, create a NEW directory 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 the full path once and for all to your linux PATH variable
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 your PATH variable:
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 will contain Angular and YOUR app director... try the "ls" command to check!
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 files 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 need to make sure that the permissions on dist are suitable:
chmod 755 dist -R
Now you should be able to browse to your web app... mine is here:
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!
