AngularJS routeProvider不起作用

时间:2015-05-28 14:03:13

标签: angularjs url-redirection route-provider

当我尝试使用$ routeProvider时遇到问题。 它根本不起作用,我没有看到任何问题:

var app = angular.module('app', ['ngStorage','ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: '/index.html',
            controller: 'authCtrl'
        })
        .when('/dashboard', {
            templateUrl: '/tpl/dashboard.html',
            controller: 'mainCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

这是index.html:

<html>
  <head>
    <title>Authenticate | BulbThings</title>
    <script src="angular/angular.min.js"></script>
    <script src="angular/ngStorage.min.js"></script>
    <script src="angular/angular-route.min.js"></script>
    <script src="js/build/app.min.js"></script>
  </head>
  <body ng-app="app">
    <div ng-show="authenticate">
      <span ng-cloak ng-show="addr" id="address">{{address}}</span>
      <input type="mail" ng-model="email" placeholder="Email"><br />
      <input type="password" ng-model="password" placeholder="Password"><br />
      <button ng-click="auth.connect(email, password)" ng-model="signin">Sign in</button><br/><br/>
    </div>
    <p>{{error}}</p>
  </body>
</html>

我在控制器中设置了$scope.authenticate = true,当我加载页面时,它没有显示出来。

当我尝试/仪表板时,它会返回Cannot GET /dashboard

我看不出有什么问题我希望你能帮助我!

谢谢。

3 个答案:

答案 0 :(得分:3)

2件事,首先你需要ng-view来渲染视图

<div ng-view=""></div>

第二,如果你得到&#34;不能获得/仪表板&#34;是因为在角度中路由在哈希中,例如:

yourdomain.com /#/ dashboard ,而非 yourdomain.com/dashboard 。所以,如果你想要转到仪表板,你可以在这里找到一个链接:

<a ng-href="#/dashboard">Dashboard</a>

答案 1 :(得分:0)

You are missing tag with ng-view directive.

答案 2 :(得分:0)

我遇到了类似的问题,花了我几天的搜索时间。 href错误,无法使其与“ #home”或“ home”一起使用

这是我的工作代码:

<html ng-app="app">

<head>
    <script src="js/angular.js"></script>
    <script src="js/angular-route.js"></script>
    <title>Testing</title>
</head>

<body>
<a href="#!/home">home</a>
<a href="#!/about">about</a>

<div ng-view="">
</div>


<script>
    var app = angular.module('app', ['ngRoute'])
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
                .when('/home', {
                    templateUrl: 'views/home.html'
                })
                .when('/about', {
                    templateUrl: 'views/about.html'
                })


    }]);
</script>