AngularJS routeProvider 不工作
AngularJS routeProvider doesn't work
我在尝试使用 $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
,当我加载页面时它没有显示。
当我尝试 /dashboard 时 returns 我 Cannot GET /dashboard
.
我看不出哪里出了问题希望你能帮助我!
谢谢。
您缺少带有 ng-view 指令的标记。
2 件事,首先你需要 ng-view 来渲染视图
<div ng-view=""></div>
其次,如果你得到 "Cannot GET /dashboard" 是因为在 angular 中路由在哈希中,例如:
yourdomain.com/#/dashboard,而不是 您的域。com/dashboard。所以这里有一个 link 如果你想去仪表板:
<a ng-href="#/dashboard">Dashboard</a>
我遇到了类似的问题,花了我几天的时间进行搜索。 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>
我在尝试使用 $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
,当我加载页面时它没有显示。
当我尝试 /dashboard 时 returns 我 Cannot GET /dashboard
.
我看不出哪里出了问题希望你能帮助我!
谢谢。
您缺少带有 ng-view 指令的标记。
2 件事,首先你需要 ng-view 来渲染视图
<div ng-view=""></div>
其次,如果你得到 "Cannot GET /dashboard" 是因为在 angular 中路由在哈希中,例如:
yourdomain.com/#/dashboard,而不是 您的域。com/dashboard。所以这里有一个 link 如果你想去仪表板:
<a ng-href="#/dashboard">Dashboard</a>
我遇到了类似的问题,花了我几天的时间进行搜索。 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>