Ame*_*ves 8 angularjs angular-routing
我对AngularJS路由有问题:我没有得到任何页面反馈.没有错误或视图切换.
我检查了模块的实现,但它以正确的方式声明.然后我搜索了这样的拼写错误templateURL,但我没有找到任何错字.我也尝试使用ng-href而不是href在列表中,但随后链接不再可点击.
我的代码:
创建了我的导航:
<body ng-app="Productportfolio">
<ul>
<li>
<a href="#/home">Home</a>
</li>
<li>
<a href='#/privat'>Log in</a>
</li>
</ul>
<ng-view></ng-view>
<!--own js -->
<script src="app.js"></script>
<!--Controller -->
<script src="ProductCtrl.js"></script>
<!--Services -->
<!--Direktives-->
</body>
制作模板:
//home.html
<div>
<h1> Home </h1>
</div>
//private.html
<div>
<h1> Private</h1>
</div>
声明了一个Angular模块:
angular.module('Productportfolio', ['ngRoute'])
在我的配置中添加了$ routeProvider:
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider, $locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
$locationProvider.hashPrefix('!');
}]);
在您的Plunker中,存在一些与进口相关的问题.为了方便起见,我简单地删除了jQuery和Bootstrap.我还将所有模块放在一个app.js文件中.
你的html中有一些错误:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!--AngularJS-->
<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
</head>
<body ng-app="Productportfolio">
<ul>
<li>
<a ng-href="#home">Home</a>
</li>
<li>
<a ng-href="#private">Private</a>
</li>
</ul>
<ng-view></ng-view>
<!--own js -->
<script src="app.js"></script>
</body>
</html>
AngularBEFORE ngRoute或任何其他模块ng-href='#routeName'或,否则在你的js:
var myApp = angular.module('Productportfolio', ['ngRoute']);
myApp.controller('ProductCtrl', ['$scope',function ($scope) {
var vm = this;
}]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
}]);
请注意,为了方便起见,我还删除了您的服务,因为您没有共享它并且它很有用.
最后但并非最不重要的是,如果您想$locationProvider.hashPrefix('!');使用hashbangs,您需要<base href="/" />在最后添加head.
出于某种原因,plunker不允许我这样做,但我相信你会让它在你的版本上工作.
在这里您可以找到复制您的应用程序的工作plunker.
希望我一直很有帮助.
| 归档时间： |
|
| 查看次数： |
6212 次 |
| 最近记录： |