0

I'm trying to routing to my html file but nothing happen when I click on the navigation to link to the page given (page 1, page 2 and page 3,and no console error either. I'm using my local server via command prompt. My app is specified in the html tag - html ng-myApp. I have looked at the similar question on this site but can't figure it out why not working. Thank you for your help.

here's navbar:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header"> <a class="navbar-brand" href="#/">Logo</a>
        </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/">Page1</a></li>
                <li><a href="#/">Page2</a></li>
                <li><a href="#/">Page3</a></li>

            </ul>
            </div>
        </div>
</nav>

Here is the pages which will be displayed in ng-view withing index.html

Page1.html

<div>
    <h1>{{titlePage1}}</h1>
</div>

Page2.html

<div>
    <h1>{{titlePage2}}</h1>
</div>

Page3.html

<div>
    <h1>{{titlePage3}}</h1>
</div>

Controller.js

angular.module('RouteControllers', [])
.controller('firstController', function($scope) {
    $scope.firstTitle = "First page is Blue"

   })
.controller('secondController', function($scope) {
    $scope.secondTitle = "Second page is White"

   })
.controller('thirdController', function($scope) {
    $scope.thirdTitle = "Third page is Orange"

   });

App.js

       angular.module("myApp", ["ngRoute", "RouteControllers"]);

       angular.module("myApp").config(function($routeProvider) {
             $routeProvider.when("/", {
                  template: "<div main-slide-show></div>"<!--This is background template please ignore it -->
      })
.when("/page1", {
    templateUrl : "templates/page1.html",
    controller : "firstController"
})
.when("page2", {
    templateUrl : "templates/page2.html",
    controller : "secondController"
})
        .when("page3", {
                 templateUrl : "templates/page3.html",
                 controller : "thirdController"
        });
Improve this question
8
  • Add <div ng-view></div> to your html Commented Jun 16, 2017 at 16:36
  • @XYZ yes there's ng-view, thanks but not working Commented Jun 16, 2017 at 16:43
  • Are you using ui-bootstrap? Commented Jun 16, 2017 at 16:44
  • @Leni_14 angular.module('RouteControllers', []) change this to angular.module('myApp').controller Commented Jun 16, 2017 at 16:46
  • @RandomUs1r yes I'm using Bootstrap Commented Jun 16, 2017 at 16:52

3 Answers 3

Reset to default
1

You have some error in your code .You have forgot to pass the proper href and have used variable name firstTitle in controller and in template used a different variable.Try like this

angular.module("myApp", ["ngRoute","RouteModule"])

  .config(function($routeProvider,$locationProvider) {
  
  $locationProvider.hashPrefix('');
      $routeProvider.when("/", {
          template: "<div main-slide-show></div>"
        })
        .when("/page1", {
          templateUrl: "page1.html",
          controller: "firstController"
        })
        .when("/page2", {
          templateUrl: "page2.html",
          controller: "secondController"
        })
        .when("/page3", {
          templateUrl: "page3.html",
          controller: "thirdController"
        })
}) 
     
angular.module('RouteModule', []).controller('firstController', function($scope) {
          $scope.firstTitle = "First page is Blue"

        })
        .controller('secondController', function($scope) {
          $scope.secondTitle = "Second page is White"

        })
        .controller('thirdController', function($scope) {
          $scope.thirdTitle = "Third page is Orange"

        });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<div ng-app="myApp" ng-controller="firstController">
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header"> <a class="navbar-brand" href="#/">Logo</a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#/page1">Page1</a></li>
        <li><a href="#/page2">Page2</a></li>
        <li><a href="#/page3">Page3</a></li>

      </ul>
    </div>

  </nav>
  <ng-view></ng-view>

<script type="text/ng-template" id="page1.html">
  <div>
    <h1>{{firstTitle}}</h1>
  </div>
</script>
<script type="text/ng-template" id="page2.html">
  <div>
    <h1>{{secondTitle}}</h1>
  </div>
</script>
<script type="text/ng-template" id="page3.html">
  <div>
    <h1>{{thirdTitle}}</h1>
  </div>
</script>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Controller Route code

 angular
   .module("StarterApp",['ui.router'])
   .config(function($httpProvider, $stateProvider, $urlRouterProvider,$locationProvider){

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'app/views/pages/home.html',
            controller: 'HomeCtrl'
            
        })

        .state('about', {
            url: '/about',
            templateUrl: 'app/views/pages/about.html',
            controller: 'AboutCtrl'
             
         
                    
        })
        
    $urlRouterProvider.otherwise('/home');
})

HTML CODE

<!-- ui-router should be here-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
<script src="assests/node_modules/angular-ui-router/release/angular-ui-router.js"></script>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
        </button>
   <a class="navbar-brand" href="#">Project name</a>
       </div>
       <div id="navbar" class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
         <li class="active"><a href="/home">Home</a></li>
         <li><a ng-show="grantedprofile" href="/about">Blog</a></li>
         </ul>
       </div><!--/.nav-collapse -->
   </div>
  </nav>
 <!-- Ui-view -->
 <div style="padding-top: 110px; margin-left: 30px">
  <ui-view></ui-view></div>
 </div>

This code change accordingly for your need.

Improve this answer

2 Comments

thanks alot. This approach is new to me but I love the challenge :-) I will try your code and then decides...Like you I'm up for better approach :D
Cool, if u need help i can post whole code for mean stack from my github.
0

This code is obviously wrong, In ui router u need to add state, which is then added to href or you can use Ui-sref

Your choice, but I don't prefer ng-route

Improve this answer

13 Comments

thanks but can you explain by example please. the correct way to do
<md-button ui-sref='state'>navigation_name</md-button> this above code goes in html, below is state code, which can be used with href or ui-sre. $stateProvider .state('default_state', { url: '/classifieds', templateUrl: 'location_html/classifieds.tpl.html', controller: 'AppCtrl' }) .state('classifieds2', { url: '/classifieds2', templateUrl: 'locationof_html/classifieds2.tpl.html', controller: 'AppCtrl2' }) $urlRouterProvider.otherwise('default_state');
I think you want me to use angular material which I'm trying to avoid at a moment. I'm currently using Bootstrap
Sorry i am on mobile currently, if it helps then upvote
Not angular material, angular material is different, It's css file
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.