个人中心
gpt4 book ai didi

javascript - 调用 Angular 资源后， Angular 页面未加载

转载 作者：行者123 更新时间：2023-11-28 04:41:09 25 4
gpt4 key购买 nike

我正在使用 Angular 为本地出租车公司制作调度系统。我不是 Angular 及其所有功能的专家，因此我需要以下方面的帮助。我正在设置 Angular-route，这样我就可以将 html 页面注入(inject)到主 html 文档中，之后我设置了一个工厂来从我使用 springboot 用 java 编写的 REST 服务请求数据。成功收到数据后，我注意到我的测试页面不再加载，浏览器控制台也没有给我任何错误。

这些是我的文档:

主索引.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>dispatch</title>

        <!--bootstrap stylesheet-->
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>

        <!--custom stylesheet-->
        <link rel="stylesheet" href="css/index.css"/>
    </head>
    <body ng-app="DispatchApp">

        <ng-view ng-controller="AppCtrl">

        </ng-view>


        <!--import libraries-->
        <script src="node_modules/angular/angular.min.js"></script>
        <script src="node_modules/angular-resource/angular-resource.min.js"></script>
        <script src="node_modules/angular-route/angular-route.min.js"></script>
        <script src="node_modules/jquery/dist/jquery.min.js"></script>
        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

        <!--application imports-->
        <script src="index.js"></script>
        <script src="modules/views/index.js"></script>
        <script src="modules/views/vehicles/index.js"></script>
        <script src="modules/services/index.js"></script>
        <script src="modules/services/api/index.js"></script>
        <script src="modules/services/api/vehicles/index.js"></script>
    </body>
</html>

我制作了一个测试 html 文件来查看它是否加载到 ng-view 标记中它只包含一个带有一些文本的 p 标签。

所有 View 的主 Controller :

angular.module("DispatchApp.views",['ngRoute', 'DispatchApp.views.vehicles'])

    //Default Route
    .config(function($routeProvider) {
        $routeProvider.otherwise("/vehicles");
    })
    .controller('AppCtrl', ['$scope', function($scope){

    }]);

我的测试 View 的 Controller :

angular.module('DispatchApp.views.vehicles', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/vehicles',
    {
        templateUrl: 'modules/views/vehicles/index.html',
        controller: 'viewsVehiclesController',
        reloadOnSearch: false,
        resolve:
        {
            resolvedVehiclesListing: [ 'VehicleApi', function(VehicleApi)
            {
                return VehicleApi.query().$promise;
            }]
        }
    });

}])


.controller('viewsVehiclesController',['$scope', 'resolvedVehiclesListing', function ($scope, resolvedVehiclesListing)
{
    //console.log(resolvedVehiclesListing.data);
    //$scope.vehicles = resolvedVehiclesListing.data;
}])

我用来从后端获取数据的 API 服务和工厂:

angular.module('DispatchApp.services.api', ['ngResource', 'DispatchApp.services.api.vehicles'])
.service('PrefixService', [function()
{
    var prefix = 'http://localhost:8080/';
    var Prefix = function()
    {
        return prefix;
    };

    return {Prefix : Prefix};
}])
.factory('DispatchApiResource', ['$resource', 'PrefixService', function($resource, PrefixService)
{
    return function(endpoint, a, config)
    {
        return $resource(PrefixService.Prefix() + endpoint, a , config);
    };
}])
.factory('VehicleApi', ['DispatchApiResource', function(DispatchApiResource)
{
    return DispatchApiResource('vehicle/:id', null,
        {
            'query': {method: 'GET', isArray: false},
            'update': {method: 'PUT', params: {id: "@id"}}
        });
}]);

我不知道为什么测试 html 文件没有被注入(inject)到 ng-view 标签中，即使数据是从后端接收的，要显示的 html 文件正在我的 Bowser 的网络选项卡中加载(google chrome)并且我在控制台中没有错误。

这是我的完整目录结构:

/dispatch-frontend
    index.html
    index.js
    /css
       index.css
    /modules
        /services
            index.js
            /api
                index.js
                /vehicles
                    index.js
        /views
            index.js
            /vehicles
                index.html
                index.js

很抱歉这篇文章很长，但我在这里很绝望。

最佳答案

您有一个 resolve 函数，它接受 VehicleApi 服务，但该服务已在 DispatchApp.services.api 中注册，没有在任何地方引用，因此解析将挂起:

angular.module('DispatchApp.services.api', ..)
.factory('VehicleApi', ['DispatchApiResource', function(DispatchApiResource)
{
    ..
}]);

我认为您忘记了对 api 模块的依赖:

angular.module('DispatchApp.views.vehicles', [
    'ngRoute',
    'DispatchApp.services.api'
])

关于javascript - 调用 Angular 资源后， Angular 页面未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43761521/

25 4 0
文章推荐： c++ - 使用模板类重载友元运算符
文章推荐： html - 需要有关悬停的 css 规则的帮助
文章推荐： c++ - 我应该按什么顺序构建我的 C++ 静态库
文章推荐： javascript - 从输入到不同 div 的多个图像预览
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com