Основная деталь с ионным ионным номером

Question

Я пытаюсь понять образец основной детали (MD) в ионной форме с сидмемэ. Пример кода имеет «Плейлисты» в качестве основного, а «Плейлист» - как деталь. Состояния выглядит следующим образом:

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('app.playlists', { 
     url: '/playlists', 
     views: { 
     'menuContent': { 
      templateUrl: 'templates/playlists.html', 
      controller: 'PlaylistsCtrl' 
     } 
     } 
    }) 

    .state('app.single', { 
    url: '/playlists/:playlistId', 
    views: { 
     'menuContent': { 
     templateUrl: 'templates/playlist.html', 
     controller: 'PlaylistCtrl' 
     } 
    } 
    }); 
    $urlRouterProvider.otherwise('/app/playlists'); 
}); 

Но сначала от всего, я не понимаю, почему государство Playlist называется «app.single». Я не вижу слова «сингл» где-либо еще в коде. Что делать, если я хотел бы иметь шаблон главной детали на стр. 1 и другой шаблон шаблона мастера на стр. 2 (выбранный через меню)? Как я могу назвать состояние детали там?

И тогда мой другой вопрос связан, я не могу заставить свой собственный шаблон MD работать. Это коды, которые имеют значение:

app.js:

.state('app.master', { 
    url: '/master', 
    templateUrl: 'templates/master.html', 
     controller: 'MasterCtrl' 
    }) 

    .state('app.detail', { 
    url: '/master/:id', 
    templateUrl: 'templates/detail.html', 
    controller: 'DetailCtrl' 
    }) 

master.html:

<ion-view title="Master"> 
    <ion-content> 
     <ion-list> 
      <ion-item class="item" ng-repeat="person in people"> 
       <a href="#/app/master/{{person.id}}">{{person.text}}</a> 
      </ion-item> 
     </ion-list> 
    </ion-content> 
</ion-view> 

menu.html:

.... 
     <ion-item menu-close href="#/app/playlists"> 
      Playlists 
     </ion-item> 
     <ion-item menu-close href="#/app/master"> 
      Master 
     </ion-item> 
.... 

Списки воспроизведения MD работает все но мой собственный MD не делает. Я получаю главный список с элементами (контроллер и службы работают нормально), но когда я нажимаю элемент в списке, ничего не происходит. Затем, когда я откидываюсь назад (это должно открыть sidemenu), подробная страница «вид» появляется без css или данных. Так что где-то есть глюк. Я просто не понимаю всю информацию о состоянии/url, пока я читал достаточно документации ..

Answer 1

Я думаю, вы новичок в Ionic, не зная AngularJS и Angular UI Router.

Во-первых, точка-нотация в состоянии заключается в том, чтобы отметить некоторые дочерние элементы, которые наследуются от одного указанного родительского представления. Когда вы читаете в www/js/app.js, вы увидите состояние .state ('app'), и это родительский вид, menu.html, а виды детей будут заменены в этом теге, или так называемый угловой директивы,

<ion-nav-view name="menuContent"></ion-nav-view> 

дети или представления детали необходимо указать две вещи,

• первый, родительское имя, слово перед точкой, как в примере sidemenu , приложение. [Имя-ребенка]
• второй, вид ребенок должен указать, какая часть родительского вида, который будет вписываться в, через просмотров недвижимость, как в приведенном выше примере,

вы видите это menuContent,

views: { 
    'menuContent': { 
     templateUrl: 'templates/playlist.html', 
     controller: 'PlaylistCtrl' 
    } 
} 

Давайте поговорим о шаблоне Master-Detail, это всего лишь концепция того, как отображать список элементов и возможность доступа к одному элементу из списка.

sidemenu является а сложным примером для начинающих.

Простой пример состоит в том, чтобы иметь только две страницы без привязки чего-либо (без sidemenu, без вкладок ...).

.state('cats', { 
 
    url: '/cats', 
 
    templateUrl: 'templates/catlist.html', 
 
    controller: 'CatListCtrl' 
 
    }) 
 

 
.state('cat', { 
 
    url: '/cats/:catId', 
 
    templateUrl: 'templates/catsingle.html', 
 
    controller: 'CatSingleCtrl' 
 

 
})

О шаблоны/catlist.html

<ion-view view-title="Cat Collection"> 
 
    <ion-content> 
 
    <ion-list> 
 
     <ion-item ng-repeat="cat in cats" href="#/cats/{{cat.id}}"> 
 
     {{cat.name}} 
 
     </ion-item> 
 
    </ion-list> 
 
    </ion-content> 
 
</ion-view>

и шаблоны/catsingle.html

<ion-view view-title="Cat"> 
 
    <ion-content> 
 
    <h1>{{cat.name}}</h1> 
 
    <p>{{cat.description}}</p> 
 
    </ion-content> 
 
</ion-view>

Точка доступа один элемент из списка, чтобы указать направление к ресурсу, в данном случае, направление через URL, #/кошек/{{ cat.id}}. Поэтому, если у кота есть id = 5, тогда URL будет #/кошки/5; ok cool, давайте обратимся к единственной странице, которая отображает информацию о кошке с идентификатором 5. Вот как вы это интерпретируете на самом деле.

Мое предложение для изучения ионизированной

• Во-первых, узнать основные AngularJS, https://angularjs.org/
• Во-вторых, войти в контакт с системой навигации Угловая UI Router, http://angular-ui.github.io/ui-router/
• В-третьих, практика создания с очень очень маленькие ионные приложения, сделайте сложным Hello Ionic.

Угадайте, что мой ответ - это то, что вы ищете.

Плейлисты MD работают полностью, но мой собственный MD не делает. Я получаю Главный список с элементами (контроллер и службы работают нормально), но , когда я нажимаю элемент в списке, ничего не происходит. Затем, когда я прокручиваю назад (это должно открыть sidemenu), подробная страница «сортирует» показывает без css или данных. Так что где-то есть глюк. Я просто не кажется, понять всю состояние/URL вещь, в то время как я прочитал достаточно документацию ..

Я вижу, что вы прочитать, но вы спрашиваете себя , если вы знаете, вещи требуется для это?

На первой странице Ionic framework, я могу видеть AngularJS, я могу видеть ngCordova, я также вижу SASS (который в случае, вы будете задавать те же вопросы, как, как ваш пользовательский CSS не будет работать и перезаряжайтесь) ... Ой, много штук, чтобы знать, прежде чем получить вашу руку в Ионном, я думаю.

Следует отметить, что если вы не собираетесь с углового фона, вы можете не знать о навигационной системе в ионике, так как Ionic docs не рассказывают разработчикам об Угловом UI-маршрутизаторе, вы узнаете только о это от Ionic Learn page, который выглядит более продвинутым для новичков.

Я знаю, это сложно; Раньше я был в вашей ситуации, я чувствовал то же самое.

Во всяком случае, весело провести время обучения Ионные :)

Answer 2

@ekussberg:

Моя последняя установка включала в себя:

.state('app.playlists', { 
     url: '/playlists', 
    templateUrl: 'templates/playlists.html', 
     controller: 'PlaylistsCtrl' 
    }) 

    .state('app.playlist', { 
    url: '/playlists/:playlistId', 
    templateUrl: 'templates/playlist.html', 
    controller: 'PlaylistCtrl' 
    }); 

Обратите внимание, как называется состояние воспроизведения и URL-адрес отличается от вашего.

Answer 3

@Cake:

я уже пробовал, как это и работаю, но переход на прошивке и Web не является таким же гладким мастером-detaul как в пути по умолчанию. Я думаю, что это зависит от элемента «views» маршрутизации.

Этот код, например, работает, но переход не:

.state('app.todo', { 
 
    url: '/todo', 
 
    views: { 
 
    'menuContent': { 
 
     templateUrl: 'templates/todo-list.html', 
 
     controller: 'TodoListCtrl' 
 
    } 
 
    } 
 
}) 
 

 
.state('app.todo.single', { 
 
    url: '/:todoId', 
 
    views: { 
 
    'menuContent@app': { 
 
     templateUrl: 'templates/todo-single.html', 
 
     controller: 'TodoSingleCtrl' 
 
    } 
 
    } 
 
})