Question

我目前在angularJS应用程序的index.html中包含了所有服务文件和控制器文件，它运行正常。

但我想在模板文件中包含相应的服务文件和控制器文件，以便在初始加载时不会加载我的应用程序主页的不需要的文件：从而减少加载主页的时间。

我试过这样做，但我无法从服务中获取json数据。

这是我到目前为止所做的事情

app.js

var app = angular.module('app', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/books',
    {
        templateUrl:'app/templates/books.html',
        controller:'booksController'
    }).when('/games',
    {
        templateUrl: 'app/templates/games.html',
        controller: 'gamesController'
    });
    $locationProvider.html5Mode(true);
});

eventData.js服务文件

app.factory('eventData', function ($http, $log, $q) {

    return {
        getEvent: function () {
            var deferred = $q.defer();
            $http({
                method: 'GET', url: 'https://www.googleapis.com/books/v1/volumes?q=harry%20potter'
            }).success(function (data, status, headers, config) {
                deferred.resolve(data);
            }).error(function (data, status, headers, config) {
                deferred.reject(status);
            });
            return deferred.promise;
        },
        getGames: function () {
            var deferred = $q.defer();
            $http({
                method: 'GET', url: 'https://www.googleapis.com/books/v1/volumes?q=hunger%20games'
            }).success(function (data, status, headers, config) {
                deferred.resolve(data);
            }).error(function (data, status, headers, config) {
                deferred.reject(status);
            });
            return deferred.promise;
        }
    };
});

eventController.js

'use strict';

app.controller("EventController", function EventController($scope,eventData) {
    $scope.event = eventData.getEvent();
    $scope.event.then(function(event) {
        console.log(event);
        $scope.items = event.items;
        console.log($scope.items);
    },function(status) {
        console.log(status);
    });
});

BooksController.js

'use strict';

app.controller("booksController", function booksController($scope, eventData) {
    $scope.event = eventData.getEvent();
    $scope.event.then(function (event) {
        console.log(event);
        $scope.items = event.items;
        console.log($scope.items);
    }, function (status) {
        console.log(status);
    });
});

books.html

<script src="app/controllers/eventController.js"></script>
<script src="app/controllers/booksController.js"></script>
<script src="app/services/eventData.js"></script>
<div style="padding-left: 20px;padding-right: 20px">
    <div class="row">
        <h3>Sessions</h3>
        <ul style="list-style-type: none;">
            <li ng-repeat="session in items">
                <div class="row session">
                    <div class="well col-md-12">
                        <h4 class="well">{{session.volumeInfo.title}}</h4>
                        <h6 style="margin-top: -10px">{{session.volumeInfo.publishedDate}}</h6>
                        <span>Page Count: {{session.volumeInfo.pageCount}}</span><br />
                        <span>Authors: {{session.volumeInfo.authors}}</span>
                        <p>{{session.searchInfo.textSnippet}}</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

的index.html

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <title>Airlines!</title>
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <meta charset="utf-8">
        <base href="/airlines/">
    </head>
    <body>
        <div class="container">
            <div class="navbar">
                <div class="navbar-inner">
                    <ul class="nav">
                        <li><a href="books">Harry Potter</a></li>
                        <li><a href="games">Hunger Games</a></li>
                    </ul>
                </div>
            </div>
            <ng-view></ng-view>
        </div>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/angular.js"></script>
        <script src="Scripts/angular-route.js"></script>
        <script src="app/app.js"></script>
    </body>
</html>

你能说出我做错了什么吗？

angularjs：如何链接到模板文件

0 个答案: