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