Angular не загружать шаблон

My angular (ионное) приложение не загружает мой шаблон, когда я нажимаю ссылку. Поэтому, если я нажму на ссылку, url в моей адресной строке изменится, но шаблон не будет. Я остаюсь на своей домашней странице. Если я сам поместил url в адресную строку и нажал ENTER, моя загрузка шаблона.

  <ion-side-menus ng-controller="HomeCtrl">
      <ion-side-menu-content>
          <ion-header-bar class="bar-positive">
              <button class="button button-icon ion-navicon" ng-click="toggleLeft()" ng-hide="$exposeAside.active"></button>
              <h1 class="title">Home</h1>
          </ion-header-bar>
          <ion-content>

              <ion-list class="feed">

                  <ion-item class="item">
                      Click <a href="#/friends">Here</a> to go on Friends
                  </ion-item>
                  <ion-item class="item">
                      Click <a href="#/notification">Here</a> to go on Notification
                  </ion-item>

              </ion-list>

          </ion-content>
      </ion-side-menu-content>
      <ion-side-menu expose-aside-when="large" class="panel-menu-left">
          <ion-content>
              <div ng-include src="'menu.html'"></div>
          </ion-content>
      </ion-side-menu>
      <div ng-include src="'tabs.html'"></div>
  </ion-side-menus>

Я создал Plunker: http://plnkr.co/edit/IFHpZF4MOOrRYciLTjAs?p=info

http://run.plnkr.co/owTNxkDqZwhK4QHv/#/

Если вы нажмете на уведомление, измените URL, но не страницу. Если вы нажмете на http://run.plnkr.co/owTNxkDqZwhK4QHv/#/notification загрузку страницы.

Что я сделал не так?

ОТВЕТЫ

Ответ 1

Вот решение.

Состав:

www/
    templates/
        menu.html
        hompage.html
        notification.html
        ...
    index.html

app.js:

// 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'
app = angular.module('starter', ['ionic'])

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});

app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $ionicConfigProvider.views.transition('none'); //remove this if you want a slide annimation each time you change state
    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html"
        })
        .state('app.homepage', {
            url: "/homepage",
                views: {
                'menuContent' :{
                    templateUrl: "templates/homepage.html",
                    controller: "HomeCtrl"
                }
            }
        })
        .state('app.notification', {
            url: "/notification",
                views: {
                'menuContent' :{
                    templateUrl: "templates/notification.html",
                    controller: "NotificationCtrl"
                }
            }
        })
        .state('login', {
            url: "/login",
            templateUrl: "templates/login.html",
            controller: "LoginCtrl"
        })
        .state('app.friends', {
            url: "/friends",
                views: {
                'menuContent' :{
                    templateUrl: "templates/friends.html",
                    controller: "FriendsCtrl"
                }
            }
        })
    ;
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/homepage');
});

app.controller('AppCtrl', function($scope, $ionicSideMenuDelegate, $state) {
    $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
    };
});

app.controller('HomeCtrl', function($scope) {
    console.log("HOME");
});

app.controller('NotificationCtrl', function($scope) {
    console.log("NOTIFICATION");
});

app.controller('FriendsCtrl', function($scope) {
    console.log("FRIENDS");
});

app.controller('LoginCtrl', function($scope, $state) {
    console.log("LOGIN");
    $scope.credentials = {
        username: 'hotgeart',
        password: '123456'
    };
    $scope.submit = function (credentials) {
        alert('Login: '+ $scope.credentials.username +'\nPassword: '+$scope.credentials.password);
        $state.go('app.homepage');
    };
});

index.html

<!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>Test</title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter" ng-controller="AppCtrl">
        <ion-nav-view></ion-nav-view>
    </body>
</html>

menu.html(родительский)

<ion-side-menus enable-menu-with-back-views="true">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-positive">
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view> <!- THE CONTENT LOAD HERE -->
    </ion-side-menu-content> 
    <ion-side-menu side="left">
        <ion-content>
            <ion-list class="panel-menu-left">
                <ion-item class="item" href="#/login">
                    Login
                </ion-item>
                <ion-item class="item" href="#/app/homepage">
                    Homepage
                </ion-item>
                <ion-item class="item" href="#/app/notification">
                    Notification
                </ion-item>
                <ion-item class="item" href="#/app/friends">
                    Friends
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
    <div class="tabs tabs-icon-only">
        <div class="border"></div>
        <a href="#/app/friends" class="tab-item friends">
            <div class="flag"></div>
            <i class="icon ion-ios-people-outline"></i>
        </a>
        <a href="#/app/notification" class="tab-item notifications">
            <div class="flag"></div>
            <i class="icon ion-ios-bell-outline"></i>
        </a>
        <a href="#/app/friends" class="tab-item visitors">
            <div class="flag"></div>
            <i class="icon ion-ios-eye-outline"></i>
        </a>
    </div>
</ion-side-menus>

Пример шаблона (notification.html, friends.html и домашняя страница - это то же самое только изменение текста)

<ion-view view-title="Home">
    <ion-content>
        <ion-list class="feed">
            <ion-item class="item">
                Click <a href="#/app/friends">Here</a> to go on Friends
            </ion-item>
            <ion-item class="item">
                Click <a href="#/app/notification">Here</a> to go on Notification
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

login.html(тестирование внешних страниц)

<ion-content class="padding">
    <h1>External page (without menu)</h1>  
    <form role="form" ng-submit="submit(credentials)">
        <div class="alert alert-danger" ng-if="errorMessage">
            {{ errorMessage }}
        </div>
        <div class="list list-inset">
            <label class="item item-input">
                <input type="text" ng-model="credentials.username" placeholder="Username" required>
            </label>
            <label class="item item-input">
                <input type="password" ng-model="credentials.password" placeholder="Password" required>
            </label>
            <br><a href="#/app/homepage">HOMEPAGE</a>
        </div>
        <button class="button button-block button-positive" ng-click="submit(credentials)">Login</button>
    </form>
</ion-content>

Надеюсь, что это поможет кому-то в будущем.

Ответ 2

<div class="tabs tabs-icon-only">

 <a ui-sref="notification" class="tab-item notifications">
  <div class="flag"></div>
  <i class="icon ion-ios-bell-outline"></i>
 </a>
//other items
</div>

Отметьте часть ответа в вопросе: Angular -ui-router: ui-sref-active и вложенные состояния

(Чтобы это работало, состояние $должно быть доступно в представлении.)

angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
   $scope.$state = $state;
}]);)

Ответ 3

Я не знаю ионных, но я думаю, что ваша структура папок неверна. Если я добавлю простой встроенный шаблон, ваш plunkr будет работать. Например:

.state('friends', {
     url: '/friends',
     template: '<p>Hello, world!</p>',
     controller: 'FriendsCtrl',
 });

Я прочитал кое-что о структуре ионных папок здесь и здесь. Кажется, что шаблоны должны быть в специальном каталоге:

Из первой ссылки:

Проект

  • Крючки
  • платформы
  • WWW
    • шаблоны /

Из второй ссылки:

"Шаблон, который мы будем использовать, находится в www/templates/user.html в нашем проекте.

EDIT:

Если папка шаблона в порядке, я думаю, что вы сами ответили на вопрос: ваш шаблон неправильный. Как я уже сказал, я не знаю, что такое ионный, но что-то вроде this работает (Домашняя страница и друзья - уведомление все еще не работает). По существу, кажется, что вам нужно запустить шаблон с чем-то вроде ion-view следующим образом:

<ion-view ng-controller="YourController">
    <ion-content>
...

Вышеупомянутый plunkr не очень хорош, но он указывает точку и применяет мой предыдущий комментарий. Сделайте рефакторинг кода, чтобы избавиться от меню и поместить его в центральное место - в моем plunkr просто в index.html.

Что касается шаблонов и структуры, я только что нашел здесь:

В представлении [template] используется разметка для состояния или страницы вашего приложения жизни. В Ionic эти файлы имеют тенденцию выглядеть примерно так:

<ion-view title="About">
  <ion-content>
    My super cool content here!
  </ion-content>
</ion-view>