我是angular的新手,并且很难让ngRoute来提取我的模板文件。

这是我的index.html:

<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="app.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<nav>
    <div>
        <ul>
             <li><a href="#/home">home</a></li>
        </ul>
    </div>
</nav>

<body>
    <div ng-view>
    </div>
</body>


</html>


这是我的app.js:

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

myApp.controller('MainCtrl', function($scope) {
    $scope.message = 'Hello World';
});

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/home', {
            templateUrl: 'pages/home.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/home'
        });
}]);


这是我的pages / home.html:

<div ng-controller="MainCtrl">
    <p>Test</p>
    <p>{{ message }}</p>
</div>


我可以看到它在根URL后面附加了#/,所以也许这部分起作用了。但是,它似乎并未在“ pages / home.html”处呈现模板。

我已经检查了CDN网址,以确保没有任何版本不一致,不是这样,但是事实并非如此。

这几乎是我的第一个Angular项目,而我刚刚离开了文档,但是肯定有一些看不到的东西。来自其他服务器端项目,缺少堆栈跟踪正在杀死我哈哈。

上面的代码中是否缺少我想要的模板以'/'呈现的内容?

谢谢!

最佳答案

这是我的代码,工作正常,您可以从中寻求帮助。

var EventList = angular.module("EventList", ['ngRoute' ,'infinite-scroll']);
EventList.config(function($routeProvider) {
    //$locationProvider.html5Mode(true);
    $routeProvider
        .when('/', {
            templateUrl: 'views/business/business_home_events.html',
            controller: 'EventListController'
         });
});

EventList.controller('EventListController', ['$scope',  '$http', '$route', function($scope,  $http, $route){

        // Do your work

}]);

09-16 10:54