Question

    <head>
    <script src=jquery.js></script> 
    <script src=bootstrap.js></script> 

    <script src=angular.js></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
    <link rel=stylesheet type="text/css" href=bootstrap.css /> 
    <link rel=stylesheet type=text/css href=mystyle.css /> 

    <style>
        #panel{margin:20px;}
        #addNew{margin:10px;}
        #pagination{text-align:center;}
        span{background:#aaa;width:60px;width:60px;}
    </style> 

</head>

<body ng-app="myApp">

    <div ng-controller=myController> 

         <div id=panel class="panel panel-primary"> 
            <div class="panel-heading">Hero Selection Bar</div>
            <div class="panel-body">
                <a href="#/one">Page 1</a>
                <a href="#/two">Page 2</a>
                <a href="#/three">Page 3</a>

                <ng-view > </ng-view> 

            </div>
        </div> 
    </div> 


    <script>
    var app = angular.module('myApp',['ngRoute']);

    app.controller('myController', function( $scope, $routeProvider){
        $scope.somedata = "THAT"; 
    });

    app.config([$routeProvider],function($routeProvider){
        $routeProvider
        .when('#/one',  {templateUrl:"templates/one.html"})
        .when('#/two',  {templateUrl:"templates/two.html"})
        .when('#/three',    {templateUrl:"templates/three.html"})
    });  

    </script>
</body>

我将文件保存在'templates folder'中的templates / one.html，templates / two.html和templates / three.html上，但我无法在当前的angularjs页面中加载页面。有人可以帮助我让路线加载所需的页面。

Answer 1

你做错了几件事： -

1）#inin不需要时应该像.when('/one', {templateUrl:"templates/one.html"})等。

2）数组表示法必须在结尾处['$routeProvider']不正确

应该是这样的： -

app.config(['$routeProvider',function($routeProvider){
        $routeProvider
        .when('/one',  {templateUrl:"one.html"})
        .when('/two',  {templateUrl:"two.html"})
        .when('/three',    {templateUrl:"three.html"}).otherwise({redirectTo:'/one'})
    }]);

3）$routeProvider在控制器使用$route中不需要。

4）我想否则也需要它（它是可选的）。

Plunker

Answer 2

您添加了[$routeProvider]，其]应该是依赖关系的一部分。

<强>配置

  app.config([$routeProvider,function($routeProvider){
        $routeProvider
        .when('/one',  {templateUrl:"templates/one.html"})
        .when('/two',  {templateUrl:"templates/two.html"})
        .when('/three',    {templateUrl:"templates/three.html"})
    }]);

在内部控制器中，您无法注入$routeProvider

的$route依赖关系

Answer 3

 app.config([$routeProvider],function($routeProvider){
    $routeProvider
    .when('/one',  {templateUrl:"templates/one.html"})
    .when('/two',  {templateUrl:"templates/two.html"})
    .when('/three',    {templateUrl:"templates/three.html"})
});

路由器未在ng视图中加载的页面

3 个答案: