Step 1 - Creating a new Html Page

We'll start by creating a new page in any existing project. I'm going to use Visual Studio to add a new page via one of the built-in templates:

Name the page: ToDo.html

The first step is to customize the page main layout to match your project. Since this is a static HTML page you have to customize this page to match your application style by copying or otherwise updating the HTML.

Using Templates or Scripts instead of static Html

Angular 'applications' are entirely client side driven so they don't need server side scripting. However, nothing is stopping you from using a server side script or template to generate this initial page. For example, if your existing application already has a nice Layout page, it might be easier to just reuse the styling configured with it.

After making a few adjustments for the title and footer, here's what the page looks like when you run it:

This base template is a minimal Angular application that has hooked up a startup module so you can immediately start doing some work. This sample lets you click the button and it updates the label on the form in response to the button click just to demonstrate that Angular is hooked up and its data binding features are working.

Full Angular Applications

Note this is a very basic template designed to add Angular to a single page and get going quickly, using a single JavaScript file to hold page logic. For a full scale application you'll want a bit more setup and isolate out your configuration, services and controllers. You can look at the MusicStore Sample that ships with Web Connection for a full scale example.

Angular Bootstrapping

In order for Angular to start up you have a bit of JavaScript on the .htm page.

<script src="./bower_components/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>  
<script src="./bower_components/angular/angular.min.js"></script>
<script src="todo.js"></script>

The key reference is the todo.js page which was generated for you and contains a skeleton Angular application:

var app = angular.module('app', [
// 'ngRoute',
// 'ngSanitize',
// 'ngAnimate'
    ]);

app.controller('pageController', pageController);
pageController.$inject = ['$scope','$http','$timeout'];

function pageController($scope, $http, $timeout) {

    var vm = this;

    // Interface
    vm.message = "Hello World from AngularJs. JavaScript time is: "  + new Date();
    vm.buttonClick = buttonClick;

    // Initialization
    initialize();

    return;

    // Interface function implementations

    function initialize() {
        console.log("page controller started.");
    }

    function buttonClick()  {
        vm.message = "Curious little bugger are you? Good! Updated time is: " + new Date();
    }
}

This essentially sets up an Angular controller, that can interact with the page.

To activate Angular on your Html Page you now need two attributes:

  • ng-app to bootstrap Angular
  • ng-controller to attach the above controller to a DOM container.

The template creates both on the <body> element:

<body ng-app="app" 
      ng-controller="pageController as vm">

These attributes can live on any container element and they don't have to be on the same element. ng-app typically is referenced at a top level element, but because you can have multiple controllers attached to different areas of the page ng-controller is typically used in lower level DOM elements.

The actual Html that interacts with Angular on the demo page is very simple:

<div class="well well-sm">
    <h5>{{vm.message}}</h5>
    

    <button class="btn btn-primary" ng-click="vm.buttonClick()">
        <i class="fa fa-pencil"></i> Click me
    </button>
</div>

Here the code embeds an expression using {{vm.message}} into the page. vm corresponds to the pagecontroller as vm in the ng-controller directive which references the controller and the .message property defined on it.

Note there's also an ng-click directive on the button which triggers a method on the controller via vm.buttonClick(). If you look back at the controller you see that it has both a message property and buttonClick method. So at a very high level what happens is that Angular binds a controller an area of the DOM and you can then databind values into the DOM without explicitly assigning a value and handle events that fire back into the controller.

Go ahead and play around with the buttonClick handler on the controller and see how you can update the message value.

There is of course much more you can do with Angular, but this describes one of the most basic things you can do with Angular.

In the next step we'll create our todo application based on these basic concepts.


© West Wind Technologies, 1996-2019 • Updated: 02/18/16
Comment or report problem with topic