Question

我是Angular js的新手。我使用的是1.6版本。

我正在尝试使用工厂从本地json文件中读取数据以显示信息。我一直收到这个错误：

plotFactory.getPlots(...).then(...).error不是函数

我的本地文件结构是

App/scripts/data/plots.json

App/scripts/app.js

App/scripts/main.controller.js

App/scripts/plot.factory.js

App/index.html

main.controller.js

angular
    .module('myApp')
    .controller('mainController',function ($scope, $http, plotFactory) {

        $scope.plots = [];

        //Method 1
        plotFactory.getPlots().then(function successCallback (resp) {
            console.log("If you reading this , momma we made it.")
            $scope.plots = resp.data;
        }).error(function (error) {
            console.log(error)
        });

    });

plot.factory.js

angular
.module('myApp')
.factory('plotFactory', function($http) {

    function getPlots() {
        return $http.get('data/plots.json');
    }

    return {
        getPlots: getPlots
    }
});

的index.html

<body ng-app="myApp" ng-controller="mainController">

    <a class="accessibility" href="#main-content" accesskey="S">Skip to Content</a>
    <div class="loading-screen">
        <img src="_assets/images/pentair_logo.png" width="359" height="100" alt="Emerson" />
    </div>
    <div id="wrapper">
        <header>
            <div class="container-fluid">
                <a href="#" class="logo"><img class="logoimg" src="_assets/images/pentair_logo.png" alt="Pentair" /><span>Interactive Sales Presentation</span></a>
                <a href="#" class="menu-opener pull-right"><span></span></a>
            </div>
        </header>
        <div class="menu-wrapper">
            <div class="mobile-menu">
                <ul class="collapsible">
                    <li ng-repeat="mobileMenu"><a href={{mobileMenu.url}}>{{mobileMenu.name}}</a></li>
                </ul>
            </div>
        </div>

        <div class="main-content">
            <div class="container-fluid">
                <div class="content-wrapper">
                    <img src="_assets/images/ui/Main_Background_edit.jpg" class="map-overlay" width="1024" height="768" alt="Oil and Gas" />
                    <div class="map-wrapper">
                        <div class="map-control level-01 panzoom">
                            <img src="_assets/images/ui/Main_Background_edit.jpg" class="map-bg" width="1024" height="768" alt="Oil and Gas" />
                            <div class="overlay"></div>

                            <!-- All Map Points -->
                            <div ng-repeat="plot in plots">
                                <a href={{plot.url}} class="plot level1 arrow-head flip {{plot.sid}}"><div><span class="title">{{plot.name}}</span><span class="number">+</span></div></a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <div class="container-fluid">
                Footer
            </div>
        </footer>

    </div>


    <!-- Load Angular Dependencies -->


    <!-- Async load of Javascript  -->
    <script type="text/javascript">
        function loadJS(e) { var t = document.createElement("script"); t.type = "text/javascript", t.async = !0, t.src = e; var n = document.getElementsByTagName("head")[0]; n.appendChild(t) };
        loadJS('_assets/js/all.min.js');
    </script>

    <!-- In case javascript is disabled -->
    <noscript>
        <script type="text/javascript" src="_assets/css/all.min.js"></script>
    </noscript>

    <!-- Main App -->

    <script type="text/javascript" src="Angular/angular.min.js"></script>

    <script src="Angular/angular-route.min.js"></script>
    <script src="scripts/app.js"></script>

    <script src="scripts/plot.factory.js"></script>
    <script src="scripts/main.controller.js"></script>

</body>

我尝试过几条不同的路径。然而，如果我将json数据作为变量留在我的工厂中，我的数据将被读取...但我试图将数据与控制器分开以获得良好的实践。我的猜测是该函数导致错误：不是函数，因为路径没有返回任何有效的函数，因此失败了.then函数。它是我工厂的$http.get()请求中的文件路径吗？还是我错过了别的什么？

更新了get函数和回调函数。

plotFactory.getPlots().then(function successCallback(response) { 
    //this callback will be called asynchronously
   //when the response is available 
   $scope.plots = response.data;
   console.log("Method 2 worked!") 
},function errorCallback(response) { 
   console.log("We got a problem...") 
});

仍未找到data/plots.json的404。这可能是参考错误吗？

Answer 1

问题在于您的文件路径。如果您在本地服务器上运行该应用程序，请正确提及该路径。假设您在localhost端口3000中运行，它应该类似于：

$http.get("localhost:3000/myApp/data/plots.json");

或者，如果您已在浏览器中打开index.html并对其进行测试（虽然在Chrome中无效但在FireFox中有效），请提及控制器文件中json文件的路径，如：

$http.get("../data/plots.json")

假设它位于＆＃39;脚本＆＃39;的相同文件夹中文件夹存在。

Answer 2

浏览器内JavaScript的URL相对于运行脚本的HTML文档的URL而不是针对脚本本身的URL进行解析。

由于HTML文档位于App/index.html，因此您需要scripts/data/plots.json，而不是data/plots.json

（这假设Angular并不是在使用History API来改变URL）。

Answer 3

仍未找到data/plots.json的404。这可能是参考错误吗？

使用scripts/data/plots.json

也可以使用.catch代替.error。

有关详细信息，请参阅Why are angular $http success/error methods deprecated? Removed from v1.6?

Answer 4

感谢您的投入。事实证明，这个解决方案有两个部分，一个是文件路径。

第1部分：

 return $http({
                url: "/scripts/data/plots.json",
                method: 'GET'            
            })

使用正确的路径。

第2部分：对我来说比较棘手。我为在问题中不包括这个而道歉。我使用的是Visual Studio 2013，它使用的Web.config文件需要设置为允许某些类型的JSON文件。直到我的高级开发人员指出它，我才知道。我会记住这一点，以便将来查询。

再次感谢！

    <?xml version="1.0"?>

<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>

    <system.web>
      <compilation debug="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5" />

    </system.web>

  **<system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>**

</configuration>

在本地服务器上使用$ http.get（）时，为什么一直找不到404？

更新了get函数和回调函数。

4 个答案: