AngularJs路由没有错误但不工作答案

【问题标题】：AngularJs route no error but not workingAngularJs路由没有错误但不工作
【发布时间】：2017-10-02 15:21:22
【问题描述】：

我正在创建一个使用路由的演示应用程序。即使控制台没有错误，我也看不到我的内容。这里可能有什么问题。我创建了两个具有不同内容的单独 html 文件

<html>

        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
            <script src = "js/junk.js"></script>
        </head>

        <body ng-app="junkapp">
            <div ng-controller = "junkController">
                <ul>
                    <li><a href="#/">Home</a></li>
                    <li><a href="#/first">First</a></li>
                    <li><a href="#/second">Second</a></li>
                </ul>
                <div ng-view>
                </div>
            </div>
        </body>
    </html>

    var app = angular.module("junkapp", ['ngRoute']);

app.controller("junkController", function($scope){

    app.config(function($routeProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'junk.html',
            })

            // route for the about page
            .when('/first', {
                templateUrl : 'first.html',
            })

            // route for the contact page
            .when('/second', {
                templateUrl : 'second.html',
            });
    });
});

【问题讨论】：

标签： javascript angularjs ngroute

【解决方案1】：

config 不应该在控制器之下。

我们不能在控制器或服务中定义路由，因为配置需要在注入到我们的任何东西之前进行想要使用它。我们对配置中的提供者所做的任何配置函数将允许我们访问这些预配置的实例注入时提供程序。

var app = angular.module('junkapp',['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl : "home.html"
        }).

        when('/first', {
            template : "<p>Hi First</p>"
        }).

        when('/second', {
            template : "<p>Hi second</p>"
        });
});

app.controller("junkController", function($scope){
    $scope.text = "Welcome";     
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script type="text/ng-template" id="home.html">
<p>Hi Home</p>
</script>
    <body ng-app="junkapp">
        <div ng-controller = "junkController">
            <ul>
                <li><a href="#/">Home</a></li>
                <li><a href="#/first">First</a></li>
                <li><a href="#/second">Second</a></li>
            </ul>
            <div ng-view>
            </div>
        </div>
    </body>

【讨论】：

【解决方案2】：

将配置移出控制器。

演示

var app = angular.module("junkapp", ['ngRoute']);
app.controller("junkController", function($scope){

  
});
  app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                template : "<h1>Main</h1><p>Click on the links to change this content</p>"
            })

            .when('/first', {
                template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
            })

            .when('/second', {
                template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
            });
    });

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
 <body ng-app="junkapp">
        <div ng-controller = "junkController">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#first">First</a></li>
                <li><a href="#second">Second</a></li>
            </ul>
            <div ng-view>
            </div>
        </div>
  </body>

【讨论】：

对我来说很奇怪......我已经复制粘贴了你的代码，但我仍然在我的浏览器中看不到任何东西。但它在代码 sn-p 中运行
你的js文件被加载了吗？
是的 js 文件已加载。它适用于模板，但不适用于 templateurl
@AdityaKumar 检查你的 templateUrls 是否正常
app.config(function($routeProvider) { $routeProvider // 主页路由 .when('/', { templateUrl : 'junk.html', }) // 路由about page .when('/first', { templateUrl : 'first.html', }) // 联系人页面的路由 .when('/second', { templateUrl : 'second.html', }); }) ;

【解决方案3】：

app.config 代码不应写在控制器中。将其移出控制器即可使用：

var app = angular.module("junkapp", ['ngRoute']);
 
app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            template : "<h1>Main</h1><p>Click on the links to change this content</p>"
        })
        .when('/first', {
            template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
        })
        .when('/second', {
            template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
        });
});

app.controller("junkController", function($scope) {
             
});

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

<body ng-app="junkapp">
    <div ng-controller = "junkController">
        <ul>
            <li><a href="#/">Home</a></li>
            <li><a href="#/first">First</a></li>
            <li><a href="#/second">Second</a></li>
        </ul>
        <div ng-view> </div>
    </div>
</body>

【讨论】：

Naah.. 我仍然看不到页面中的任何内容
@AdityaKumar 我添加了一个 sn-p，如您所见，它有效！
适用于模板但不适用于 templateurl
@AdityaKumar 您的 app.js 是否与模板位于同一目录中（例如：junk.html）？
是的..问题出在网址上。

【解决方案4】：

在控制器外设置配置。

  var app = angular.module("junkapp", ['ngRoute']);
  app.config(function($routeProvider) {
     $routeProvider
    .when('/', {
        templateUrl : 'junk.html',
    })

    // route for the about page
    .when('/first', {
        templateUrl : 'first.html',
    })

    // route for the contact page
    .when('/second', {
        templateUrl : 'second.html',
    });
});
app.controller("junkController", function($scope){

});

【讨论】：