什么阻止AngularJS中的链接出现在ng-view中?

时间:2015-01-20 23:07:46

标签: angularjs

我正在使用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>

0 个答案:

没有答案