AngularJS routeProvider 不工作答案

【问题标题】：AngularJS routeProvider not workingAngularJS routeProvider 不工作
【发布时间】：2016-04-23 10:43:11
【问题描述】：

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

在 WiRo 回答后编辑

（我的 http-server 使用 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);
};

pages/auth.html

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

pages/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

【问题讨论】：

标签： angularjs gruntjs ngroute route-provider

【解决方案1】：

有几处需要修改（参见 cmets）：
路由：

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
只要您的路线更改为'/auth'， angularjs 就会将auth.html 包含在ng-view div-element 中。 Angularjs 也会自动将authController 分配给这个视图。

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

【讨论】：

你能看看我的编辑吗？非常感谢您的帮助！
尝试将锚点中的链接更改为`
“锚点”是什么意思，我应该把它们改成什么？
将<a href="http://localhost:3000/">返回页面`改为<a href="#/home>Back to page</a>
我做到了，但它没有解决路由问题。我在控制台中没有收到任何反馈，而且 html 中似乎没有结果。 authcontroller 中的 Alert() 也不会关闭。 :(