我正在MobileAngularUI中创建一个新项目,之前是从Ionic项目背景创建的。我使用模板URL从一个页面导航到另一个页面时遇到一些困难,而我的控制器也没有绑定。我最终定义了所有可能性和类路径,但它不是导航到另一个HTML控制器。
以下是我项目的来源。
在app.js
angular.module('FirstMobileAngularRouter', [
'ngRoute',
'mobile-angular-ui',
'FirstMobileAngularRouter.controllers.Main',
'FirstMobileAngularRouter.controllers.Calender'
])
.config(function($routeProvider) {
//$routeProvider.when('/', {templateUrl:'home.html', reloadOnSearch: false});
$routeProvider
.when('/', {templateUrl:'home.html', reloadOnSearch: false})
.when('/calender',
{ templateUrl:'/calender.html',
controller: 'CalenderCtrl',
reloadOnSearch: false
})
.otherwise({redirectTo: '/'});
});
侧边栏HTML
<div class="scrollable">
<h1 class="scrollable-header app-name">FirstMobileAngularRouter</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="#/">Home <i class="fa fa-chevron-right pull-right"></i></a>
<a class="list-group-item" href="#/calender">Calender <i class="fa fa-chevron-right pull-right"></i></a>
</div>
</div>
</div>
在Index.html中
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a href="#/home" class="btn btn-navbar"><i class="fa fa-home fa-navbar"></i> Home</a>
<a href="#/calender" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> Calender</a>
<a href="https://github.com/mcasimir/mobile-angular-ui/issues" class="btn btn-navbar"><i class="fa fa-exclamation-circle fa-navbar"></i> Issues</a>
</div>
</div>
<head>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script type="text/ng-template" id="home.html">
<h2>Home</h2>
</script>
<script type="text/ng-template" id="calender.html">
<h2>Calender</h2>
</script>
<script src="calenderCtrl.js"></script>
</head>
在CalenderCtrl.js
angular.module('FirstMobileAngularRouter.controllers.Calender', [])
.controller('CalenderCtrl', function($scope, $routeParams){
});
但它没有导航到日历页面。
以下是MobileAngularUI完整2页项目的免费下载链接