Web Development

AngularJS has been making waves in the Javascript framework scene. Even Google Trends agree.

AngularJS

AngularJS is a Javascript Framework. AngularJS lets you extend HTML beyond is current capabilities. It is designed to make applications more dynamic which results in very impressive applications.

Sample Code

app.js

'use strict';
var app = angular.module("myApp", ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'partials/home.html',
    controller: 'HomeCtrl'
  });
  $routeProvider.when('/services', {
    templateUrl: 'partials/services.html',
    controller: 'ServicesCtrl'
  });
  $routeProvider.when('/clients', {
    templateUrl: 'partials/clients.html',
    controller: 'ClientsCtrl'
  });
}]);

app.controller('HomeCtrl', ['$scope', function($scope){
    $scope.message = 'Welcome to Inspire';
}]);

app.controller('ServicesCtrl', ['$scope', function($scope) {
    $scope.message = 'Everyone come and see how good I look!';
}]);

app.controller('ClientsCtrl', ['$scope', function($scope) {
    $scope.message = 'These are clients';
}]);

Index.html

<!doctype html>
<html>
<head>
  <title>Single Page Application</title>
</head>
<body ng-app="myApp">
    <ul>
      <li><a href="#/">Home</a></li>
      <li><a href="#/services">Services</a></li>
      <li><a href="#/clients">Clients</a></li>
    </ul>
    <div ng-view></div>
    <script src="javascript/angular.js"></script>
    <script src="javascript/angular-route.js"></script>
    <script src="javascript/app.js"></script>
  </body>
</html>

Partials

Home
<h1>Home</h1>
{{message}}
Services
<h1>Services</h1>
{{message}}
Clients
<h1>Clients</h1>
{{message}}

We will dissect the code above.

Configurations

 'use strict';
var app = angular.module("myApp", ['ngRoute']);

We start by instantiating the application and naming it myApp. We, of course, have this binding in the view via ng-app="myApp".

<body ng-app="myApp">

Routing

The next portion of the code is all about Routing:

 app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'partials/home.html',
    controller: 'HomeCtrl'
  });
  $routeProvider.when('/services', {
    templateUrl: 'partials/services.html',
    controller: 'ServicesCtrl'
  });
  $routeProvider.when('/clients', {
    templateUrl: 'partials/clients.html',
    controller: 'ClientsCtrl'
  });
}]);

This code can be very easy to understand.

 $routeProvider.when('/', {
    templateUrl: 'partials/home.html',
    controller: 'HomeCtrl'
  });

This code tells the app that whenever we have a / url, we load partials/home.html where we have ng-view in the main view file.

<div ng-view></div>

The code for routing works as well for #/services and #/clients.

  $routeProvider.when('/services', {
    templateUrl: 'partials/services.html',
    controller: 'ServicesCtrl'
  });

This will load the services partial into the ng-view

  $routeProvider.when('/clients', {
    templateUrl: 'partials/clients.html',
    controller: 'ClientsCtrl'
  });

This will load the clients partial into the ng-view

Controllers

The controller: 'HomeCtrl' portions in the routes makes it a way to provide functionality. In our example:

app.controller('HomeCtrl', ['$scope', function($scope){
    $scope.message = 'Welcome to Inspire';
}]);

The scope property is set to ‘Welcome to Inspire’ and this will be reflected in the partial since it is binded there via {{message}}.

There you go! A single page application.

Try it

I’ve written a modified code and set it up on Plunker, Single Page Application