Search code examples
angularjsangularjs-directiveangularjs-scopeangular-ui-router

View is not loading any data. Can some-one solve?

I've started to learn angular.js a few days back.

This doesn't load views in angular.html. I'm not sure what's wrong in the code.

angular.html saved in root folder. view1.html and view2.html are in root/partials folder.

angular.html

<body ng-app="demoApp">
    <div>
        <div ng-view></div>
        <h2> modules </h2>
    </div>
 </body>

 <script>
    var demoApp = angular.module('demoApp', []);

    demoApp.config(function($routeProvider){
       $routeProvider
       .when('/',{
          controller: 'SimpleController',
          templateUrl: 'angularpartials/view1.html'
      })
       .when('/view2',{
          controller: 'SimpleController',
          templateUrl: 'angularpartials/view2.html'
      })
       .otherwise({redirectTo:'/'});
    });

    demoApp.controller('SimpleController', function ($scope){
        $scope.clients=[
             {name:'Dave', city:'NJ'}, 
             {name:'Nupur', city:'WC'}, 
             {name:'Heedy', city:'TX'}];

        $scope.addClient = function(){
          $scope.clients.push({
             name: $scope.newClient.name,
             city: $scope.newClient.city                                
         });        
      };

  });
  </script>

view1.html

<div>
    <input type="text" data-ng-model="filter.name"> {{filter.name | uppercase}} 
    <h3>view1 </h3>
    <ul>
        <li data-ng-repeat="client in clients | filter : filter.name | orderBy : 'city' "> {{client.name}}<br> </li>           
    </ul>   
    New Client: <input type="text" data-ng-model="newClient.name"><br />
    Client City<input type="text" data-ng-model="newClient.city"><br />    
    <button data-ng-click="addClient()">Add Customer</button><br />
    <a href="#/view2">view 2</a>
</div>

view2.html

<div class="container">
    <input type="text" data-ng-model="filter.name"> {{filter.name | uppercase}} 
    <br>
    <h3>view 2 </h3>
    <ul>
        <li data-ng-repeat="client in clients | filter : filter.name | orderBy : 'city' "> {{$scope.client.name}} in {{$scope.client.city}}<br> </li>           
    </ul>   
    <a href="#/view1">view 1</a>
</div>
Solution

  • templateUrl: 'partials/view1.html'
    & templateUrl: 'partials/view2.html'

    because the file is already in root folder.