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

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/one.html、templates/two.html 和 templates/three.html 中 'templates folder' 但我无法在当前 angularjs 页面中加载页面。有人可以帮我让路线加载所需的页面。

Answer 1

您添加了 [$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 2

有几件事你做错了：-

1)#在不需要的时候应该像.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) 我想用 otherwise 它也是必需的（它是可选的）。

Plunker

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

The pages not loading in ng view by Routers

routing

angularjs

angularjs-routing