|
|
| Line 19: |
Line 19: |
| | *2. Displaying a List | | *2. Displaying a List |
| | *3. Create a Feature Component | | *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-2019" 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-2019/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 == | | == GitLab == |
| | '''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 [[GitLab_server|GitLab]] on a regular basis! |
