我正在使用angularjs开发应用程序,特别是ngRoute模块。现在,我想单击链接以更改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文件
组件/登录注册/login-registerTemplate.js
其中包含

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


现在发生的是URL发生了变化,但是任何一个URL都没有额外的HTML加载!它只是在nameReminder.html中显示HTML。这可能是怎么回事?我到处都是堆栈溢出,我认为我做的一切都正确。我什至最近也做了一个类似的项目,这种技术似乎行得通!我究竟做错了什么?

最佳答案

我认为您缺少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>

07-24 09:43
查看更多