CODEWITHSUNDEEP
angularjstypescript
Bhushan Khaladkar
Bhushan Khaladkar

Reputation: 622

ngRoute unable to bind data in my list

I am using single page angular application. I have defined the static array in my typescript file but when i run my solution my array values are not binded on my views though i can just see my view. Below is my code.

 let mainAngularModule = angular.module("mm", ['ngMaterial', 'ngRoute']);

    mainAngularModule.config(routeConfig);

    routeConfig.$inject = ['$routeProvider'];
    function routeConfig($routeProvider, $locationProvider) {
        $routeProvider
            .when('/UserDefinedElement', {
                templateUrl: 'LinkType.html',
                controller: 'linktController as LTController'
            })
       .when('/PersonalPreferences', {
            templateUrl: 'PersonalPreference.html',
            controller: 'personalpreferencesController as PPController'
        })
}

and i have defined the class in same ts file which is as follows

class LinkTypeController {
    constructor() {

        $scope.items = [
            { Name: "LinkType1", Address: "NC"},
            { Name: "LinkType2", Address: "NY"}
        ];           

    }
}

mainAngularModule.controller("linktController", LinkTypeController);

my Linktype HTML code is as follows

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
        <div class="demo-md-panel-content">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody>
                    <tr  ng-repeat="x in items">
                        <td>{{x.Name}}</td>
                        <td>{{x.Address}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        </div>
</body>
</html>

Do i need to write ng-controller in my view as well?

My Main html file is as follows

<!DOCTYPE html>
<html>

<head>

</head>

<body ng-app="mm">
    <div layout="row" layout-xs="column">
        <div flex="18">
            <md-sidenav style="margin-top: -30px;" md-component-id="left" class="md-sidenav-left" md-is-locked-open="$mdMedia('min-width: 333px')">
                 <md-divider></md-divider>
                <md-subheader class="md-no-sticky">User Preferences</md-subheader>
                <md-list-item href="#/PersonalPreferences">
                    <span>Personal Preferences</span>
                </md-list-item>
                <md-list href="#/UserDefinedElement">
                    <span>Model Links</span>
                    <md-list-item href="#/UserDefinedElement">
                        <span>User Defined Element</span>
                </md-list>
            </md-sidenav>

        </div>
        <div flex>
            <md-content layout-padding>
                <div ng-view></div>
            </md-content>
        </div>
    </div>
</body>

</html>

Upvotes: 0

Views: 55

Answers (2)

Pawan Gupta
Pawan Gupta

Reputation: 154

Since you are using ControllerAs syntax in routing, you will have to make two changes in your existing code.

  1. In the controller function instead of $scope.items use this.items
  2. In ng-repeat, instead of ng-repeat="x in items" use ng-repeat="x in LTController.items"

Upvotes: 1

Deividas
Deividas

Reputation: 6507

You need to bind ng-app to the html page. If the displayed HTML is only your template, then it should not include html, head and body tags.

Upvotes: 0

Related Questions