Routing issues with Angular JS

Question

I can't for the life of me figure out what I'm doing wrong. I'm going off a John Linquist video doing some basic AngularJS routing. When I don't have my table in a partials folder and in my index.html page (and not using ng-view so I don't have to configure routing, it works fine. However, I try to inject my a partial view of my table with <ng-view></ng-view> then I get the error: https://docs.angularjs.org/error/$injector:modulerr?p0=enterprise&p1=Error:+%5B$injector:un (from the angular docs)

app.js

angular.module('enterprise',[])
    .config(function($routeProvider){
        $routeProvider.when("/",{templateUrl:"/partials/list.html"})
    })
//this is the that iterated over in the partial view's ng-repeat
function AppController($scope){
    $scope.crew =[
        {name:'Picard',description:'captain'},
        {name: 'Riker',description:'number 1'},
        {name:'Word',description:'Security'}
    ]
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Routing</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
</head>
<body>
<div ng-app="enterprise" ng-controller="AppController">
    <a href="/"><h2>Enterprise Crew</h2></a>
    <ng-view></ng-view>
     //list.html should be injected here
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

list.html

<table class="table table-striped" style="width: 250px">
    <thead>
    <tr>
        <td>Name</td>
        <td>Description</td>
        <td><i class="glyphicon glyphicon-plus-sign"></i> </td>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="person in crew">
        <td>{{person.name}}</td>
        <td>{{person.description}}</td>
        <td><i class="glyphicon glyphicon-edit"></i></td>
    </tr>
    </tbody>
</table>

Nix · Accepted Answer · 2014-01-05 20:28:02Z

1

You need to include ng-route.

 angular.module('myApp', ['ngRoute']).

cdn:

http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js

answered Jan 5, 2014 at 20:28

Nix

58.8k31 gold badges154 silver badges205 bronze badges

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

2 Comments

wootscootinboogie Over a year ago

Well, thank you sir. I guess I found a version of angular that didn't have routing built in because in all of the tutorials I've seen they don't include it specifically, but this was it.

Nix Over a year ago

They dont include it in the 1.2 versions. Its a common issue.

Community · Accepted Answer · 2017-05-23 12:28:42Z

0

And is it working like that?

angular.module('enterprise',[])
.config(function($routeProvider){
    $routeProvider.when("/",{templateUrl:"/partials/list.html"})
})
.controller("AppController", ['$scope',
    function ($scope){
        $scope.crew =[
            {name:'Picard',description:'captain'},
            {name: 'Riker',description:'number 1'},
            {name:'Word',description:'Security'}
        ];
    }
 ]);

Ok, response is here : AngularJS 1.2 $injector:modulerr

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Jan 5, 2014 at 20:30

farvilain

2,5622 gold badges15 silver badges24 bronze badges

2 Comments

wootscootinboogie Over a year ago

It's working as long as I'm not trying to use routing.

wootscootinboogie Over a year ago

Nix was right, it was because the routing js file wasn't included as a dependency in the module.

Collectives™ on Stack Overflow

Routing issues with Angular JS

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related