Unable to fetch data from controller in multiple html page in angularjs

Question

I am trying to make a webpage.In that when a user login , a new html page("dashboard.html")opens in the view. This "dashboard.html" contains some links(links to other html pages).When user clicks on them a new html(say "page_3.html") page should open with data that is present in controller.this "page_3.html" is not fetching data from controller.Below is my code.

<!-- controller.js   -->
    var app = angular.module('myApp',[ 'ngRoute' ]);
    app.config(function($routeProvider){ 
       $routeProvider
       .when('/',{ 
          templateUrl: 'login.html' 
       })
       .when('/dashboard',{
           templateUrl: 'dashboard.html' 
    })
       .when('/page_3',{ 
          templateUrl: 'page_3.html' 
       })
       .otherwise({
           redirectTo : '/'
       });
        
    });


    app.controller('app', function($scope, $location){
    $scope.item = "test";
        $scope.submit = function(){
                $location.path('/dashboard');
            }   
        };
    });

<!DOCTYPE html>
    <html>
        <head>
            <title>Project</title>
            <script src="angular.js"></script>
            <script src="angular-route.js"></script>
            <script src="controller.js"></script>
        </head>
        <body ng-app= "myApp" ng-controller="app">
            <div ng-view></div>   
        </body>
    </html>

    <!-- below is login.html page -->

    <div ng-controller="app">      
    <form action="/"> 
         <button type="button" ng-click="submit()">Login</button>
            </form>
    </div>

    <!-- below is my dashboard.html page -->
    <div ng-controller="app">
      <h1>Page_3</h1>
            <div><a href='page_3.html'>page_3</a></div>
        </div>
      
      <!-- below is page_3.html page -->

    <div ng-controller="app">
    <p>{{item}}</p>
    </div>

result : {{item}}

Could you create a Minimal, Complete, and Verifiable Example that we could work with? — Claudia
– Claudia, Commented Apr 30, 2016 at 16:54

Zach Briggs · Accepted Answer · 2016-04-30 17:54:21Z

0

May I suggest avoiding the ng-controller directive and rather use the controller config object on your router?

.when('/page_3',{ 
  templateUrl: 'page_3.html',
  controller: "app"
})

answered Apr 30, 2016 at 17:54

Zach Briggs

638 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:23:55Z

There are two main problems with your code:

Enable HTML 5 mode for pushState via $locationProvider for URLs like /dashboard and /page_3
Fix the problem where route is configured for /page_3 but having a a tag pointed to /page_3.html

To get a working example:

Add a base tag
```
<base href="/">
```
Enable html5 mode via locationProvider in a config block
```
$locationProvider.html5Mode(true);
```

Fix route in dashboard.html

 <!-- below is dashboard.html page -->
 <div ng-controller="app">
    <h1>Page_3</h1>
        <div><a href='page_3.html'>page_3</a></div>
  </div>

Click here for the demo / jsbin.

Other/suggestions: as Zack Briggs have suggested; using controller syntax in routes would help you come up with better code structure / design in router config, directives, or components. Also putting everything in one place is often a bad idea for a growing project.

Collectives™ on Stack Overflow

Unable to fetch data from controller in multiple html page in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related