我是AngularJS的初学者,并试图建立我的第一个SPA。我创建了几页的路线,并在导航栏中指定了链接。索引文件是
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/"><img src="images/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#/aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a href="#/menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a href="#/contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
`
routeProvider代码是,
angular.module('confusionApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
// route for the contactus page
.when('/contactus', {
templateUrl : 'contactus.html',
controller : 'ContactController'
})
// route for the menu page
.when('/menu', {
templateUrl : 'menu.html',
controller : 'MenuController'
})
// route for the dish details page
.when('/menu/:id', {
templateUrl : 'dishdetail.html',
controller : 'DishDetailController'
})
.otherwise({
redirectTo: '/menu'
});
});
我一直在使用gulp加载预览。当我加载页面并单击链接时,我无法更改页面上的模板。我试过寻找一些答案,却找不到答案。有人可以帮我解决这个问题吗?当我点击链接时,URL显示为 But isn't it supposed to be "index.html#/contactus"
但是,我尝试手动更改网址(index.html#!/ menu),它运行正常。但问题是我不明白为什么在网址中有!/。任何帮助将不胜感激。
答案 0 :(得分:2)
查看此工作演示:
var app = angular.module('Routing', []);
app
.controller('HomeController', function ($scope) {});
app
.controller('AboutController', function ($scope) {});
app
.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
}).
when('/aboutus', {
templateUrl: 'about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Routing">
<script type="text/ng-template" id="home.html">
<h1> Home </h1>
</script>
<script type="text/ng-template" id="about.html">
<h1> About </h1>
</script>
<div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#/home"> Home</a></li>
<li><a href="#/aboutus">About</a></li>
</ul>
</div>
<div ng-view></div>
</div>
</div>
答案 1 :(得分:0)
试试这个。 index.html中应该有http://itunes.apple.com/app/idXXXXXXXXX
ng-view