Using side-menu, should I use ng-view?


#1

Great stuff - loving the Ionic platform. I was hesitant to use it at first because I’m a bootstrap guy, but after trying it I’m sold.

I have seen this: https://github.com/georgiknox/ionic-side-menu-with-navigation

Where does ng-view go? Is side-menu to be used with ng-view?

The problem is that when I click the Login side menu item, nothing is displayed in the content area (“Login here!” is not displayed as expected)

I’m having an issue getting any views content to render using a side nav. Code:

… regular module definition …

.state('home.login', {
                url: "/home/login",
                templateUrl: "templates/login.html"
            })

login.html:

<ion-view title="'Login'" ng-controller="LoginCtrl">
    <ion-content has-header="true" padding="true">
        <p>Login here!</p>
    </ion-content>
</ion-view>

index.html:

<ion-side-menus>
    <!-- Center content -->
    <ion-pane ion-side-menu-content>
        <header class="bar bar-header bar-dark">
            <button class="button button-icon" ng-click="toggleMenu()">
                <i class="icon ion-navicon"></i>
            </button>
            <h1 class="title">Tracker</h1>
        </header>
        <ion-content has-header="true">
            ?????????????<ng-view></ng-view>????????????????
        </ion-content>
    </ion-pane>
    <!-- Left menu -->
    <ion-side-menu side="left" width="200">
        <header class="bar bar-header bar-dark">
            <h1 class="title">User: Test</h1>
        </header>
        <ion-content has-header="true" scroll="false">
            <ion-list>
                <ion-item>Home</ion-item>
                <ion-item  ng-click="goTo('/home/login')" class="item item-icon-left">Login</ion-item>
                <ion-item>One</ion-item>
                <ion-item>Two</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

#2

ng-view is for using Angular’s default ng-route. Ionic no longer uses it. It’s all been switched to ui-router. See this sample : http://codepen.io/ionic/pen/EtbrF


#3

Awesome, unfortunately my windows 8.1 install has crashed and I only had a local git repo. I will give this a try in a few days.

Another note: This would be GREAT under the side menu API DOCS or as an example reference. No where in the docs does it state this usage (at least that I’ve found)


#4

Yes, the docs are a bit out of date. There have been so many changes to Ionic in the last month or so that many things have changed. There is a big doc improvement coming soon.


#5

Sorry - that codepen seems to have disappeared. Can you repost the example?


#6

I’m not sure exactly what I linked to anymore.

Try this one: http://codepen.io/ionic/pen/tcIGK

It’s using a side-menu with the Beta 1 released