Question

我正在使用Yeoman生成器gulp-angular-generator使用Typescript创建一个Angular 1.3项目。种子项目显示如何创建控制器而不是指令。到目前为止，这是我失败的尝试：

的src /应用程序/ index.ts

/// <reference path="../../.tmp/typings/tsd.d.ts" />
/// <reference path="components/workspace/workspace.controller.ts" />
/// <reference path="components/dashboard/dashboard.directive.ts" />

module app {
  'use strict';

  angular.module('app', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'restangular', 'ngRoute', 'ui.bootstrap'])
    .controller('WorkspaceCtrl', WorkspaceCtrl)

    .config(function ($routeProvider: ng.route.IRouteProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'app/components/workspace/workspace.template.html',
          controller: 'WorkspaceCtrl',
          controllerAs: 'workspace'
        })
        .otherwise({
          redirectTo: '/'
        });
    });
}

的src /应用/组件/工作区/ workspace.controller.ts

module app {
  'use strict';

  export class WorkspaceCtrl {
    //some code..
  }
}

的src /应用/组件/仪表板/ dashboard.directive.ts

module app {
  'use strict';

  angular
    .module('app')
    .directive('dashboard', () => {
      return {
        restrict: 'E',
        controllerAs: 'dashboard',
        bindToController: true,
        scope: {},
        templateUrl: 'app/components/dashboard/dashboard.template.html',
        controller: DashboardCtrl
      };
    });

  class DashboardCtrl {
    //some code..
  }
}

当我尝试运行此代码时，我在浏览器控制台（Chrome）上收到以下错误：

Uncaught Error: [$injector:nomod] Module 'app' is not available! You either 
misspelled the module name or forgot to load it. If registering a module ensure 
that you specify the dependencies as the second argument.

检查浏览器源文件，我意识到指令文件是在模块定义所在的索引之前加载的。

我知道我可以像定义控制器一样定义index.ts内的整个指令（如gulp-generator所建议的那样），但这不是一个好主意，因为指令定义对象（DDO）是通常很大，一旦你的应用程序开始增长，它将变得更难维护。

有没有办法在不同的文件中定义指令并指示生成器以正确的顺序加载文件？

Answer 1

试试这个

class DefaultController extends Controller
{
  public function indexAction($name)
  {
    return $this->render('MyAppLibraryBundle:Default:index.html.twig', array('name' => $name));
  }

  public function createAction()
  {
    $product = new Product();
    $product->setName('A Foo Bar');
    $product->setPrice('19.99');
    $product->setDescription('Lorem ipsum dolor');

    $em = $this->getDoctrine()->getManager();
    $em->persist($product);
    $em->flush();

    return new Response('Id du produit créé : '.$product->getId());
  }
}

在此处阅读有关如何在typescript中编写指令的更多信息：http://blog.aaronholmes.net/writing-angularjs-directives-as-typescript-classes/

如何使用typescript在gulp-angular-generator中定义指令

1 个答案: