Ytukyg

I'm working into AngularJS and have decided to use the AngularJS Material library to assist in my first application. So far I have some very basic code I copied from https://material.angularjs.org/latest/demo/navBar which I have modified to fit my own needs. I'm having some trouble wrapping my head around routing my code is below please help me some one else

.js

var routerApp = angular.module('routerApp', ['ui.router','ngMaterial', 'ngMessages']);



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



    $urlRouterProvider.otherwise('/home');



    $stateProvider



        .state('home', {

            url: '/home',

            templateUrl: 'templates/home.html',

            controller:'HomeController'

        })



         // nested list with custom controller

         .state('home.page1', {

            url: '/page1',

            templateUrl: 'templates/page1.html',

            controller: function ($scope) {

                $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];

            }

        })



        // nested list with just some random string data

        .state('home.page2', {

            url: '/page2',

            templateUrl: 'templates/page2.html',

            //template: 'I could sure use a drink right now.',

            controller: function ($scope) {

                $scope.paragraphs = ['paragraph1', 'paragraph2', 'paragraph3'];

            }

        })



});

home.html

<div layout="column" ng-cloak>

    <md-content class="md-padding">

        <md-nav-bar md-no-ink-bar="disableInkBar"

                    md-selected-nav-item="currentNavItem"

                    nav-bar-aria-label="navigation links">

            <md-nav-item md-nav-href=".page1" name="page1">

                Page One

            </md-nav-item>

            <md-nav-item md-nav-href=".page2" name="page2">

                Page Two

            </md-nav-item>

            <md-nav-item md-nav-href=".page1" name="page1">

                Page Three

            </md-nav-item>

            <md-nav-item md-nav-href=".page2" name="page2" disabled>

                Page Four

            </md-nav-item>

        </md-nav-bar>

        <div ui-view></div>

    </md-content>

</div>

HomeController:

routerApp.controller('HomeController', function ($scope, $location,$state) {

   $scope.goto = function(page) {

    $state.go(page);

  };

});

You might try with md-nav-sref

md-nav-sref is used as Ui-router state to transition to when this link
is clicked

<md-nav-item md-nav-sref="#!/page1" name="page1">

                Page One

</md-nav-item>