Question

我无法让我的Angular路由在我的移动应用上运行（运行时控制台中不会出现错误）。这是索引。 html文件（带div和ng-view）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>index</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/bower_components/angular-route/angular-route.js"></script>

    <script>
    console.log("Setting jQuery from WL");
    window.$ = window.jQuery = WLJQ; </script>

    <!-- your app's js -->
    <script src="app.js"></script>
  </head>
  <body>

      <!-- SchedTek Header Bar -->
      <ion-header-bar class="bar bar-header bar-calm">
        <h1 class="title">SchedTekT</h1>
      </ion-header-bar>

      <!-- Content box to inject HTML pages -->
        <div ng-view>
        </div>

      <!-- Footer tab menu -->
      <div class="tabs tabs-icon-top">
        <a class="tab-item" ng-href="#calendar" id="calendarTab">
            My Calendar
        </a>
        <a class="tab-item" ng-href="#group" id="groupTab">
            My Groups
        </a>
        <a class="tab-item tab-item-active" ng-href=#events id="eventTab">
            My Events 
        </a>
        <a class="tab-item" ng-href="#settings" id="settingsTab">
            Settings
        </a>
      </div>

      <script src="js/wlInit.js"></script>

  </body>
</html>

现在，使用ng-href的选项卡按钮正确更改了URL，但app.js中的路径无法正常工作。这是app.js

    // Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var App = angular.module('App', ['ionic', 'ngRoute']);

App.config(['$routeProvider',

        function($routeProvider)
        {
        $routeProvider

        //route to account page
        .when('/account',
        {
            templateURL:'pages/account.html',
            controller: 'accountController'
        })

        //route to events page
        .when('/events',
        {
            templateURL: 'pages/main.html',
            controller: 'mainController'
        })

        //route to calendar page
        .when('/calendar',
        {
            templateURL: 'pages/calendar.html',
            controller: 'calendarController'
        })

        //route to group page
        .when('/group',
        {
            templateURL: '/pages/group.html',
            controller: 'groupController'
        })

        //route to specific group info
        .when('/group/:groupName',
        {
            templateURL:'pages/groupoverview.html',
            controller: 'groupIdController'
        })

        //route to settings page
        .when('/settings',
        {
            templateURL:'pages/settings.html'
        })

        //default to events
        .otherwise({
            templateURL: 'pages/events.html',
            controller: 'mainController'
        });
    }
]);

App.controller('mainController', function($scope){
    $scope.message = 'main controller stuffs';
});
App.controller('accountController', function($scope){
    $scope.message = 'account controller stuffs';
});
App.controller('calendarController', function($scope){
    $scope.message = 'calendar controller stuffs';
});
App.controller('groupController', function($scope){
    $scope.message = 'group controller stuffs';
});
App.controller('groupIdController', function($scope){
    $scope.message = 'specific group controller stuffs';
});

例如，groups.html页面看起来像这样

<h1> Placeholder for group </h1>
<p>{{message}}</p>

并按下标签会生成一个URL（在浏览器预览模式下）来自

（主机名）：SchedTek /应用/服务/预览/ SchedTek /普通/ 1.0 /默认/ index.html中

到

（主机名）：SchedTek /应用/服务/预览/ SchedTek /普通/ 1.0 /默认/ index.html中＃/日历但是没有将group.HTML模板注入index.html的div中

这样您就可以了解文件夹布局， folder layout picture

非常感谢任何帮助。我已尝试将不同的“/”组合添加到模板路径，移动标签等等。

谢谢！

Answer 1

您忘了将ng-app添加到您的HTML

在html标签中添加

<html ng-app="App">

Answer 2

我遇到了同样的问题，我的网页实际上是在地址栏上导航但视图没有加载。

将以下代码放在html元素上

这将确保其他页面将引用您的ngRoute功能

AngularJS ngRoute正确更新URL但不将模板注入ng-View

2 个答案: