CODEWITHSUNDEEP
javascripthtmlangularjsroutes
JimmySmithJR
JimmySmithJR

Reputation: 311

AngularJS Routed Page Not Showing

So quick question I've been looking at this code for awhile but cannot find why, it just gives me the output on the page

Partials/View1.html

I'm not trying to just post here whenever I run into some small issue but this has been baffling me for awhile now, and I get no errors on the console. I run the code from http://plnkr.co/edit/sN9TagVBOdX3mkrxaTiu?p=preview, mentioned on another post and it works fine, but I don't get the right output from this. The following is the index.html (the main page)

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
</head> 
<body>
    <div ng-view></div>


        <script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
    <script src="scripts.js"></script>
</body>

My script look likes: 

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

            demoApp.config(function($routeProvider) {
            $routeProvider
                .when('/',
                      {
                        controller: 'SimpleController',
                        template: 'Partials/View1.html'
                      })
                .when('/partial2',
                     {
                        controller: 'SimpleController',
                        template: 'Partials/View2.html'
                    })
                .otherwise({ redirectTo: '/'});
         } );

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

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

            });
        }
    });

And I don't get what is supposed to be shown from the view1.html, I just get what I showed up above. This is the code 

<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">
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>

Upvotes: 0

Views: 53

Answers (1)

diffalot
diffalot

Reputation: 101

you should be using templateUrl instead of template:

.when('/partial2',
   {
     controller: 'SimpleController',
     templateUrl: 'Partials/View2.html'
   })

https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Upvotes: 2

Related Questions