how to solve routeProvider issues with angular js sample?

Question

I have just started trying out angular js and using the egghead.io videos. One of the samples is about routeProvider. I am using vs.net 2012 to run it but cant get it to display any of the templates or messages when I hit:

http://localhost/app.html/pizza

This is the sourcecode inside of app.html:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    // Create a new module
    var app = angular.module("app", []);

    app.config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: "app.html",
            controller: "AppCtrl"
        })
            .when('/pizza', {
                template: "yum"
            })
    });

    app.controller("AppCtrl", function ($scope) {
        $scope.model = {
            message: "this is my app"
        }
    });
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app" ng-controller="AppCtrl">

</div>

score 2 · Answer 1 · answered Mar 26 '15 at 18:28

Modified from JoeyP's post to make it work:

index.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    // Create a new module
    var app = angular.module("app", []);

    app.config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: "app.html",
            controller: "AppCtrl"
        })
            .when('/pizza', {
                templateUrl: "yum.html" // there was a typo here in the OP
            })

            .otherwise( {
            redirectTo: '/'
        });
    });

    app.controller("AppCtrl", function ($scope) {
        $scope.message= "this is my app";

    });
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
  <div ng-view></div>
</div>

app.html

<div>

  <a href="#/pizza">Go get some pizza! </a> {{message}}
</div>

yum.html

<p>
 MMMM, pizza
 <a href="#/pizzaaaaaaaaa">more pizzaaaaaaaa</a>
</p>

Note: The code need to be run on web-server (ex. Apache) to function.

score 0 · Answer 2 · answered Oct 21 '13 at 21:49

app.html and yum.html are fetched by angular after the page has loaded. So in your example http://localhost/pizza should point to the page with the above code and yum.html (as well as app.html) should be located in the root of your project.

On load angular will download app.html if you hit "/" and yum.html if you hit "/pizza". Here's an example

index.html (excluding <html>,<head>,<body>, etc)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    // Create a new module
    var app = angular.module("app", []);

    app.config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: "app.html",
            controller: "AppCtrl"
        })
            .when('/pizza', {
                template: "yum.html" // there was a typo here in the OP
            })
    });

    app.controller("AppCtrl", function ($scope) {
        $scope.model = {
            message: "this is my app"
        }
    });
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
  <div ng-view></div>
</div>

app.html

<div>
  <p ng-bind="model.app"><p>
  <a ng-href="/pizza">Go get some pizza!</a>
</div>

yum.html

<p>
 MMMM, pizza
</p>

The ng-controller attribute isn't needed because you defined the controllers in the routes. You do need the ng-view attribute somewhere in the main html file so angular knows where to insert the template.

score 0 · Answer 3 · edited May 23 '17 at 11:59

John from egghead.io really needs to update this section of his tutorial.

See this answer: Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider

you need to add this dependency:

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

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

P.S. template: "yum" is totally valid, as in template: "<p>yum</p>"
(JoeyP thinks you're trying to do templateUrl: "yum.html")

how to solve routeProvider issues with angular js sample?

3 Answers3