AngularJS ngRoute правильно обновляет URL-адрес, но не вставляет шаблон в ng-View

У меня возникли трудности с тем, чтобы моя маршрутизация 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 работает неправильно. Вот приложение.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

to

(HostName):SchedTek/apps/services/preview/SchedTek/common/1.0/default/index.html#/calendar, но ни один из шаблонов group.HTML не был введен в div в index.html

и просто чтобы вы могли получить общее представление о макете папки, картинка макета папки

Любая помощь будет принята с благодарностью. Я пробовал разные комбинации добавления «/» к путям шаблонов, перемещения по тегам и т. д.

Спасибо!


javascript html angularjs ngroute ng-view
person razorcat    schedule 17.10.2015    source источник
comment
Можете ли вы поделиться файлом wlinit тоже?   -  person Filype    schedule 17.10.2015
comment
Если вы используете вкладки - не могли бы вы просто загрузить содержимое при нажатии на вкладку в качестве файла шаблона либо в виде директивы, либо с помощью ng-include вместо использования маршрутов? Концептуально вкладки используются для загрузки контента в представление, а не для изменения маршрутов в приложении.   -  person markyph    schedule 18.10.2015

Ответы (2)


arrow_upward
0
arrow_downward

Вы забыли добавить ng-app в свой html

В теге html добавьте

<html ng-app="App">
person Filype    schedule 17.10.2015
comment
Я уже загрузил angular в файл wlinit.js, но его удаление и добавление ‹html ng-app=App› не помогло. - person razorcat; 17.10.2015

arrow_upward
0
arrow_downward

Я столкнулся с той же проблемой, когда мои страницы фактически перемещались по адресной строке, но представления не загружались.

Поместите приведенный ниже код в элемент html.

Это гарантирует, что другие страницы будут ссылаться на ваши функции ngRoute.

person Francis    schedule 09.11.2015