Пример маршрутизации угловойJS не работает

Я следую примеру отсюда: http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/, но я не могу получить маршрутизацию для правильной работы.Пример маршрутизации угловойJS не работает

Установка:

RoutingExample папку
-index.html
-app.js
-templates FOLDER
--add_order.html
--show_order.html

index.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

    <title>AngularJS Routing example</title> 

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 

    <style> 
    body { 
     padding-top: 10px; 
     background-color: #F5F5F5; 
    } 
    </style> 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="../../assets/js/html5shiv.js"></script> 
     <script src="../../assets/js/respond.min.js"></script> 
    <![endif]--> 
    </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><!-- /.container --> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script> 
    <script src="app.js"></script> 

    </body> 
</html>

приложение .js

//Define an angular module for our app 
var sampleApp = angular.module('sampleApp', []); 
sampleApp.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/AddNewOrder', { 
     templateUrl: 'templates/add_order.html', 
     controller: 'AddOrderController' 
    }). 
     when('/ShowOrders', { 
     templateUrl: 'templates/show_orders.html', 
     controller: 'ShowOrdersController' 
     }). 
     otherwise({ 
     redirectTo: '/AddNewOrder' 
     }); 
}]); 


sampleApp.controller('AddOrderController', function($scope) { 

    $scope.message = 'This is Add new order screen'; 

}); 


sampleApp.controller('ShowOrdersController', function($scope) { 

    $scope.message = 'This is Show orders screen'; 

});

add_order.html

<h2>Add New Order</h2> 

{{ message }}a

show_order.html

<h2>Show Orders</h2> 

{{ message }}

я должен быть в состоянии посетить show_order.html или add_order.html всякий раз, нажав на соответствующую ссылку. Однако независимо от того, какую ссылку я нажимаю, на экране появится add_order.html. Я добавил angular-route.min.js, поэтому я не уверен, почему я не могу правильно маршрутизировать. Любая помощь приветствуется.

Благодаря

источник

2015-02-08 Rohan

Ссылка должна быть HREF установлена в #/ShowOrders и #/AddNewOrder:

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

источник

2015-02-08 21:31:55

Пример маршрутизации угловойJS не работает

ответ

Смежные вопросы