如何在 Laravel + AngularJs 上读取脚本标签内的 JSON答案

【问题标题】：How to read JSON inside script tag on Laravel + AngularJs如何在 Laravel + AngularJs 上读取脚本标签内的 JSON
【发布时间】：2016-05-05 06:47:58
【问题描述】：

我很困惑它未能在 Angular + Laravel(5.2.11) 上使用 JSON

我的计划是，
1. 将 JSON 传送到刀片文件
2. 获取脚本标签内的 JSON，并将其设置为变量
3.显示每个数据

我添加了 interpolateProvider 以避免重复 Laravel 和 Angular 描述。但实际显示的数据是

我检查了以下是我预期的显示。

var json = {!! $contents !!};

控制器.php

public function show()
{
    $champions = DB::table('Champion')
        ->select('ChampionName', 'ChampionKey')
        ->orderBy('ChampionKey')
        ->get();

    return view('allChampionsPage')->with('contents', json_encode($champions));
}

allChampionsPage.blade.php

@extends('layouts.defaultAngular')

@section('menuItem1', 'When buy')
@section('menuItem2', 'When killed')
@section('menuItem3', 'Where lane')
@section('menuItem4', 'How many CS')
@section('menuItem5', 'Search')

defaultAngular.blade.php

<!DOCTYPE html>
<html lang="ja" ng-app="itemBuildStatisticsApp">
<head>
  <link rel="stylesheet" href="{{{asset('/css/bootstrap.css')}}}" type="text/css">
  <link rel="stylesheet" href="{{{asset('/css/default.css')}}}" type="text/css">
</head>

<body ng-controller="ChampionsController as ChampionsCtrl">
  <?php include_once("analytics/analyticstracking.php") ?>
  <div id="container">

    <div id="header" class="middleContentItem"></div>

    <div id="middle">
      <div id="menu" class="middleContentItem"></div>

      <div id="contents" class="middleContentItem">
        <ul ng-repeat="champion in ChampionsCtrl.champions">
          <% champion.ChampionKey + ', ' + champion.ChampionName %>
        </ul>
      </div>
    </div>

    <div id="right"></div>

    <div id="footer" class="middleContentItem"></div>
  </div>

  <script type="text/javascript">
    var json = {!! $contents !!};

    var app = angular.module('itemBuildStatisticsApp', [], funtion($interpolateProvider){
      $interpolateProvider.startSymbol('<%');
      $interpolateProvider.endSymbol('%>');
    });

    app.controller('ChampionsController', function(){
      this.champions = json.query();
    });
  </script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</body>
</html>

【问题讨论】：

在浏览器控制台中查找错误。如果您只是将 Laraval 视为后端 api 并使用 $http 发出数据请求，您会发现 angular 简单得多。不需要有 2 个模板引擎。 json.query() 很可能也不是函数
另外... angular.min.js 必须在您的代码之前加载，否则angular 将在您的代码运行时未定义
谢谢。我没有看到如何直接从 Laravel 传递到 AngularJS，我应用了一种方式，var json = {!! $内容!!};。故意创建了两个模板引擎来尝试扩展刀片，没关系。控制台错误的数量是两个，第一，未捕获的错误：[$injector:modulerr] 无法实例化模块 itemBuildStatisticsApp，原因是：错误：[$injector:nomod] 模块'itemBuildStatisticsApp'不可用，第二，未捕获的 SyntaxError: missing ) after参数列表（行是 var app = ....）。我考虑暂停，因为没有预付款。我必须专注于学习 Angularjs。
控制台中针对这些错误的链接将解释它们或使用 Angular 的开发版本进行详细输出。显然有一些依赖和语法问题
根据您的建议，我重写了一个程序，成功了！！ 1. 函数（函数）拼写错误，2. 将 json.query() 替换为 angular.fromJson(json)

标签： javascript php angularjs json laravel

【解决方案1】：

修改后的代码

  <script type="text/javascript">
var json = {!! $contents !!};

var app = angular.module('itemBuildStatisticsApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

app.controller('ChampionsController', function(){
  this.champions = angular.fromJson(json);
});

【讨论】：