AngularJS路线不加载视图

我的项目的结构是这样的：AngularJS路线不加载视图

我试图让使用this图像的单页的应用程序。当index.html页面启动时，它将默认在ng-view中加载registration.html。但是，当加载index.html时，它不会像预期的那样加载ng-view registration.html。

而且我对的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

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

来源

2017-06-17 Pial Kanti

什么显示在控制台？ –

对不起。我不明白。为什么会在控制台中显示任何内容？ –

我的意思是你有任何显示在控制台上的错误。 –

我认为这个问题是因为你没有为你的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）在使用file：//协议时限制XHR调用。 AngularJS模板是通过XHR下载的，这与使用file：//协议相结合会导致错误。

欲了解更多详情：Couldn't load template using templateUrl in Angularjs

来源

2017-06-17 10:52:28 Vivz

我试过这个。与以前相同的结果。 –

你可以在你的regController中放置一个控制台，并检查控制器是否正在加载。 – Vivz

我已经更新了我的答案，但你似乎仍然缺少一个模块。这就是为什么注射模块错误即将到来 – Vivz

AngularJS路线不加载视图

回答

相关问题