Adding new pages to Ionic Project

I am trying to add a top right settings page to my profile page of my app. I created a html file based on a template and added it to its own folder: /templates/settings/settings-start.html. Here is the code I have currently. I cannot get the page to open my new settings. Any tips?

In my page:

<i class="button button-clear icon-gear" href="#/settings"></i>

In my controller.js:

.controller('SettingsCtrl', function($scope) {})

In my app.js:

 .state('settings', {
      url: '/settings',
      views: {
        'settings-start': {
          templateUrl: 'templates/settings/settings-start.html',
          controller: 'SettingsCtrl'
        }
      }
    })

It looks like you try to add a href attribute to the <i> tag. That is not a valid link.

Use <a> tag with href attribute and include nested <i> tag, or use <button> with ui-sref attribute with state name for state transition with ui-router.

1 Like

Thank you for the help. I am still having having issues opening the page.

now I have an HTML button:

<ion-nav-view class="bar bar-header bar-positive">
  <h1 class="title">Yeah</h1>
    <button class="button" ng-click="settings">Edit</button>
</ion-nav-view>

That is supposed to call this in my controllers.js

.controller('SettingsCtrl', function($scope) {})

And this is my app.js

  .state('settings', {
      url: '/settings',
      views: {
        'settings-start': {
          templateUrl: 'templates/settings/settings-start.html',
          controller: 'SettingsCtrl'
        }
      }
    })

What am I missing about adding a new page?

Hey,

this

should be

<button class="button" ui-sref="settings">Edit</button>

Cheers