如何将JSON传递至Angular控制器？含文件导入与数据赋值疑问

嘿，作为Angular新手能自己搭项目已经超棒啦！咱们逐个解决你的疑问：

一、检查controller.js和bootstrap.css是否成功导入 #

新手最容易踩的坑就是文件路径和引入顺序问题，你可以通过浏览器开发者工具快速验证：

• 先确认HTML里的引入代码和顺序：
  • bootstrap.css要放在<head>标签里，路径要和文件实际位置匹配，比如：

    <head>
      <meta charset="UTF-8">
      <title>我的项目</title>
      <link rel="stylesheet" href="./bootstrap.css"> <!-- 这里路径要与文件实际位置对应 -->
    </head>
    

  • controller.js必须在Angular核心库之后引入，要是你的index.js存了JSON对象，也要放在controller之前，比如：

    <body ng-app="myApp" ng-controller="myController">
      <!-- 页面内容 -->
      <script src="./angular.min.js"></script> <!-- 先引入Angular核心库 -->
      <script src="./index.js"></script> <!-- 再引入存数据的文件 -->
      <script src="./controller.js"></script> <!-- 最后引入控制器 -->
    </body>
    

• 打开浏览器开发者工具（按F12），切换到「网络」标签页，刷新页面：
  • 如果bootstrap.css或controller.js的请求状态是404，说明路径写错了，调整路径和文件实际位置一致即可；
  • 如果看不到这两个文件的请求记录，那就是你根本没在HTML里加对应的link或script标签，赶紧补上。
• 再看「控制台」标签页，如果出现ReferenceError: xxx is not defined这类错误，大概率是文件没导入成功，或者引入顺序搞反了（比如controller在Angular之前引入）。

二、关于JSON数据的获取与$scope赋值 #

咱们分两种场景来说，你可以根据自己的需求选择：

场景1：直接用index.js里的JSON对象（适合静态测试，无需后端） #

如果你的index.js里已经写好了JSON对象，比如：

// index.js 原代码
const jobs = {
  data: [
    { id: 1, title: "前端开发工程师" },
    { id: 2, title: "后端开发工程师" }
  ]
};

要让controller能访问到这个jobs对象，有两种方式：

1. 简单粗暴版（适合新手快速测试）：
   不用搞导出导入，直接把jobs作为全局变量（浏览器里的script默认是全局作用域），只要index.js在controller.js之前引入，那你写的$scope.data = jobs.data就完全有效！写完可以在controller里加个console.log($scope.data)，刷新页面看控制台有没有输出数据，就能快速验证了。
2. 规范版（避免全局变量污染）：
   用ES6的导出导入语法，需要给script标签加type="module"：

   // index.js 修改为导出对象
   export const jobs = {
     data: [/* 你的数据内容 */]
   };
   

   <!-- HTML里的script要加type="module" -->
   <script type="module" src="./controller.js"></script>
   

   // controller.js 里导入并赋值
   import { jobs } from './index.js';
   
   angular.module('myApp', [])
     .controller('myController', function($scope) {
       $scope.data = jobs.data; // 这时候赋值完全有效
       console.log($scope.data); // 打印验证数据
     });
   

场景2：读取data.json文件（适合动态获取数据，配合后端） #

如果你的数据存在单独的data.json文件里，那需要用Angular的$http服务来发起请求获取数据，controller代码要改成这样：

angular.module('myApp', [])
  .controller('myController', function($scope, $http) {
    // 发起GET请求获取data.json
    $http.get('./data.json')
      .then(function(response) {
        // 请求成功后，把数据赋值给$scope.data
        $scope.data = response.data.data;
        console.log('加载数据成功：', $scope.data);
      })
      .catch(function(error) {
        // 请求失败时打印错误信息
        console.error('加载数据失败：', error);
      });
  });

这种方式需要确保你的后端路由已经配置了静态文件访问权限，否则会出现404错误（比如后端要把存放data.json的目录设为静态资源目录）。

总结一下$scope.data = jobs.data是否有效？ #

只要jobs对象能在controller的作用域里被访问到（不管是全局变量还是正确导入的），这行代码就完全有效！赋值完成后，你就能在HTML里用ng-repeat="item in data"来循环渲染数据啦～

内容的提问来源于stack exchange，提问作者tautf