使用templateUrl进行AngularJS路由 [英] AngularJS routing with templateUrl
问题描述
我对AngularJS路由有问题:我没有得到页面的任何反馈.没有错误或视图切换.
I have a problem with the AngularJS routing: I don't get any feedback of the page. No errors or view-switches.
我检查了模块的实现，但是以正确的方式声明了它.然后，我搜索了诸如templateURL的拼写错误，但没有找到任何错别字.我还尝试在列表中使用ng-href代替href，但是链接不再可单击.
I checked my implementation of the module, but it's declared in the right way. Then I searched for typos such as templateURL, but I didn't find any. I also tried to use ng-href instead of href in the list, but then the links weren't clickable anymore.
还有我的代码:
-
创建了我的导航:
Created my navigation:
<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>
-
制作模板:
Made the templates:
//home.html
<div>
<h1> Home </h1>
</div>
//private.html
<div>
<h1> Private</h1>
</div>
声明了一个Angular模块:
Declared a Angular module:
angular.module('Productportfolio', ['ngRoute'])
将$ routeProvider添加到我的配置中:
Added the $routeProvider to my config:
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 文件中.
In your Plunker, there were some issues related to imports. To make it easy, I simply removed both jQuery and Bootstrap. I also put all your modules in a single app.js file.
您的 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>
- 在
ngRoute或任何其他模块之前导入Angular - 使用
ng-href='#routeName'或其他方式 - Import
AngularBEFOREngRouteor any other module - Use
ng-href='#routeName'or, otherwise
在您的 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'
});
}]);
- 您只需在应用模块中注入外部模块，而无需注入所有控制器，服务等
请注意，为简便起见，我还删除了您的服务，因为您没有共享它，这很有用.
Notice that, to make it easy, I removed also your Service since you did not share it and it was useful.
最后但并非最不重要的一点是，如果要使用$locationProvider.hashPrefix('!');来使用hashbangs，则需要在head的末尾添加<base href="/" />.
Last but not least, if you want to use $locationProvider.hashPrefix('!'); to use hashbangs, you need to add <base href="/" /> at the end of your head.
出于某种原因，punker不允许我这样做，但是我敢肯定您会在您的版本上使用它.
For some reason, plunker does not allow me to do that, but I'm sure you'll get it to work on your version.
在这里，您可以找到正在工作的，正在复制您的应用程序的监听器.
Here You can find the working plunker reproducing your application.
希望我有帮助.
这篇关于使用templateUrl进行AngularJS路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
