Question

我的项目结构如下：

我尝试使用this图片创建单页应用程序。当 index.html 页面启动时，默认情况下会在ng-view中加载 registration.html 。但是当 index.html 加载时，它不会按预期加载 registration.html 作为ng-view。

我的 index.html ， main.css 和 mainAppRouter.js 的文件如下：

//mainAppRouter.js

(function () {
    var myModule = angular.module('studentInfo', ['ngRoute']);
    myModule.config(function ($routeProvider) {
        $routeProvider
            .when('/registration', {
                templateUrl : '../views/registration.html',
                controller: 'regController'
            })
            .otherwise({
                redirectTo: '/registration'
            });
        
        console.log("checking");
    });

    myModule.controller('regController', function ($scope) {
        $scope.message = 'This is Add new order screen';
        console.log("checking");
    });

});

/*man.css*/

.studentInfo{
    margin-top: 100px;
}

.navbar{
    padding: 1em;
}

.navbar-brand {
  padding:0;
}

<!--index.html-->

<!DOCTYPE html>
<html data-ng-app="studentInfo">

<head>
    <script src="lib/js/angular.min.js"></script>
    <script src="lib/js/jquery-3.0.0.min.js"></script>
    <script src="lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="lib/js/angular-route.js"></script>
    <script src="app/route/mainAppRouter.js"></script>
    <link rel="stylesheet" href="lib/css/bootstrap.css" />
    <link rel="stylesheet" href="lib/css/bootstrap-theme.css" />
    <link rel="stylesheet" href="app/css/main.css" />
    <title>A demo Angular JS app</title>
</head>

<body>
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"> <span><img src="app/images/people.png"/></span> Student Info </a>
            </div>
            <ul class="nav nav-pills navbar-right" data-ng-controller="NavbarController">
                <li role="presentation"><a href="#/registration">Registration</a></li>
                <li role="presentation"><a href="#/student">Student Details</a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="col-md-4 col-md-offset-4" data-ng-controller="regController">
            <h1>Student Info</h1>
        </div>
        <div ng-view></div>
    </div>
</body>

</html>

我的所有代码都在此github repo

中

我该怎么做才能纠正我的问题？

Answer 1

我认为问题是因为您没有为ng-view指定任何控制器，而且还必须正确设置基本URL。

 $routeProvider
            .when('/registration', {
              templateUrl :'http://localhost/StudentInfo/app/views/registration.html',
                controller: 'regController'
            })

从HTML中删除控制器标记。您的控制器标记超出了ng-view的范围。

  <div class="container">
        <div class="col-md-4 col-md-offset-4" >
            <h1>Student Info</h1>
        </div>
        <div ng-view></div>
    </div>

您的控制器中也存在语法错误

myModule.controller('regController', function ($scope){
    $scope.message = 'This is Add new order screen';
})

更新的答案：这不起作用的另一个原因是您在文件系统上运行示例（使用file：//协议），许多浏览器（Chrome，Opera）限制XHR使用file：//协议时调用。 AngularJS模板通过XHR下载，结合使用file：//协议会导致您获得错误。

有关详情：Couldn't load template using templateUrl in Angularjs

AngularJS Route未加载视图

1 个答案: