我对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文件中.
原文链接:https://www.f2er.com/angularjs/142050.html你的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>
>导入角度BEFORE 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 =“/”/>在你的头脑中.
出于某种原因,plunker不允许我这样做,但我相信你会让它在你的版本上工作.
Here您可以找到复制您的应用程序的工作plunker.
希望我一直很有帮助.