1

I am attempting to load two different partials into my page. The routes seem to be working. i.e i'm redirected to #/view1 by default, which is what I want. However when Partials/View1.html is not loaded into the page, and same is true when I manually navigate to #/view2. Can't seem to figure out what I am missing.

Here is index.html:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title>Using AngularJS Directives and Data Binding</title>
</head>

<body>

    <div>
        <div ng-view>
            <!-- Placeholder for views -->
        </div>

    </div>

    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>

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

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


        demoApp.controller('SimpleController', function ($scope) {
            $scope.customers = [
                { name: 'John Smith', city: 'Phoenix' }, 
                { name: 'John Doe', city: 'New York City' }, 
                { name: 'Jane Doe', city: 'San Francisco' }
            ];

            $scope.addCustomer = function() {
                $scope.customers.push(
                {
                    name: $scope.newCustomer.name, 
                    city: $scope.newCustomer.city
                });
            };
        });

    </script>


</body>

</html>

and Partials/View1.html : 

<div class="container">
    <h2>View 1</h2>

    Name: 
    <br>
    <input type="text" ng-model="filter.name">
    <br>

    <ul>
        <li ng-repeat="cust in customers | filter: filter.name | orderBy: 'city'">{{ cust.name }} - {{ cust.city }}</li>

    </ul>

    <br>
    Customer Name:  <br>
    <input type="text" ng-model="newCustomer.name">
    <br>
    Customer City:  <br>
    <input type="text" ng-model="newCustomer.city">
    <br>
    <button ng-click="addCustomer()">Add Customer</button>
    <br>
    <a href="#/view2">View 2</a>

</div>

And Partials/View2.html

<div class="container">
    <h2>View 2</h2>

    Name: 
    <br>
    <input type="text" ng-model="city">
    <br>

    <ul>
        <li ng-repeat="cust in customers | filter: name | orderBy: 'city'">{{ cust.name }} - {{ cust.city }}</li>

    </ul>
</div>
user2994560
  • 1,269
  • 4
  • 18
  • 30
  • Have you checked the console for errors? Maybe the paths to the partials aren't right in which case you should see an error. – net.uk.sweet Feb 06 '14 at 01:50
  • yes, there is an error stating: XMLHttpRequest cannot load file:///Users/user1/Desktop/angular/Partials/View1.html. Cross origin requests are only supported for HTTP. – user2994560 Feb 06 '14 at 01:54
  • XMLHttpRequests don't really work well locally - http://stackoverflow.com/questions/7683596/xmlhttprequest-for-local-files, so your best bet is to install a webserver to host the content via http locally. apache is probably the easiest / most widely installed, although you can use node, nginx, etc.. – streetlogics Feb 06 '14 at 01:59
  • good call. i uploaded to my server and everything worked fine. thanks – user2994560 Feb 06 '14 at 02:02

1 Answers1

0

Try it with a relative URL for the template: templateUrl: './Partials/View2.html'

EDIT (from comment):

XMLHttpRequests don't really work well locally - xmlhttprequest for local files, so your best bet is to install a webserver to host the content via http locally. apache is probably the easiest / most widely installed, although you can use node, nginx, etc..

Community
  • 1
  • 1
streetlogics
  • 4,640
  • 33
  • 33