Difference between revisions of "7CC005 Workshop w2"

From mi-linux
Jump to navigationJump to search
 
(51 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 browser to is 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
 
−
 
 
−
<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>
+
First, work through the [https://angular.io/tutorial/first-app Build your first Angular app tutorial].
−
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
 
  
−
    <script src="systemjs.config.js"></script>
+
Then, make a start on the more complicated [https://angular.io/tutorial/tour-of-heroes Tour of Heroes tutorial].
−
    <script>
 
−
      System.import('main.js').catch(function(err){ console.error(err); });
 
−
    </script>
 
−
  </head>
 
  
−
  <body>
+
It is recommended that you cover sections 1-3 this week:
−
    <my-app>Loading AppComponent content here ...</my-app>
 
−
  </body>
 
−
</html>
 
−
</pre>
 
  
−
<pre>
+
*Introduction
−
(function (global) {
+
*The Application Shell
−
  System.config({
+
*1. The Hero Editor
−
    paths: {
+
*2. Displaying a List
−
      // paths serve as alias
+
*3. Create a Feature Component
−
      'npm:': '../node_modules/'
 
−
    },
 
−
</pre>
 
  
−
== 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.

Latest revision as of 11:31, 17 January 2024

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.

Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=7CC005_Workshop_w2&oldid=10337"