Unable to route in Angularjs

Question

I have been leaning AngularJS from e-book of Dan Wahlin. There author tried to explain about Modules, Route and Factories from the page 53. Then, I wrote the code in index.html as:

<div class="container" data-ng-app="demoApp">
<div>
    <h3>Adding Module Configuration and Routing</h3>
    <!-- ng-view handles loading partials into it based
         upon routes -->
    <div data-ng-view=""></div>
</div>
</div>


<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var demoApp = angular.module('demoApp', []);

demoApp.config(function ($routeProvider) {
    $routeProvider
            .when('/view1',
            {
                controller: 'SimpleController',
                templateUrl: urlBase + 'View1.html'
            })
        //Define a route that has a route parameter in it (:customerID)
            .when('/view2',
            {
                controller: 'SimpleController',
                templateUrl: urlBase + 'View2.html'
            })
            .otherwise({ redirectTo: '/View1' });
});

demoApp.controller('SimpleController', function ($scope) {
    $scope.customers = [
        { name: 'Dave Jones', city: 'Phoenix' },
        { name: 'Jamie Riley', city: 'Atlanta' },
        { name: 'Heedy Wahlin', city: 'Chandler' },
        { name: 'Thomas Winter', city: 'Seattle' }
    ];
});

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


</script>

Then I created two html pages - View1.html and View2.html and in the View1.html, I wrote:

<div class="container">

    <h3>View 1</h3>

    Name<br />
    <input type="text" data-ng-model="filter.name" />
    <br />
    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name">
            {{ cust.name }} - {{ cust.city }}
        </li>
    </ul>

    <br />Customer Name<br />
    <input type="text" data-ng-model="newCustomer.name" />
    <br />

    <br />Customer City<br />
    <input type="text" data-ng-model="newCustomer.city" />
    <br />

    <button data-ng-click="addCustomer()">Add Customer</button>
    <br />
    <a href="#/view2">View 2</a>

</div>

When I browse as http://localhost/angular/index.html#/view1 , I do not see anything that's mean no output. I do not understand actually where I did wrong.

Community · Accepted Answer · 2017-05-23 10:26:02Z

1

The biggest issue here is that you are not including the routing module, which is required since Angular 1.2+

<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>

<script type="text/javascript">

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

//Snip...

</script>

As mentioned by goutham in the comments, you also need to define urlBase which you do not appear to do anywhere.

Because JavaScript does type coercion for string concatenation, you are going to end up with the word 'undefined' appended to your templateUrl.

console.log(undefined + "view1.html"); // 'undefinedview1.html'

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Mar 27, 2014 at 23:56

Josh

45k7 gold badges106 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

goutham Over a year ago

Also var base_url = "someUrl" ; should be added at the top of the config function.

StreetCoder Over a year ago

Thanks @Josh and goutham. Both of your suggestion helped me. Just need to know one thing remained that is I can't add customer now. Could you tell me please.

Collectives™ on Stack Overflow

Unable to route in Angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related