README

一种非常优雅的方法，用于根据您的Symfony2路由系统公开Angular UI Router状态。

注意：此文档正在建设中，所使用的英语可能不够规范，我们将尽快修复。请随时提供帮助 :D

简介

此包旨在利用注解的强大功能来生成Angular UI Router的状态配置。

背后的概念

此包的目的是将Angular状态与Symfony路由连接起来。Angular-ui状态与Symfony路由的不同之处在于，路由有URL和名称，而状态有名称、关联的控制器和模板（字符串或URL）。

解决方案是这样的：每个状态都应该携带一些信息。这些信息由服务器端执行的一个Symfony动作提供。

因此，基本上，一个Symfony动作可以连接到一个Angular ui状态。该动作的路由名称将是状态名称，此动作可以指定将返回模板的HTML字符串的名称的路由，并指定一个处理视图的Angular控制器的名称。

到目前为止，很清楚，这个路由将定义一个带有模板和控制器的状态，但这个动作本身如何处理呢？这是开发者必须处理的事情。在以下部分，我将更好地解释这些概念。

安装

打开您的控制台，进入您的项目目录，然后执行以下命令以下载此包的最新稳定版本

composer require mariselli/ngsymfony

然后，通过将其添加到项目中的app/AppKernel.php文件中注册的包列表中来启用该包

 <?php
    // app/AppKernel.php

    // ...
    class AppKernel extends Kernel
    {
        public function registerBundles()
        {
            $bundles = array(
                // ...

                new Mariselli\NgSymfonyBundle\NgSymfonyBundle(),
            );

            // ...
        }

        // ...
    }

配置FOSUserBundle

下一步是配置该包以满足您应用程序的特定需求。

将以下配置添加到您的config.yml文件中。

这是基本配置

ng_symfony:
    module_name: "ngSymfony.states"
    constant_name: "$ngStates"
    file_path: "/Resources/ui-states.js"

也可以过滤要扫描的URL类型

ng_symfony:
    module_name: "ngSymfony.states"
    constant_name: "$ngStates"
    file_path: "/Resources/ui-states.js"
    urls: ['/contact','/profile']

有时我们想要根据路径将状态分开。在这种情况下，可以声明sections属性。注意：即使它们是必需的，根属性module_name, module_name, file_path, urls也将被忽略。

ng_symfony:
    module_name: "ngSymfony.states"
    module_name: "$ngStates"
    file_path: "/Resources/ui-states.js"
    urls: ['/contact','/profile']
    sections:
        - { module_name: "ngSymfony.frontStates", constant_name: "$ngStatesFrontend", file_path: "/Resources/ui-states-frontend.js", urls: ["/app"] }
        - { module_name: "ngSymfony.backendStates", constant_name: "$ngStatesBackend", file_path: "/Resources/ui-states-backend.js", urls: ["/admin", "/staff"] }

如何使用注解定义状态

我们有一个包含此div的页面

<div id="content-pane" ui-view></div>

注意：这里我假设您知道Angular UI路由是如何工作的

创建一个简单地代表页面的状态

use Mariselli\NgSymfonyBundle\Annotation\UiRouterState;
// [...]

class DefaultController extends Controller
{
    // [...]
    
    /**
     * @Route("/start", name="start", options={"expose"=true})
     * @UiRouterState(view="start")
     */
    public function startAction()
    {
        return $this->render('default/start.html.twig');
    }
    
    // [...]
}

这样我们就创建了一个名为start的状态，链接如下

<a ui-sref="start">Go to start page</a>

可以在div#content-pane中显示startAction的输出。

向下滚动以查看注解参考

如何生成状态配置

此插件通过一个名为$stateConfigurator的函数生成一个包含状态配置的对象数组的js文件。可以通过此数组使用$stateConfigurator来设置所有状态。

状态不会自动更新，但我们必须运行一个控制台命令

$ php bin/console mariselli:ng-symfony:states

这样，配置中定义的文件将更新为新注解生成的新状态。

此操作可以用Gulp或Grunt自动完成。

设置angular UI路由

在这里，我们假设所有依赖项都已可用

angular.module('demoApp', ['ngSymfony.states', 'ui.router'])
        .config(['$stateProvider', '$urlRouterProvider', '$ngStates', '$httpProvider', function ($stateProvider, $urlRouterProvider, $ngStates, $httpProvider) {
            $urlRouterProvider.otherwise('/start');
            
            $stateConfigurator($stateProvider, $ngStates);
            
            // http settings
            $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';

        }]);

函数$stateConfigurator定义在由包提供的stateConfigurator.js中。常量$ngStates由定义在导出文件中的模块ngSymfony.states提供。

注解参考

use Mariselli\NgSymfonyBundle\Annotation\UiRouterState;
// [...]

class DefaultController extends Controller
{
    // [...]
    
    /**
     * @Route("/demo", name="demo", options={"expose"=true})
     * @UiRouterState(view="demo_view", controller="DemoCtrl", controllerAs="cont", parentState="home", cache="false")
     */
    public function demoAction()
    {
        return JsonResponse::create(['name'=>'Bob']);
    }
    
    /**
     * @Route("/view/demo", name="demo_view", options={"expose"=true})
     */
    public function demoViewAction()
    {
        return $this->render('default/demo.html.twig');
    }
    
    // [...]
}