CODEWITHSUNDEEP
angularjsangularjs-routing
areller
areller

Reputation: 5238

AngularJS - routing doesn't work

I am learning angular js for a project i'm building.

So far it seems like a great framework, very helpful and intuitive, but i am having problems whenever i try to implement routing...

I have this code:

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8" />

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

    <script type="text/javascript">

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

        app.config(function ($routeProvider) {

            $routeProvider.when('/', {
                templateUrl: 'home.html',
                controller: 'HomeController'
            }).otherwise({ redirectTo: '/' });

        });

        app.controller('HomeController', function ($scope) {

            $scope.people = [

                {
                    name: "Arik",
                    age: 19
                },

                {
                    name: "Bar",
                    age: 19
                }

            ];

        });

    </script>

</head>
<body>

    <div data-ng-view></div>

</body>
</html>

and home.html:

<ul>

    <li data-ng-repeat="person in people">
        <b>{{ person.name }}</b> - {{ person.age }}
    </li>

</ul>

The problem is that it just doesn't work, the page shows blank. I tried searching in the official documentation but nothing helped...

What am i doing wrong?

By the way, i am using the latest version, 1.4.4

Thanks, Arik

Upvotes: 1

Views: 909

Answers (2)

Alejandro Garcia Anglada
Alejandro Garcia Anglada

Reputation: 2403

Your code looks great, and the prove is that it works take a look at this, I would recommend you to load the scripts after the html, so you don't keep the user looking at a blank page till the file is downloaded.

Upvotes: 1

Matias Fernandez Martinez
Matias Fernandez Martinez

Reputation: 1885

I just tested your code here and works fine, probably the issue is in your path to home.html or your web server or something similar, look at your environment.

Try out grunt-connect to create a web server while you are developing, it's very helpful

Also i recommend you to use ui-router, is much more simple. Here is a working template for routing with ui-router in plunker

Upvotes: 2

Related Questions