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

Question

I am having difficulty getting my Angular routing to work on my mobile app (no errors appear in console when running). 我在移动应用程序上无法正常使用Angular路由（运行时控制台中不会出现错误）。 Here is the index. 这是索引。 html file (with a div and ng-view) 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>

Now, the tab buttons with ng-href correctly change the URL but the route in app.js is not working properly. 现在，带有ng-href的选项卡按钮可以正确更改URL，但app.js中的路由无法正常工作。 Here is 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';
});

just for example, the groups.html page looks like this 仅举例来说，groups.html页面如下所示

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

and pressing the tab generates a URL (in browser preview mode) goes from 然后按标签生成一个网址（在浏览器预览模式下）

(HostName):SchedTek/apps/services/preview/SchedTek/common/1.0/default/index.html （主机名）：SchedTek / apps / services / preview / SchedTek / common / 1.0 / default / index.html

to 至

(HostName):SchedTek/apps/services/preview/SchedTek/common/1.0/default/index.html#/calendar but none of the group.HTML template was injected into the div in index.html （HostName）：SchedTek / apps / services / preview / SchedTek / common / 1.0 / default / index.html＃/ calendar，但没有一个组。HTML模板已插入index.html中的div中

and just so you can get an overview of the folder layout, folder layout picture 这样您就可以大致了解文件夹布局，文件夹布局图片

Any help would be greatly appreciated. 任何帮助将不胜感激。 I have tried different combinations of added "/" to template paths, moving around the tags, etc. 我尝试了在模板路径中添加“ /”，在标签周围移动等不同组合。

Thanks! 谢谢！

Answer 1

You forgot to add ng-app to your html 您忘记将ng-app添加到html中

In the html tag add 在html标记中添加

<html ng-app="App">

Answer 2

I faced the same problem where my pages were actually navigating on the address bar but the views were not loading. 我遇到了同样的问题，我的页面实际上在地址栏上导航，但是视图未加载。

Place the below code on the html element 将以下代码放在html元素上

That would ensure that other pages would reference your ngRoute functionalities 这样可以确保其他页面引用您的ngRoute功能

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

问题描述

2 个解决方案

解决方案1
0 2015-10-17 08:04:54

解决方案2
0 2015-11-09 17:48:54

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

问题描述

2 个解决方案

解决方案1 0 2015-10-17 08:04:54

解决方案2 0 2015-11-09 17:48:54

解决方案1
0 2015-10-17 08:04:54

解决方案2
0 2015-11-09 17:48:54