AngularJS lesson1: single-page applications

how internet pages are created

Web sites create their pages in the server, combining them from html parts created using data from a database, and making server decisions using code stored in the server.
When the product (which is an html page) is complete, the server sends the html code to the client (that is an html browser) and there it is loaded and displayed.
sunstantial part of the “wisdom” of the site is done in the server that is taking care of interrcting with the user by creating menus, responding to input etc.

single page applications

Single page applications can do all that, but in general they work differently.
In single page apps, html code  is created inside the client using Javascript, or is downloaded once from the server. Now, the server support the client by supplying data when needed, but the creation and display of html components is done in the client.
When the user “moves” to another page, this is only an illusion. The truth is that the single html page “show another face” by making some components appear, and some to disappear.

First example

Here’s an example to a web application written using AngularJS:

See the Pen First AngularJS by Yuval Shaul (@YuvalShaul) on CodePen.10739

Please notice:
Codepen allows you to see how the page works, but some things are missing (like parts of the header).
If you want to get a full html file, open the example in codepen (see upper right) and then click on editor.Then choose debug.


Important notes:

  • The html includes new tags. Was html language enlarged ?
  • There is no call to the javascript function. This call is done by the library during load.
  • There is no class or id to let angular find html elements
  • There is a “$scope” parameter in the controller function, but it was not created in the page.
  • Again: We have not called the controller


 data binding

This example show a key concept of AngularJS: Data Binding.
Angular updates the view of a Javascript variable without us having to write event driven code for that.
Try changing the text inside the “text” variable and see the results.


Leave a Reply

Your email address will not be published. Required fields are marked *