Question

在我的shell页面“index.html”中，我需要包含所有必需的文件（js，css等）。

示例：

<!-- 3rd party libraries -->
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/angular-resource.min.js"></script>
<script type="text/javascript" src="scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="scripts/angular-ui/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>

在现有的带有razor项目的MVC中，我可以像这样捆绑这些文件：

bundles.Add(new StyleBundle("~/app/controller").Include(
                      "~/app/controllers/placesExplorerController.js",
                      "~/app/controllers/usersController.js"));

此外，我可以使用哪些技术来加载所需的文件。不加载所有（在SPA中）。延迟加载工件

Answer 1

要捆绑，您通常会使用像Grunt或Gulp这样的工具将文件连接成类似于bundle的结构。

要仅加载所需的文件，一个流行的工具是RequireJS，它根据路由延迟加载模块。

Answer 2

<强>更新刚刚看到你编辑了你想要特别延迟加载的问题。然后去找ocLazyLoad。

ocLazyLoad非常棒，你可以在{em>几乎的任何地方注入$ocLazyLoad。

myApp.controller("MyCtrl", function($ocLazyLoad) {
 $ocLazyLoad.load('mySciprt.js');
 //if you want to load more than 1 file, pass in an array:
 //$ocLazyLoad.load(['myScript.js', 'myStyle.css'])
});

您还可以使用指令：

 <div oc-lazy-load="{['js/testModule.js', partials/lazyLoadTemplate.html']}">
  <!-- Use a directive from TestModule -->
  <test-directive></test-directive>
</div>

如果你正在使用它，你也可以将它与ui.router结合使用：

$stateProvider.state('index', {
  url: "/", // root route
  views: {
     "lazyLoadView": {
      controller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve
      templateUrl: 'partials/main.html'
    }
  },
  resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
    loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
      // you can lazy load files for an existing module
         return $ocLazyLoad.load('js/AppCtrl.js');
    }]
  }
});

oclazyLoad Docs

我假设您需要一个性能更高的AngularJs应用程序，并且您正在使用.NET环境（MVC项目，IIS服务器等）。请允许我为您提供一些选择：

选项1 - 坚持Razor的捆绑

Razor的Script包实际上允许您缩小Javascripts和CSS文件。只需添加BundleTable.EnableOptimizations = true;，您就可以在构建时缩小JS和CS文件。根据您的项目，这可能是一个很好的解决方案。通常，.NET的MVC4 / 5项目最适合使用此方法，因为它们默认使用cshtml和Razor语法。我不会为一个丰富的Angular应用程序推荐这个。

选项2 - 将Gulp或Grunt与MVC项目结合使用

如果您不知道，请使用Visual Studio can now run a NodeJs application。甚至有Task Runners允许你在VS中使用grunt / gulp。这是完美的，因为现在您可以使用自己喜欢的IDE来构建前端应用程序。

对我来说，我将创建一个空 MVC Web项目，组织我自己的文件夹结构，让IIS命中我的index.html并让角度处理其余的。 MVC项目本身什么也没做，只是给我一个web.config，以便我可以在IIS中托管它。我运行我的gulp和grunt，进行缩小和构建任务，并将它们转储到release文件夹，配置我的web.config让我的IIS听我的子目录，瞧 - 我只是分开了开发代码和生产代码。

这个选项是一个不错的选择，因为我得到了两全其美。我可以运行gulp和grunt - 这让我可以自由编写自己的构建任务。您也可以使用bower-install或npm-install，但请记住在项目中包含这些文件。另一方面，我仍然可以使用VS作为我的IDE，默认情况下这仍然是一个.NET项目。当您想要部署到Azure时，.NET项目会派上用场（尽管有偏见）。

选项3 - 使用ocLazyLoad

如果您真的在谈论在需要时提供文件，那么它就是延迟加载。为此，如果您不想使用require.js，请查看ocLazyLoad模块。有史以来最好的项目之一。这允许您懒洋洋地加载html，js和css文件，并且您可以自由选择何时加载它们。

希望这会有所帮助。

使用MVC在Angular中捆绑脚本

2 个答案: