Angular JS的路由问题

时间:2014-01-05 20:24:45

标签: javascript angularjs

我不能为我的生活弄清楚我做错了什么。我正在使用John Linquist视频做一些基本的AngularJS路由。如果我在partials文件夹和我的index.html页面中没有我的表格(并且没有使用ng-view,那么我就不必配置路由,它可以正常工作。但是,我尝试用<ng-view></ng-view>注入我的表格的部分视图然后我收到错误:http://goo.gl/nZAgrj(来自角度文档)

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>

2 个答案:

答案 0 :(得分:1)

您需要包含ng-route。

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

cdn:

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

答案 1 :(得分:0)

它是否像那样工作?

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'}
        ];
    }
 ]);

好的,回复在这里:AngularJS 1.2 $injector:modulerr

相关问题