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

【问题标题】：AngularJS ngRoute updating URL correctly but not injecting template into ng-ViewAngularJS ngRoute 正确更新 URL 但未将模板注入 ng-View
【发布时间】：2015-10-17 07:57:06
【问题描述】：

我很难让我的 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/apps/services/preview/SchedTek/common/1.0/default/index.html

到

（主机名）：SchedTek/apps/services/preview/SchedTek/common/1.0/default/index.html#/calendar 但是没有一个 group.HTML 模板被注入到 index.html 中的 div 中

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

任何帮助将不胜感激。我尝试了在模板路径中添加“/”的不同组合、在标签周围移动等。

谢谢！

【问题讨论】：

你也可以分享 wlinit 文件吗？
如果您正在使用选项卡 - 当您单击选项卡作为模板文件作为指令或使用 ng-include 而不是使用路由时，您能否仅加载内容？从概念上讲，选项卡用于在视图上加载内容，而不是更改应用程序中的路由。

标签： javascript html angularjs ngroute ng-view

【解决方案1】：

您忘记将 ng-app 添加到您的 html 中

在html标签中添加

<html ng-app="App">

【讨论】：

我已经在 wlinit.js 文件中引导了 angular，但是删除它并添加并没有解决它。

【解决方案2】：

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

将下面的代码放在 html 元素上

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

【讨论】：