El Code Snippet

Take and Use ... It's cool!

AngularJS 1.6

AngularJS is a popular JavaScript framework that allows you to create Single Page Applications using an MVC model. The MVC is composed of a:

  • Model (data you are working with ... like names, address, width and lengths, and so on),
  • View (what the end user sees in their browser window: text, images, input boxes, etc.) and
  • Controller (the application's 'manager' that moves data around as needed). It gets data from the View (by way of input fields, check boxes, mouse clicks, and so on and stores it in the Model ... which it can then retrieve at any time to display it on the View.

Note: AngularJS is full of shortcuts!

Steps to create your own AngularJS web app:

  1. Create a standard HTML page
  2. Add a reference to the AngularJS framework
  3. Create a script tag <script> and insert your code after it
  4. Lastly, be sure to close your script tag </script>

Let's try this out. For this first example, we'll let AngularJS do the majority of the work for us.

Figure 1

A small AngularJS app that:

  • Uses an input field to grab the data and store it in a variable called full_name via the ng-data attribute
  • Has a controller running in the background by way of the framwork library we loaded that will store what ever is in the full_name variable into default model setup
  • Displays the contents of the variable 'full_name' in a <span> tag through the use of another attribute called ng-bind
            <!doctype html>
            <html>
              <head>
              <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
              </head>
              <body ng-app="">
                <p>Full Name: <input type="text" name="full_name" ng-model="full_name"></p>
                <p>Here is what you type: <span ng-bind="full_name"></span></p>
              </body>
            </html>
            

Experiment with this code here: https://repl.it/I8ft

Let's take this apart ...

Figure 2

A line by line analysis of AngularJS' MVC in action

        <!doctype html>
        <html>
          <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
          </head>
          <body ng-app="">
            <p>Full Name: <input type="text" name="full_name" ng-model="full_name"></p>
            <p>Here is what you type: <span ng-bind="full_name"></span></p>
          </body>
        </html>
            

Line 1 says to the browser that the following lines of code should be displayed using HTML5 rules

Line 2 with it's <html> tag is the opening of the HTML5 file

Line 3 notes the opening of the <head> tag

Line 4 references the AngularJS framework library via a Google CDN (Content Delivery Network)

Line 5 closes the head tag with a forward slash </head>

Line 6 opens the body tag and adds an AngularJS attribute called ng-app ... which tells the AngularJS engine that the body of this page is an AngularJS application

Line 7 is a standard HTML input field that includes an additional AngularJS attribute called ng-model. This particular AngularJS model is assigned a variable called full_name and will hold what ever item you enter into the input field.

Line 8 is a standard HTML command that has a paragraph with text in it and an empty span container with yet another AngularJS attribute called ng-bind. This ng-bind is assigned the value of the 'full_name' variable. This span will be automatically updated by the Controller of this AngularJS app with the data contents contained in the ng-model with the variable called 'full_name'.

Lines 9 and 10 close the previously opened body and html tags.