CODEWITHSUNDEEP
angularjsangularjs-ng-include
Jadefox10200
Jadefox10200

Reputation: 584

How to load data using dynamic ng-include with AngularJS with correct controller for each page?

I realize that this isn't an entirely new question, but after days of trying to get this to work I seem to not understand something fundamentally, despite the extensive searches I have done as I cannot get my app to work.

I have a web app with a side nav and a main div in the center. I am using ng-include to populate the main div based on the side nav that is clicked. Originally I was using ng-show, but because there is so much data on each page I don't want to load all of the side nav options. I then switched to using ng-include which works great. However, I am now having issues with two way binding and loading an init() function when a side nav is clicked. I am trying to keep this simple as this is my first app using AngularJS, and I must use AngularJS since some of the pages being viewed are already existing with their own controllers and pages fully functioning. Because many pages are already operational, I simply want to display the HTML from an existing page that works and link up the correct controller for that page. As a temporary solution, I have taken all of the code from the various controllers and stuck them in one controller. However, this creates other problems which will require me to change a lot of code, so I would much rather have each page with its own controller.

Therefore, what is the correct way to use ng-include in a way that will allow me to load the HTML page, link it to the proper controller and then run some kind of init() with all of the ng-model pieces still working?

It is likely that I am doing more than one thing wrong. My actual app has a lot of data and is quite big. Therefore, I have extracted very small parts of it and typed up the following example to show what I am trying to accomplish and the latest thing I have tried.

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>PL Releasing</title>
        <script type="text/javascript" src="assets/js/jquery-1.11.0.js"></script>   
        <script type="text/javascript" src="assets/js/angular.min.js"></script>
        <script type="text/javascript" src="assets/js/app.js"></script>
    </head>
    <body  ng-app="indexApp" ng-controller="indexController" style="width: 100%">
        <div>
            <div>               
                <a ng-click="showpage('page1')">PAGE1</a>
                <a ng-click="showpage('page2')">PAGE2</a>               
            </div>
            <div ng-include="templateURL">
            </div>
        </div>
    </body>
</html>

app.js

var app = angular.module('indexApp', []);

app.controller('indexController', function($scope) {

    //index.html
    $scope.showpage = function(pageName) {

        switch(pageName) {
            case "page1":
                $scope.templateURL = '/assets/pages/page1.html';                
                break
            case "page2":
                $scope.templateURL = '/assets/pages/page2.html';                
                break
            default:
                $scope.templateURL = ''
                console.log(pageName)   
        }       
    }   
})

app.controller('page1Controller', function($scope) {

    $scope.ListData = []

    $scope.populatePage1 = function() {
        $("#data").html('loaded 1')
        $scope.getPage1Data()
        //POPULATE <select> AND OTHER STATIC DATA
    }

    $scope.page1Init = function() {
        $scope.populatePage1()
        //RUN OTHER INIT FUNCTIONS HERE
    }

    $scope.getPage1Data = function() {
        $http.get("http://127.0.01:9090/getListData?queryName=page1Data")
            .then (function(resp) {
                $scope.ListData = resp.data;            
            });
    }

})

app.controller('page2Controller', function($scope) {

    $scope.populatePage1 = function() {
        $("#data").html('loaded 2')
        $scope.getPage1Data()
    }

    $scope.page1Init = function() {
        $scope.populatePage2()
        //RUN OTHER INIT FUNCTIONS HERE
    }

    $scope.getPage2Data = function() {
        $http.get("http://127.0.01:9090/getListData?queryName=page2Data")
            .then (function(resp) {
                $scope.ListData = resp.data;            
            });
    }

})

page1.html

<div ng-controller="page1.html" onload="page1init()">
    <p>THIS IS PAGE 1</p>
    <input type="text" ng-model="page1Input" placeholder="Enter data"/>
    <br>
    <div>{{page1Input}}</div>
    <br>
    <div id="data"></div>
    <select style="width: 100px;">
        <option value=""></option>
        <option ng-repeat="pjt in ListData" value="{{pjt.id}}">{{pjt.name}}</option>
    </select>
</div>

EDIT: Here is the link to the Plunker I created trying to use ng-route.

Upvotes: 0

Views: 67

Answers (2)

Sunil
Sunil

Reputation: 138

You show use routing library like ngRoute .

Upvotes: 0

Nishanth
Nishanth

Reputation: 835

You can use AngularJS ngRoute:

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
  $routeProvider

  // route for the home page
    .when('/home', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  })

  // route for the about page
  .when('/about', {
    templateUrl: 'pages/about.html',
    controller: 'aboutController'
  })

  // route for the contact page
  .when('/contact', {
    templateUrl: 'pages/contact.html',
    controller: 'contactController'
  })

  //otherwise redirect to home
  .otherwise({
    redirectTo: "/home"
  });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!!!!';
});

scotchApp.controller('aboutController', function($scope) {
  $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
  $scope.message = 'Contact us!.';
});

Here's a sample demo in plnkr.

Upvotes: 1

Related Questions