Angularjs 路由不工作，视图不渲染

Question

出于某种原因，我的 angularjs 路由无法正常工作。单击 link 时视图未呈现。我在控制台中没有看到任何错误。

这是我的设置

    (function(){
        var app = angular.module('myapp',[
            'ngRoute',
            //'quizcontrollers'
        ]);

        app.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/questions', {
             controller: 'quizcontroller',
             templateUrl: 'questions.html'

            })
          // .when('/quiz/', {
          //   templateUrl: 'partials/phone-detail.html',
          //   controller: 'PhoneDetailCtrl'
          // }).
          .otherwise({
            redirectTo: '/'
             });
         }]);
  }());

quiz.js

 (function(){
      var app = angular.module("myapp",[]);
      app.controller  ("quizcontroller",function($scope,$http,$location,$window){
        $scope.message ="hello"
       })
   }())

添加-quiz.php

    <html ng-app="myapp">
    <head></head>
      <body>
       <a href="#/questions">Test</a>
      <div data-ng-view=""></div>

      <script src="/path/backend/web/assets/js/angular/angular.js">     </script>
      <script src="/path/backend/web/assets/js/angular/angular-route.js">     </script>
      <script src="/path/backend/web/assets/js/angular/app.js"></script>
      <script src="/path/backend/web/assets/js/angular/app-config.js"></script>
      <script src="/teachsity/backend/web/assets/js/angular/filters/range.js"></script>
      <script src="/path/backend/web/assets/js/angular/controllers/quiz.js"></script>
     </body>
   </html>

question.html 文件与 app.js 在同一目录中。

Answer 1

您声明模块两次从控制器声明中删除。

<html ng-app="myapp">
    <head></head>

    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>

        <a href="#/questions">Test</a>
        <div ng-view></div>

    </body>
</html>

<script type="text/javascript">
(function()
{
        var app = angular.module('myapp',['ngRoute']);

        app.config(['$routeProvider',
        function($routeProvider) 
        {
            $routeProvider

            .when('/', 
            {
                templateUrl : 'questions.html'
            })

            .when('/questions', 
            {
                controller: 'quizcontroller',
                templateUrl: 'questions.html'
            })
            .otherwise(
            {
                redirectTo: '/'
            });
        }]);

        app.controller  ("quizcontroller",function($scope,$http,$location,$window)
        {
            $scope.message ="hello"
        })
}())
</script>

Answer 2

这背后的原因是因为您的 $routeProvider 假定 questions.html 与您的 add-quiz.php 具有相同的路径。所以你必须将您的 templateUrl 从

更改为

$routeProvider.
          when('/questions', {
             controller: 'quizcontroller',
             templateUrl: 'questions.html'

            })

至

$routeProvider.
              when('/questions', {
                 controller: 'quizcontroller',
                 templateUrl: '/path/backend/web/assets/js/angular/questions.html'

                })

Angularjs 路由不工作，视图不渲染

Angularjs Routing Not working, the view is not rendering

angularjs

angular-routing