Paddy's Weblog: Navigation in AngularJS

I continue my exploration of AngularJS, and this time on the navigation part.
To do that, I wrote a little application, to show how to:

use $routeProvider to handle the navigation by creating new routes with the necessary parameters to construct the view which will be render by ng-view.
navigate from a html link
navigate from a html button

Index.html
index.html is the application entry point.
It contains the ng-view attribute, the loading of the controller and a navigation from html links.

index.html

<!doctype html>
<html ng-app="myController">
  
  <head>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
    <script src="./js/controller.js"></script>
  <body >
        <h3>AngularJS Navigation</h3> 
        <br>
    <a href="#/detail">detail</a>&nbsp;
    <a href="#/create">create</a>&nbsp;
    <a href="#/edit">edit</a><br>
    <div ng-view></div>
  </body>
</html>

The controller
The controller defines the $routeProvider which describes the navigation rules with routes.
The routes are created by using the when's method which takes a route path and an object as parameters.
The object contains the information to make the render the View, in my case, a controller and a template (one of each by route).

For example:
$routeProvider.when('/detail', {controller:DetailCtrl, templateUrl:'detail.html'}).
When the url hash fragment will be /detail, AngularJS will use DetailCtrl as controller and detail.html for rendering by ng-view.

js/controller.js

angular.module('myController',[]).
  config(function($routeProvider) {
    $routeProvider.
      when('/detail', {controller:DetailCtrl, templateUrl:'detail.html'}).
      when('/create', {controller:CreateCtrl, templateUrl:'create.html'}).
      when('/edit', {controller:EditCtrl, templateUrl:'edit.html'}).
      when('/next',{controller:EditNextCtrl, templateUrl:'next.html'}).
      when('/next2',{controller:EditNext2Ctrl, templateUrl:'next2.html'}).
      otherwise({redirectTo:'/'});
  });
  
  function DetailCtrl($scope) {
        console.log("detail");
  }
  
  function CreateCtrl($scope) {
        console.log("create");
  }  
  
  function EditCtrl($scope) {
        console.log("edit");
  }    
  
  function EditNextCtrl($scope) {
        console.log("edit Next");
  }    
  
  function EditNext2Ctrl($scope) {
        console.log("edit Next2");
  }
  
  function DefaultCtrl($scope,$location) {
        $scope.GoToNext2 = function (hash) {
                console.log("go to "+hash);
                $location.path(hash); 
        }       
  }

The templates and the css

edit.html

<!doctype html>
<html>
  <head>
        <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>
        <div class="header">                         
                Edit                             
        </div>
        <div class="body">
        </div>
        <div>
                <span class="footer">
                <a href="#/next" >next -> </a>&nbsp;
        </span>
        <div>           
  </body>
</html>

next.html

<!doctype html>
<html>
  <head>
        <link rel="stylesheet" type="text/css" href="css/app.css">
         <script src="./js/controller.js"></script>
  </head>
  <body>
        <div class="header">                         
                Edit Next                                
        </div>
        <div class="body">
        </div>
                <div ng-controller="DefaultCtrl">
                <span class="footer">
                <button ng-click="GoToNext2('/next2')">next2</button>
        </span>
        <div>   
  </body>
</html>

To navigate from a button, I used the $location.path() method.
The $location.path method is called in the GoToNext2 function which is itself declared in DefaultCtrl controller.
For more information on $location you can read this guide.

next2.html

<!doctype html>
<html>
  <head>
        <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>
        <div class="header">                         
                Edit Next 2                              
        </div>
        <div class="body">
        </div>
  </body>
</html>

create.html

<!doctype html>
<html>
  <head>
        <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
        <div class="header">
                Create
        </div>  
        <div class="body">
        </div>
  </body>
</html>

detail.html

<!doctype html>
<html>
  <head>
        <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>        
        <div class="header">
                Detail                           
        </div>
        <div class="body">
        </div>  
  </body>
</html>

css/app.css

.header {
        background-color:#EEE;
}

.body {
    border: 1px solid black;
    height: 300px;
    background-color: white;
}
.footer {
        float: right;
}

Run this example
To run this example, I needed a web server because ng-view uses XHR to load the html pages.
I therefore used node.js with this script as web server.

1-Launch the server
$ node webServer.js

2-Execute the application
http://localhost:8888/index.html

3-Then navigate...

AngularJS Example with the node.js script

Related link
http://www.itaware.eu/2012/10/19/angularjs-routes-and-navigation/

Paddy's Weblog

jeudi 18 avril 2013

Navigation in AngularJS

Aucun commentaire: