Check out these related webinars…

Setting Up the Lab Environment

In this short lab, you will set up your lab environment and learn how to start, use and stop the nginx (pronounced “engine x”) web server (http://nginx.org) that we will be using in this course’s labs.

Nginx is a small yet powerful web server that can be set up on your computer in under a minute (you just need to unzip the archive containing the server binaries in the directory of your preference; the file is self-contained and there is no dependencies!).

The web server has already been installed on your student machine and all you will be needing to do to start serving you web pages is to copy the lab files into its web folder as you progress through the course!

Part 1 – Stop the Apache Web Server

Depending on your lab environment set up, you may already have an instance of the Apache web server running on your student machine as well. We need to shut it down before we can start using the nginx web server which, by default, uses the same HTTP port 80 as Apache.

1.- Open a browser and enter: http://localhost/

2.- If you get a page like the one below, you machine already has Apache running on it; we need to stop it before we can start using nginx.

If you don’t see this page, but rather the Welcome to nginx! page, then you are all set and you just need to review the subsequent lab parts. Otherwise, proceed with the below steps.

3.- Right click the task bar and select Open Apache Monitor.

4.- In the Open Apache Monitor window that opens, click Stop.

5.- Enter the admin password (wasadmin), if required, and click Yes.

The server will stop shortly.

6.- Right-click the task bar and select Open Apache Monitor again.

7.- Make sure the Apache web server instance is shown as stopped (a circle with a re dot in the middle is shown next to the instance).

8.- Close the window.
Now we can start the nginx web server.

Part 2 – Understanding nginx

1.- Using Windows Explorer, navigate to the C:Softwarenginx directory.

Note: We will be referring to this folder as as .
You should see the following folders:

The web server is the nginx.exe file that is used to serve web content.

The main nginx configuration file, called appropriately nginx.conf, is located in the /conf folder and the access and error log files generated by nginx during its operation, are located in the /logs folder.

Nginx serves web content from the C:Softwarenginxhtml (/html) web folder.

In text below, we will refer to the location of the Web Server’s root document directory as which is specific to your Lab environment (e.g. C:Softwarenginxhtml or C:Apache2.2htdocs).

2.- Navigate to the C:Softwarenginxhtml folder (the ) and open the index.html file located there using NotePad ++.

It is a regular HTML 5 page as identified in its <!DOCTYPE html> declaration.
Notice the

statement that we will use to identify the page on the test that follows.

3.- Close the file.

4.- Open the Command Prompt window and type in the following command at the prompt and press ENTER (execute the command):

cd C:Softwarenginx

This command will change directory to where the nginx web server resides (there is no “traditional” bin folder!).

5.- Start the nginx web server by executing the following command:

start nginx

This command will launch the nginx web server that starts listening on port 80 ready to service our browser requests.
Note: In subsequent labs, we will be referring to this step as “Start the Web server”

6.- Open Google Chrome browser and navigate to http://localhost

You should see the nginx welcome page.

That’s the C:Softwarenginxhtmlindex.html page we examined a few moments ago.

7.- Close your browser browser.

8.- In the Command Prompt window where you started the nginx web server, type in the following command at the prompt and press ENTER:

nginx -s stop

This command will stop the web server.

Note: In subsequent labs, we will be referring to this step as “Stop the Web server”

Part 3 – Preparing the Lab Folders

1.- Using Windows Explorer, navigate to the C:Softwarenginxhtml directory.

2.- Create two folders there: js and labs.

3.- Using Windows Explorer, copy the C:LabFilesjsangular.js file over into the htmljs folder.

We will be copying other files located in the C:LabFiles folder in the htmllabs folder as we progress through the course material completing related labs.

Part4 – Notepad++

The software bundled with this class includes Notepad++ (https://notepad-plus-plus.org/) located in the C:SoftwareNotepadPlus folder that you can use for text editing your lab files. Of course, you are free to use any other text editor of your choice and preference.

Note: In subsequent labs, we will be referring to the text editing step as “Edit the file in the text editor” or similar references.
This is the last step in this lab.

Part 5. Review

In this lab, we reviewed the main nginx web server operations command-line and set up the web folders we are going to use in subsequent labs.

Getting Started with AngularJS

In this lab, you will learn the basic elements and directives that are part and parcel of single-page AngularJS-driven applications.

Part 1. Setting Up the Environment

1.- Using Windows Explorer, copy the hello_angularjs.html file located in the C:LabFiles directory over to the C:Softwarenginxhtmllabs directory.

2.- Open the Command Prompt window and type in the following command at the prompt and press ENTER:

cd C:Softwarenginx

3.- Start the nginx web server by executing the following command:

start nginx

This command will launch the nginx web server that starts listening on port 80 ready to service your browser requests.
Keep the Command Prompt window open.

Part 2 – Getting to know AngularJS

1.- Open Google Chrome browser and navigate to http://localhost/labs/hello_angularjs.html

2.- Enter John Doe in the Enter user name input box and 29 for the user age.

The page will get automatically updated to reflect your input. After you complete your input, you should see the following output:

Let’s see how AngularJS achieves this up-to-the-character responsiveness.

3.- Open the C:Softwarenginxhtmllabshello_angularjs.html file in your text editor.

You should see the following content:

<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8" />
 <title>Hello AngularJS!</title>
 <script src='/js/angular.js'></script>
</head>
<body style='font-family: monospace'>
 Enter user name: <input type="text" ng-model='name'><br>
 Enter user age : <input type="number" ng-model='age' min='1' max='121'>
 <p ng-show='name' style='color:blue;'>User {{name}} is {{age}} years old</p>
</body>
</html>

Let’s review the main elements of the page.

a.- First, we should note that hello_angularjs.html is a regular HTML 5 page as identified in its <!doctype html> declaration. This page acts as the template of our AngularJS-enabled application.

b.- The reference to the angular.js JavaScript library is made in the line.

c.- The ng-app directive in the line tells Angular which part of the DOM it should manage (the whole page, in our case; we can also limit its area of control to a div element).

d.- The model is presented by two properties: name and age that are plugged into the framework by the ng-model attributes of the input HTML elements. For the age numeric value we use the number input element of HTML5 that helps with input filtering (any user input other than a number between 1 and 121 (the range is controlled by the min=’1′ and max=’121′ element attributes) will be discarded).

e.- The UI (View) of the page is represented by the DOM (the input HTML elements); the UI elements are mapped to the name and age JavaScript properties. Note: This mapping (which happens transparently to the page author) is referred to as data binding.

f.- The up-to-date state of our model is echoed back to the user in the p element.

g.- The model state output (displayed through the p element) is controlled by the double curly braces (the “User {{name}} is {{age}} years old” line) which AngularJS uses as a delimiter for expressions outputting model values. Note: The ‘{{ }}’ delimiter is also called interpolation notation.

h.- The ng-show=’name’ directive acts as a trigger for displaying the model state output on the page. The trigger is fired (and content starts getting rendered on the page) when the name model property gets its initial value (first character in the user input).

Part 3 – Experimenting with AngularJS

By way of experimenting with our code, let’s see how things are bound together in AngularJS.
1.- In your text editor that holds the hello_angularjs.html file, remove the ng-app directive in the html tag.

After your remove the ng-app directive, you should have the regular html element:

2.- Save the file.

3.- Switch to Chrome and refresh the browser view by pressing Ctrl-R

You should see the following “AngularJS-free” page.

What you see now is an HTML page rendered in the browser “As-Is” with no intervention on the part of AngularJS. You just suppressed AngularJS altogether.

4.-Switch to the text editor and revert the previous change by placing the ng-app directive back at the html element.

You should have the line back again.

5.- Remove the ng-show=’name’ directive from the p HTML element.

The line should look as follows now:

User {{name}} is {{age}} years old

This change will disable the triggering of the message display when the name property gets initialized with the first character entered by the user.

6.- Save the file.

7.- Switch to Chrome and refresh the browser view by pressing Ctrl-R

Now you should see that the p element shows the message without model values (as there are none yet).

User is years old

8.- Start entering your input, and see that the model values are displayed as expected, so your change only affected a client-facing aspect of our application.

9.- Switch to the text editor and place the ng-show=’name’ directive back at the p HTML element.

10.- Replace the {{name}} value with {{name2}}

This change references a model property which is not exposed to the user through UI.

11.- Save the file.

12.- Switch to Chrome and refresh the browser view.

You should see now that any input in the Enter user name input control is not reflected in the model output (and only the age model value is being displayed).

Getting Started

13.- Switch back to the text editor and revert the change from {{name2}} back to {{name}}

14.- Save and close the file.

We are almost done in this lab.

Part 4 – Cleaning Up

1.- Close Chrome browser.

2.- In the Command Prompt window where you started the nginx web server, enter in the following command:

nginx -s stop

This command will stop the web server.
You can keep the Command Prompt window open.
This is the last step in this lab.

Part 5 – Review

In this lab, you learned the basic elements of an AngularJS page: the ng-app, ng-model and ng-show directives, as well as how to use the interpolation notation (double curly braces) for outputting model values.