CODEWITHSUNDEEP
angularjs
StreetCoder
StreetCoder

Reputation: 10061

Unable to route in Angularjs

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.

Upvotes: 1

Views: 371

Answers (1)

Josh
Josh

Reputation: 44906

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'

Upvotes: 1

Related Questions