README

此bundle为您提供了将AngularJs集成到Symfony2项目中的简单方法。

它包含AngularJs框架的1.0.4版本，以及一个易于扩展的angular模块目录。这些模块目前分为两大组

- vendors: Includes a set of widely used modules (ngResource, angular-ui, ...)
- undf: Includes a set of modules developed by our developers team.

此bundle还包含一个assetic过滤器（称为'angularjs'），它为您提供了一种简单的方法，将您希望在使用中的应用中包含的所有模块（仅这些）合并到一个输出文件中。

安装

编辑您的composer.json并在"require"对象中添加此行

	"undf/angularjsbundle" :"dev-master"

在AppKernel.php中启用此bundle

	new Undf\AngularJsBundle\UndfAngularJsBundle()

使用方法

- [1]. 查看可用模块列表

	php app/console undf:angularjs:catalogue

####- [2]. 进行模块选择

此bundle包含3个预定义的模块集

• novendors: 只包含框架，不包含模块。
• default: 包含目录中的所有供应商模块。
• all: 包含目录中的所有可用模块。

您可以通过编辑config.yml文件来添加自己的模块集

undf_angular_js:
  module_sets:
    mycustomset:
      #Use the star character to include all modules from a root module
      vendors: '*'
      undf: [uFileUpload, taggable]

您也可以扩展预定义的任何一组

undf_angular_js:
  module_sets:
    novendors:
      vendors: [ngResource, ui]

####- [3]. 为每个配置的模块集生成主文档

php app/console undf:angularjs:create-master-files @MyBundle/Resources/public/js

####- [4]. 在模板中包含与您想要使用的模块集相对应的主文档

{% javascripts
                //...your other javascript files...

                '@MyBundle/Resources/public/js/default.undfangular.js'

                //...your angularjs application files...

                filter="angularjs"
                output="yourOutputFile.js" %}
    <script src="{{ asset_url }}" type="text/javascript" ></script>
{% endjavascripts %}

"angularjs"与您想要应用的任何其他链式过滤器兼容。只需记住，它应该首先运行，否则，生成的内容将不会通过链式过滤器。

####- [5]. 配置您的angular应用程序以使用生成的模块集：一旦angularjs资产被导出，将在导出文件末尾创建一个新的angular模块；该模块将包含模块集中的所有模块作为模块依赖项。然而，这个模块直到您将其添加为angular应用程序的依赖项之前都是无用的。该模块的名称始终基于模块集的名称

var app = angular.module('myangularapp', ['undfDefaultModule']);

使用您自己的模块

####- [1]. 扩展目录

undf_angular_js:
  catalogue:
    mypackagename:
      myfirstmodule:
        description: 'Enter the module description here'
        files:
            # Absolute paths to the required files to use this module
            - @MyBundle/Resources/public/js/mymodule.js
      mysecondmodule:
        description: 'Enter the module description here'
        files:
            - @MyOtherBundle/Resources/public/othermodule.js

提示：运行undf:angularjs:catalogue命令以确保已添加新模块。

####- [2]. 将新模块添加到模块集中

undf_angular_js:
  module_sets:
    mycustomset:
      vendors: [ngResource, ui]
      mypackagename: [myfirstmodule, mysecondmodule]

重复“使用方法”部分中描述的步骤3、4和5。

贡献

这是我们第一次尝试将Symfony2与AngularJs集成。主要目标是获得一个灵活且易于扩展的AngularJs模块仓库，以便这些模块可以轻松地在不同项目之间重复使用。

任何改进此bundle的想法或建议都将非常受欢迎。

此外，不要犹豫发送pull request将您的Angular模块包含在bundle目录中，这只需2步即可完成。

1. Add the JS files within the Resources/public/js folder
2. Edit the catalogue file (Resources/config/catalogue.yml).

请确保您在目录中为模块使用的名称与JS文件中模块声明中的名称完全一致。

待办事项

• 创建一个CSS过滤器以处理所有相关CSS文件。

• 允许twig模板文件作为相关文件。

• 将供应商模块拆分到单独的文件中。

• 添加单元测试