Question

我正在使用 Symfony2 构建一个相当简单的API，现在我正在尝试在我的包中创建一些带有 AngularJS 的简单页面，以最终显示我的结果API调用。

如何让AngularJS正常工作？

我通过app/console bundle:generate生成了一个包，所以我在src / Portfolio / Bundle / APIBundle下工作，这就是我基本上把我所有的资源等等等等。一切真的。

Javascripts位于src/Portfolio/Bundle/APIBundle/Resources/public/js

之下

JS / KitchenSink.js

angular.module('KitchenSink', [], function($interpolateProvider){
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol  (']]');
});

JS / index.ctrl.js

var module = angular.module('KitchenSink')

module.controller('IndexController', function(){
    var vm = this;

    vm.Title = 'Portfolio API KitchenSink';
});

基本模板：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    {% block head %}{% endblock %}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    {% block stylesheets %}{% endblock %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
    <script src="PortfolioAPIBundle::KitchenSink.js"></script>
    {% block head_javascripts %}{% endblock %}
</head>
<body ng-app="KitchenSink">
    {% block body %}{% endblock %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    {% block javascripts %}{% endblock %}
</body>
</html>

索引部分：

{% extends 'PortfolioAPIBundle::base.html.twig' %}
{% block title %}Portfolio API KitchenSink{% endblock %}
{% block head_javascripts %}<script src="PortfolioAPIBundle::index.ctrl.js"></script>{% endblock %}
{% block body %}
    <div ng-controller="IndexController as index" class="container">
        [[ index.Title ]]
    </div>
{% endblock %}

Answer 1

简单来说，您不应该使用基本模板，symfony应该用作后端。因此，您需要创建一个简单的html模板并在角度项目中初始化它，然后您可以发送其余的api请求。

Answer 2

不要将Twig模板与Angular混合使用，因为它们都使用类似的语法。例如，您可以重新定义模板内部{{和}}的含义，但我强烈建议您为Angular应用程序创建一个单独的项目或至少另一个根目录。

AngularJS无法在我的SF2应用程序中运行

2 个答案: