|
|
| (14 intermediate revisions by 2 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 |
| | + | |
| | + | 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: |
| | + | * Work through the [https://react.dev/learn/tutorial-tic-tac-toe Quickstart Tutorial: Tic-Tac-Toe] |
| | | | |
| | == Google Angular == | | == Google Angular == |
| | | | |
| − | You should spend 2 weeks working through '''The Tour of Heroes tutorial''', located here:
| + | First, work through the [https://angular.io/tutorial/first-app Build your first Angular app tutorial]. |
| − | * [https://angular.io/tutorial https://angular.io/tutorial]
| + | |
| | + | Then, make a start on the more complicated [https://angular.io/tutorial/tour-of-heroes Tour of Heroes tutorial]. |
| | | | |
| | It is recommended that you cover sections 1-3 this week: | | It is recommended that you cover sections 1-3 this week: |
| Line 12: |
Line 22: |
| | *1. The Hero Editor | | *1. The Hero Editor |
| | *2. Displaying a List | | *2. Displaying a List |
| − | *3. Master/Detail Components | + | *3. Create a Feature Component |
| − | | |
| − | == 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:
| |
| − | | |
| − | <pre>
| |
| − | cd public_html
| |
| − | mkdir angular-2019
| |
| − | cd angular-2019
| |
| − | </pre>
| |
| − | | |
| − | Then run the Angular installation, but WITHOUT the -g option (we are not allowed to install globally on mi-linux)
| |
| − | | |
| − | <pre>
| |
| − | npm install @angular/cli
| |
| − | </pre>
| |
| − | | |
| − | Note: The above will take a while...
| |
| − | | |
| − | Note: You should now have a "node_modules" directory inside your "angular-2019" 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:
| |
| − | | |
| − | <pre>
| |
| − | node_modules/@angular/cli/bin/ng new app-alix
| |
| − | </pre>
| |
| − | | |
| − | or you can add the path above to your PATH variable:
| |
| − | | |
| − | <pre>
| |
| − | export PATH=$PATH:node_modules/@angular/cli/bin/
| |
| − | </pre>
| |
| − | | |
| − | and then simply call '''ng''':
| |
| − | | |
| − | <pre>
| |
| − | ng new app-alix
| |
| − | </pre>
| |
| − | | |
| − | 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!
| |
| − | | |
| − | <pre>
| |
| − | 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
| |
| − | </pre>
| |
| − | | |
| − | 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:
| |
| − | <pre>
| |
| − | <base href="/~in9352/angular-2018/app-alix/dist/app-alix/">
| |
| − | </pre>
| |
| − | | |
| − | Obviously you'll have to change the URL above to match '''your details'''.
| |
| − | | |
| − | === 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
| |
| − | ng build
| |
| − | </pre>
| |
| − | | |
| − | 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:
| |
| − | | |
| − | <pre>
| |
| − | chmod 755 dist -R
| |
| − | </pre>
| |
| − | | |
| − | Now you should be able to browse to your web app... mine is here:
| |
| − | * [http://mi-linux.wlv.ac.uk/~in9352/angular-2019/app-alix/dist/app-alix/ http://mi-linux.wlv.ac.uk/~in9352/angular-2019/app-alix/dist/app-alix/]
| |
| − | | |
| − | == 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 == | + | == 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.
