带有 templateUrl 的 AngularJS 路由 [英] AngularJS routing with templateUrl
问题描述
我的 AngularJS 路由有问题:我没有收到页面的任何反馈.没有错误或视图切换.
我检查了模块的实现，但它以正确的方式声明.然后我搜索了诸如 templateURL 之类的错别字，但我没有找到.我还尝试在列表中使用 ng-href 而不是 href ，但随后链接不再可点击.
还有我的代码:
创建了我的导航:
<ul><li><a href="#/home">首页</a><li><a href='#/privat'>登录</a><ng-view></ng-view><!--自己的js--><script src="app.js"></script><!--控制器--><script src="ProductCtrl.js"></script><!--服务--><!--指令-->
制作模板:
//home.html<div><h1>主页 </h1>
//private.html<div><h1>私人</h1>
声明一个 Angular 模块:
angular.module('Productportfolio', ['ngRoute'])将 $routeProvider 添加到我的配置中:
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl']).config(['$routeProvider, $locationProvider', function ($routeProvider, $locationProvider) {$routeProvider.when('/家', {templateUrl: 'home.html',控制器:'产品控制'}).when('/私有', {templateUrl: 'private.html',控制器:'产品控制'}).除此以外({重定向到:'/home',控制器:'产品控制'});$locationProvider.hashPrefix('!');}]);在您的 Plunker 中，存在一些与导入相关的问题.为方便起见，我简单地删除了 jQuery 和 Bootstrap.我还将您的所有模块放在一个 app.js 文件中.
您的 html 中存在一些错误:
<头><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 data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"><body ng-app="Productportfolio"><ul><li><a ng-href="#home">家</a><li><a ng-href="#private">私人</a><ng-view></ng-view><!--自己的js--><script src="app.js"></script></html>- 在
ngRoute或任何其他模块之前导入Angular - 使用
ng-href='#routeName'或，否则
在你的 js 中:
var myApp = angular.module('Productportfolio', ['ngRoute']);myApp.controller('ProductCtrl', ['$scope',function ($scope) {var vm = 这个；}]);myApp.config(['$routeProvider', function ($routeProvider) {$routeProvider.when('/家', {templateUrl: 'home.html',控制器:'产品控制'}).when('/私有', {templateUrl: 'private.html',控制器:'产品控制'}).除此以外({重定向到:'/home',控制器:'产品控制'});}]);- 您只需要在应用模块中注入外部模块，而不是所有控制器、服务等
请注意，为了方便起见，我也删除了您的服务，因为您没有分享它并且它很有用.
最后但并非最不重要的一点，如果你想使用 $locationProvider.hashPrefix('!'); 来使用 hashbangs，你需要添加 <base href="/"/> 在 head 的末尾.
出于某种原因，plunker 不允许我这样做，但我相信您会在您的版本上使用它.
此处您可以找到重现您的应用程序的工作 plunker.
希望我有所帮助.
I have a problem with the AngularJS routing: I don't get any feedback of the page. No errors or view-switches.
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.
And my code:
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>Declared a Angular module:
angular.module('Productportfolio', ['ngRoute'])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('!'); }]);
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.
There were some errors in your 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>
- Import
AngularBEFOREngRouteor any other module - Use
ng-href='#routeName'or, otherwise
And in your 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'
});
}]);
- You need to inject only external modules in your app module, not all controller, services etc
Notice that, to make it easy, I removed also your Service since you did not share it and it was useful.
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.
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.
Hope I've been helpful.
这篇关于带有 templateUrl 的 AngularJS 路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
