@section 语法而不是 angularjs 应用程序的 requirejs 或 browserify

Question

我知道requirejs 和browserify 可以根据当前上下文加载我的文件，这太棒了。我真的更喜欢使用剃须刀引擎使用的@section sections 语法。只是想知道是否有办法将其实现到 typescript / angularjs 应用程序中。

例如

index.html

 @renderSection scripts; 
 // which could turn into something like
 <script data-render="scripts"></scripts>
 // the app.run() could declare all the scripts that will be needed on every        
 // page view

view.html

<script ng-section-repeat="injected in injection"></script> 
// the ng-section-repeat is basically taking all the items in the 
// typescript constructor and then finding out which ones are needed for
// that view.

我喜欢在视图中注入应用程序文件依赖项的想法，无需配置文件和加载器附带的所有附加功能。

我只想轻松定义实际视图中需要哪些文件并加载它们，使用 Angular 的依赖注入处理依赖本身。

如果您使用$inject 处理所有依赖项，那么据我所知，从技术上讲，依赖项已经在控制器中设置好了，只需在调用时加载它即可。这甚至可以完全消除对@section scripts 的需要

更新： 我所做的某种复制模块加载器只是使用gulp-concat并在我的gulp.config.js中定义文件顺序，然后在运行$.concat之前将其传递给gulp-src。这使我可以按相关顺序将文件放在 gulp steam 中。然而，它们是在第一次加载时加载的。使用gulp-uglify，文件很小（现在为 566Kb，16 个外部库在 69 毫秒内加载。从这个角度来看，加载一种谷歌字体需要 209 毫秒）。

我不知道我可能没有正确理解 browserify，但老实说我很难看到它的必要性，对于如此简单的事情来说，它似乎非常令人费解

Answer 1

可以使用外部模块和注入器来完成您的要求：

我只是想轻松定义实际视图中需要哪些文件

import {UserFactory} from 'models/userFactory';
import {UserValidator} from 'models/userValidator';
import {Inject} from 'angular2/di';

然后加载它们，使用 Angular 的依赖注入处理依赖本身。

注意：我的示例使用 angular 2.x，因为我对 angular 1.x 不太熟悉，我相信您可以做一些非常相似的事情...

class SomeComponent {

  userName: string;
  userRating: number;
  rating: number;

  constructor(
    @Inject(UserFactory) UserFactory
    @Inject(UserValidator) UserValidator
  ) 
  {
    this.UserFactory = UserFactory;
    this.UserValidator = UserValidator;
  }
}

然后你可以使用 Browserify 创建一个bundle.js 文件，可以在网络浏览器中执行。