Question

我在路由到关于页面时遇到错误。主页正在加载成功。我是棱角分明的新手。请帮我成功完成。这是代码链接

enter code here Plunker Link

在这里找到代码的的index.html

  <!DOCTYPE html> 

  <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">

    </head>
    <body ng-app="demo">
    <div ng-view></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>


    <script src="js/main.js"></script>

    </body>
    </html>

的js

//代码在这里

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

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        when('/', {
            templateUrl: 'partials/home.html',
            controller: 'homeController'
        }).
        when('/about', {
            templateUrl: 'partials/about.html',
            controller: 'aboutController'
        }).
        otherwise({
            redirectTo: 'partials/404.html'
        });
    }
]);

app.controller('mainController', function() {});

app.controller('homeController', function($scope, $http, $location){
 $scope.login= function() {

        $location.path("/home");


    }
});

app.controller('aboutController', function($scope, $http) {
    $scope.about= function() {

        $location.path("/about");


    }
});

Answer 1

将您的推荐内容更正为<script src="main.js"></script>并创建partial/home.html。它会工作。

尝试使用浏览器开发者工具（F12），它将帮助您找到实际错误。

Answer 2

您的plunker有几个问题。

您没有在您的plunker版本中创建部分内容。您需要创建文件partials / about.html和partials / home.html。
css / main.css。您已在根文件夹中创建了style.css，但在index.html中引用了css / main.css。 3. main.js的路径是错误的。该文件位于根文件夹中，您将其称为js / main.js。请将其称为<script src="main.js"></script>
你必须从局部调用路线。
您已在aboutController中创建了about方法。但是，它应该在家庭控制器中。关于控制器只有在您路由到about.html页面时才会被实例化。
您推荐了一个网址＆＃39; / home＆＃39;这在main.js中没有定义。

请找到以下工作的plunker。

https://plnkr.co/edit/APKWvpuTfivua5CovRp7?p=preview

// Code goes here

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

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        when('/', {
            templateUrl: 'home.html',
            controller: 'homeController'
        }).
        when('/about', {
            templateUrl: 'about.html',
            controller: 'aboutController'
        }).
        when('/login', {
            templateUrl: 'login.html',
            controller: 'loginController'
        }).
        otherwise({
            redirectTo: 'partials/404.html'
        });
    }
]);


app.controller('homeController', function($scope, $http, $location){
 $scope.login= function() {
        $location.path("/login");

    }
    $scope.about= function() {
        $location.path("/about");

    }
});

app.controller('aboutController', function($scope, $http) {
    $scope.backToHome = function() {
     window.history.back();
    }
});
app.controller('loginController', function($scope, $http) {
    $scope.backToHome = function() {
     window.history.back();
    }
});

的index.html：

<!DOCTYPE html> 
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body ng-app="demo">
<div ng-view></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>

<script src="main.js"></script>

</body>
</html>

在angular1中路由错误

2 个答案: