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. Introduction
- 2. The Hero Editor
- 3. Master/Detail
- 4. Multiple Components
Base URL
When starting the application by typing:
npm start
You are given an IP address + port to access the app, for example:
[1] [BS] Access URLs: [1] -------------------------------------- [1] Local: http://localhost:3002 [1] External: http://134.220.4.152:3002 [1] -------------------------------------- [1] UI: http://localhost:3003 [1] UI External: http://134.220.4.152:3003 [1] --------------------------------------
But you may also want to deploy the application in your public_html folder, and browser to is via the domain name URL, for example mine is here:
To achieve this, you need to make a few changes to the following 2 files:
- src/index.html
- src/systemjs.config.js
index.html
In this file, you need to set the <base> to YOUR base folder. For example mine is:
<base href="/~in9352/angular/quickstart/src/">
You also need to add "../" in front of the paths to all "node_modules" link, so:
<!-- Polyfill(s) for older browsers -->
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
The full file now looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/~in9352/angular/quickstart/src/">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
systemjs.config.js
You also need to add the "../" in this file:
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '../node_modules/'
},
Your website should now run via it's mi-linux URL.
Do let me know if you have found a neater way of doing this!
GitLab
Important: Make sure that you commit your work to GitLab on a regular basis!
