|
|
| (47 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| | [[Main Page]] >> [[7CC005|Web Technologies]] >> [[7CC005_-_Workbook|Workbook]] >> Week 02 - Google Angular - part 1 | | [[Main Page]] >> [[7CC005|Web Technologies]] >> [[7CC005_-_Workbook|Workbook]] >> Week 02 - Google Angular - part 1 |
| | | | |
| − | == Google Angular ==
| + | Please learn '''ONE''' of the JS frameworks below. |
| | | | |
| − | You should spend 2 weeks working through '''The Tour of Heroes tutorial''', located here:
| + | I recommend React.js, which is a lot simpler to learn. Only go for Angular if you have previous experience in this framework. |
| − | * [https://angular.io/docs/ts/latest/tutorial/ https://angular.io/docs/ts/latest/tutorial/]
| |
| | | | |
| − | It is recommended that you cover sections 1-4 this week:
| + | == Facebook React (recommended) == |
| | | | |
| − | *1. Introduction
| + | Start learning React: |
| − | *2. The Hero Editor | + | * Work through the [https://react.dev/learn/tutorial-tic-tac-toe Quickstart Tutorial: Tic-Tac-Toe] |
| − | *3. Master/Detail
| |
| − | *4. Multiple Components
| |
| | | | |
| − | == Base URL == | + | == Google Angular == |
| − | | |
| − | When starting the application by typing:
| |
| − | | |
| − | <pre>
| |
| − | npm start
| |
| − | </pre>
| |
| − | | |
| − | You are given an IP address + port to access the app, for example:
| |
| − | | |
| − | <pre>
| |
| − | [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] --------------------------------------
| |
| − | </pre>
| |
| − | | |
| − | But you may also want to deploy the application in your public_html folder, and browse to it via the domain name URL, for example mine is here:
| |
| − | * [http://mi-linux.wlv.ac.uk/~in9352/angular/quickstart/src/ http://mi-linux.wlv.ac.uk/~in9352/angular/quickstart/src/]
| |
| − | | |
| − | 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:
| |
| − | <pre>
| |
| − | <base href="/~in9352/angular/quickstart/src/">
| |
| − | </pre>
| |
| − | | |
| − | You also need to add "../" in front of the paths to all "node_modules" link, so:
| |
| − | <pre>
| |
| − | <!-- 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>
| |
| − | </pre>
| |
| − | | |
| − | The full file now looks like this:
| |
| − | | |
| − | <pre>
| |
| − | <!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>
| |
| − | </pre>
| |
| − | | |
| − | ===systemjs.config.js===
| |
| | | | |
| − | You also need to add the "../" in this file, here:
| + | First, work through the [https://angular.io/tutorial/first-app Build your first Angular app tutorial]. |
| | | | |
| − | <pre>
| + | Then, make a start on the more complicated [https://angular.io/tutorial/tour-of-heroes Tour of Heroes tutorial]. |
| − | (function (global) {
| |
| − | System.config({
| |
| − | paths: {
| |
| − | // paths serve as alias
| |
| − | 'npm:': '../node_modules/'
| |
| − | },
| |
| − | </pre>
| |
| | | | |
| − | Your website should now run via its mi-linux URL.
| + | It is recommended that you cover sections 1-3 this week: |
| | | | |
| − | Do let me know if you have found a neater way of doing this!
| + | *Introduction |
| | + | *The Application Shell |
| | + | *1. The Hero Editor |
| | + | *2. Displaying a List |
| | + | *3. Create a Feature Component |
| | | | |
| − | == GitLab == | + | == GitHub == |
| − | '''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 GitHub on a regular basis. |
Main Page >> Web Technologies >> Workbook >> Week 02 - Google Angular - part 1
Please learn ONE of the JS frameworks below.
I recommend React.js, which is a lot simpler to learn. Only go for Angular if you have previous experience in this framework.
Facebook React (recommended)
Start learning React:
Google Angular
First, work through the Build your first Angular app tutorial.
Then, make a start on the more complicated Tour of Heroes tutorial.
It is recommended that you cover sections 1-3 this week:
- Introduction
- The Application Shell
- 1. The Hero Editor
- 2. Displaying a List
- 3. Create a Feature Component
GitHub
Important: Make sure that you commit your work to GitHub on a regular basis.
