我正在使用Cordova CLI构建我的第一个AngularJS应用程序并在Chrome中进行测试。现在看来,当您点击链接(“#/ gallery_details”)时,页面(位于“/views/gallery_details.html”)不会出现。相反,浏览器来自
[...]/foundation5/www/index.html
到
[...]/foundation5/www/index.html#/gallery_details
并保留index.html内容。但是,ng-repeat指令工作正常,正确填充Foundation 5布局。
在研究了很多网站后,看起来我的设置是正确的(尽管我研究的网页编码方式略有不同)。
你能告诉我我的编码在哪里吗?
Chrome Tools显示此错误,我不知道如何解决:
错误:[$ injector:unpr] http://errors.angularjs.org/1.2.28/ $ injector / unpr?p0 =%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route%20%3C - %20ngViewDirective
galleryApp.js:
var app = angular.module("app", ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/gallery_details', {
templateUrl: 'views/gallery_details.html',
controller: 'RouteController'
})
.otherwise({
redirectTo: '/'
}); $locationProvider.html5Mode(true);
}]);
/*
http://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-with
https://docs.angularjs.org/tutorial/step_07
*/
app.controller('RouteController,' ['$scope', '$http', function($scope, $http) {
$http.get('views/gallery_details.html').
success(function(data, status, headers, config) {
$scope.message ='<a href="../index.html">Return</a>"';
}).
error(function(data, status, headers, config) {
$scope.message ='ERROR! <a href="../index.html">Return</a>"';
});
}]);
的index.html:
<!doctype html>
<html class="no-js" lang="en" data-ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<!-- in the <head> according to https://docs.angularjs.org/tutorial/step_07 -->
<script src= "angular/angular.min.js"></script>
<script src="angular/angular-route.js"></script>
<script src="angular/galleryApp.js"></script>
<script src="angular/galleryCtrl.js"></script>
<script src="js/vendor/modernizr.js"></script>
</head>
[...]
<div class="row" data-ng-controller="galleryCtrl">
<div class="large-3 small-4 columns" data-ng-repeat="x in names | filter: id()">
<div style="line-height:150px; display:block;"><img src="{{ x.photo }}"></div>
<div class="panel">
<h5>{{ x.name2 }}</h5>
<a href="#/gallery_details">More</a><br>
</div>
</div>
<div data-ng-view></div>