Question

我试图理解$routeProvider机制在AngularJS中是如何工作的，所以我设置了一个简单的应用程序来测试配置它的不同方法。但问题是简单的应用程序显然没有编译，因此用户无法在路径之间查看和导航。 需要对the code at this plnkr进行哪些具体更改才能使简单的应用编译以便用户能够在路线之间导航？

代码也放在这里：

index.html是：

<!DOCTYPE html>
<html>

  <head>
    <base href="/" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <link href="style.css" rel="stylesheet"/>
    <style type="text/css">
    [ng\:cloak], [ng-cloak], .ng-cloak { display: none !important; }
    </style>
  </head>

  <body class="ng-cloak" ng-cloak="" ng-app="hello">
    <div class="container" ng-controller="navigation">
      <ul role="tablist" class="nav nav-pills">
        <li ng-class="{active:tab('home')}">
          <a href="/">home</a>
        </li>
        <li ng-class="{active:tab('someroute')}">
          <a href="/someroute">some route</a>
        </li>
      </ul>
    </div>
    <div class="container" ng-view=""></div>
    <script type="text/javascript" src="home.js"></script>
    <script type="text/javascript" src="someroute.js"></script>
    <script type="text/javascript" src="navigation.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

script.js是：

var hello = angular.module('hello', [ 'ngRoute', 'home', 'someroute', 'navigation' ])
    .config(

            function($routeProvider, $httpProvider, $locationProvider) {

                $locationProvider.html5Mode(true);

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

                $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

            }
    )

navigation.js是：

angular.module('navigation', ['ngRoute']).controller('navigation', function($scope, $route, $http, $routeParams, $location) {

    $scope.tab = function(route) {
        return $route.current && route === $route.current.controller;
    };

});

home.js是：

angular.module('home', []).controller('home', function($scope, $http) {

});

home.html是：

<h1>Welcome</h1>
<div>
    <p>This is the main page!</p>
</div>

someroute.js是：

angular.module('someroute', []).controller('someroute', function($scope, $http) {

});

someroute.html是：

<h1>Some Route</h1>
<div>
    <p>You clicked on some route!</p>
</div>

为什么在AngularJS中没有加载路由

0 个答案: