ngRoute 未更改 HTML。

Question

我正在开发一个使用 angularjs 的应用程序，特别是 ngRoute 模块。现在，我想单击 link 来更改 URL，并加载不同的 HTML 模板。

应该执行此操作的 HTML（存储在名为 nameReminder.html 的文件中）是

<!doctype html>
<html ng-app = "nameReminderApp" ng-controller="MainController">
<head>
    <!--Angular scripts-->
    <link href="./node_modules/angular-material/angular-material.css" rel="stylesheet" />
    <script src="./node_modules/angular/angular.js" type="text/javascript" ></script>
    <script src="./node_modules/angular-animate/angular-animate.js" type="text/javascript" ></script>
    <script src="./node_modules/angular-aria/angular-aria.js" type="text/javascript" ></script>
    <script src="./node_modules/angular-material/angular-material.js" type="text/javascript" ></script>
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script src="node_modules/angular-resource/angular-resource.js"></script>
    <script src="mainController.js"></script>

    <!--Component scripts and stylesheets-->
    <link rel="stylesheet" type="text/css" href="components/login-register/login-register.css">
    <script type="text/javascript" src = "components/login-register/login-registerController.js"></script>
    <script type="text/javascript" src = "components/quiz/quiz-Controller.js"></script>

</head>

<md-button>Hello!</md-button>
<a href="#!/login-register">login</a>
</html>

注意倒数第二行中的 href 标记。当你点击这个标签时，它应该改变 URL 以将 /login-register 添加到当前 URL 的末尾。

mainController中的代码如下

'use strict';

//included theme
var nameReminderApp = angular.module('nameReminderApp', ['ngRoute', 'ngMaterial', 'ngResource']).config(function($mdThemingProvider) {
    $mdThemingProvider.theme('default')
        .primaryPalette('light-green')
        .accentPalette('orange');
});

nameReminderApp.config(['$routeProvider', '$resourceProvider',
    function($routeProvider) {
        $routeProvider.
        when('/login-register', {
            title: 'Login',
            templateUrl: 'components/login-register/login-registerTemplate.html',
            controller: 'LoginRegisterController'
        }).
        when('/quiz', {
            title: 'Login',
            templateUrl: 'components/quiz/quiz-Template.html',
            controller: 'QuizController'
        }).
        otherwise({
            redirectTo: '/quiz'
        });
    }
]);


nameReminderApp.controller('MainController', ['$scope', '$rootScope', '$location', '$routeParams', '$resource', '$http',
    function($scope, $rootScope, $location, $routeParams, $resource, $http) {
        console.log("HERE")
    }]);

然后我有文件 components/login-register/login-registerController.js

'use strict';

nameReminderApp.controller('LoginRegisterController', ['$scope', '$routeParams', '$resource', '$location', '$rootScope',
  function($scope, $routeParams, $resource, $location, $rootScope) {
    console.log("Hello in login");

  }
]);

和 HTML 文件 components/login-register/login-registerTemplate.js 其中包含

<md-button>hello world</md-button>
<p>hello_world</p>

现在发生的事情是 URL 发生了变化，但是 URL 都没有额外的 HTML 加载！它只显示 nameReminder.html 中的 HTML。这里会发生什么？我查看了整个堆栈溢出，我认为我做的一切都是对的。我什至最近做了一个类似的项目，这种技术似乎很管用！我究竟做错了什么？

Answer 1

您应该在 html 主文件中添加 ng-view。并删除 ng-controller="MainController" 因为它是通过你定义 controller: 'oneController' 的路由注入的。

<html ng-app = "nameReminderApp">
  <head>
  </head>
 <md-button>Hello!</md-button>
 <a href="#!/login-register">login</a>
  <div ng-view=""></div>
</html>

Answer 2

我认为您缺少 ng-view 指令。如果没有显示内容的容器，我们怎么看呢？ ;)

angular.module('myApp', ['ngRoute']);

angular.module('myApp')
  .config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.
      when('/login-register', {
        title: 'Login',
        template: '<div><h2>Hello World Login</h2><p>{{ loginCtrl.loginMessage }}</p></div>',
        controller: 'LoginRegisterController',
        controllerAs: 'loginCtrl'
      }).
      when('/quiz', {
        title: 'Login',
        template: '<div><h2>Hello World Quiz</h2><p>{{ quizCtrl.quizMessage }}</p></div>',
        controller: 'QuizController',
        controllerAs: 'quizCtrl'
      }).
      otherwise({
        redirectTo: '/quiz'
      });
    }
  ]);

angular.module('myApp')
  .controller('LoginRegisterController', LoginRegisterController)

function LoginRegisterController() {
  var vm = this;
  vm.loginMessage = 'Login Ctrl';
}

angular.module('myApp')
  .controller('QuizController', QuizController)

function QuizController() {
  var vm = this;
  vm.quizMessage = 'Quiz Ctrl';
}

<!DOCTYPE html>
<html ng-app="myApp">

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

<body>
  <h1>Hello there!</h1>
  <a href="#!/login-register">To login</a>
  <a href="#!/quiz">To Quiz</a>
  <a href="#!/not-defined-url">Invalid redirects to quiz</a>
  <div ng-view></div>
</body>

</html>

ngRoute 未更改 HTML。

ngRoute not changing HTML.

html

javascript

angularjs

ngroute