CODEWITHSUNDEEP
javascripthtmlangularjs
rafat ahmed
rafat ahmed

Reputation: 132

How to create route request?

I am new in angularjs. recently I have practiced angular so my starting point is routing. & I see from this link /home/rafat/Downloads/Wildlife-Night.tmTheme

my route provider file looks like below.

var sampleApp = angular.module('phonecatApp', []);

sampleApp .config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/addOrder', {
        templateUrl: 'templates/add-order.html',
        controller: 'AddOrderController'
      }).
      when('/showOrders', {
        templateUrl: 'templates/show-orders.html',
        controller: 'ShowOrdersController'
      }).
      otherwise({
        redirectTo: '/addOrder'
      });
  }]);

& the HTML ,

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>AngularJS Routing example</title>
  </head>

  <body ng-app="sampleApp">

    <div class="container">
        <div class="row">
        <div class="col-md-3">
            <ul class="nav">
                <li><a href="#AddNewOrder"> Add New Order </a></li>
                <li><a href="#ShowOrders"> Show Order </a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div ng-view></div>
        </div>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

but it does not work; how do I solve this problem?

Upvotes: 2

Views: 74

Answers (3)

Avi
Avi

Reputation: 1964

  1. Move your script tags up to the head
  2. your module name is phonecatApp but in html: ng-app="sampleApp"?

Upvotes: 1

FlorianTopf
FlorianTopf

Reputation: 948

Your a href attributes are wrong in the nav. Should be:

<ul class="nav">
    <li><a href="#/addOrders"> Add New Order </a></li>
    <li><a href="#/showOrders"> Show Order </a></li>
</ul>

Upvotes: 1

gaurav5430
gaurav5430

Reputation: 13917

i think instead of this:

<li><a href="#AddNewOrder"> Add New Order </a></li>
<li><a href="#ShowOrders"> Show Order </a></li>

you should have:

<li><a href="#/addOrder"> Add New Order </a></li>
<li><a href="#/showOrders"> Show Order </a></li>

Upvotes: 1

Related Questions