CODEWITHSUNDEEP
javascriptangularjs
wootscootinboogie
wootscootinboogie

Reputation: 8695

Routing issues with Angular JS

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: http://goo.gl/nZAgrj (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>

Upvotes: 0

Views: 2015

Answers (2)

farvilain
farvilain

Reputation: 2562

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

Upvotes: 0

Nix
Nix

Reputation: 58522

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

Upvotes: 1

Related Questions