Question

编辑：解决了问题，似乎Angular使用的'＃'字符导致了问题。这是正确的。

WiRo回答后编辑

（我为我的http服务器使用grunt）

app.js

require('angular/angular.min');
require('./angular-material.min')
require('angular-route/angular-route.min');
var listController = require('./controllers/listcontroller.js');
var authController = require('./controllers/authcontroller.js');
// Create your app
var app = angular.module("advjavascript", ["ngRoute"]);

app.controller('ListController', listController);  
app.controller('AuthController', authController); 

app.config([
    '$routeProvider',
    function($routeProvider) {
        $routeProvider
        .when('/auth', {
            templateUrl: 'pages/auth.html',  
            controller: 'AuthController',
            controllerAs: 'auth'
        })
        .when('/', {
            templateUrl: 'pages/home.html',  
            controller: 'ListController',
            controllerAs: 'list'
        })
        .otherwise({
                redirectTo: '/',
                controller: 'listController',
                controllerAs: 'list'
        });


    }
]);

authcontroller.js

module.exports = function($scope, $routeParams){
var vm = this;           

alert("this"); 

vm.username = $routeParams.username;
    vm.token = $routeParams.token;
    console.log("This token: " + vm.token);
    vm.data = {
        token: vm.token,
        username: vm.username
    };
};

listcontroller.js

module.exports = function($scope, $routeParams){
  var vm = this;  
   vm.data = {
      username: ""
  };

   console.log(vm.data.username);
};

信息页/ auth.html

    <h1>Logged in!</h1>
    <p>Your username is {{auth.data.username}}</p>
    <a href="http://localhost:3000/">Back to page</a>

信息页/ home.html做为

<h1>Hello World</h1>
<p>Your username is {{list.data.username}}</p>
<a href="http://mahjongmayhem.herokuapp.com/auth/avans?callbackUrl=http://localhost:3000/%23/auth">log in</a>

的index.html

<html lang="en" ng-app="advjavascript">
 <head>
   <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/angular-material.min.css"/>

    <title>AdvJavascript</title>
 </head>
 <body>
    <div ng-view></div>
   <script src="js/app.js"></script>
 </body>

</html>

我有回复http://localhost:3000/auth?username=secret&token=secret

它没有路由到auth.html，它甚至没有路由到index.html（默认页面）

任何人都知道发生了什么事？

结果如下：

auth route

normal route

Answer 1

有几件事要修改（见评论）：
的路由：

app.config([ '$routeProvider', function($routeProvider) { $routeProvider .when('/auth', { // you used '/pages/auth.html' which may route to the wrong directory templateUrl: 'pages/auth.html', controller: 'authController', // add this if you want to use controllerAs as in your example controllerAs: 'auth' }) .otherwise({ redirectTo: '/' }); } ]);

<强>控制器
确保不要使用$scope和controllerAs：
混合使用
module.exports = function($scope, $routeParams){ var vm = this; alert("this"); // Changing $scope to vm will bind your variables to the controller, // this is what you need to do when using controllerAs vm.username = $routeParams.username; vm.token = $routeParams.token; console.log("This token: " + vm.token); vm.data = { token: vm.token, username: vm.username }; };

您可能想要使用ng-view：
的的index.html ：

<html lang="en" ng-app="advjavascript"> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" href="../css/main.css"/> <link rel="stylesheet" href="../css/angular-material.min.css"/> <title>Home</title> </head> <body> <div ng-view></div> </body> </html>

<强> auth.html
只要您的路线更改为ng-view div-element，auth.html就会被'/auth'包含在authController中。 Angularjs还会自动将<h1>Logged in!</h1> <p>Your username is {{auth.data.username}}</p> <a href="http://localhost:3000/">Back to page</a>分配给此视图。

creationDate

AngularJS routeProvider无法正常工作

1 个答案: