Angular 中的脚本与 MVC

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 等工具将文件连接成类似捆绑的结构。

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

Answer 2

更新： 刚刚看到您编辑了您想要专门延迟加载的问题。然后去 ocLazyLoad.

ocLazyLoad 在某种意义上非常棒，您可以在几乎处将 $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's Bundle

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

选项 2 - 使用 Gulp 或 G运行t 结合 MVC 项目

如果你不知道，Visual Studio can now run a NodeJs application. There are even Task Runners 可以让你在VS中使用grunt/gulp。这非常完美，因为现在您可以使用自己喜欢的 IDE 来构建前端应用程序。

对于我来说，我会创建一个empty MVC web 项目，组织我自己的文件夹结构，让IIS 命中我的index.html 让angular处理其余的。 MVC 项目本身什么都不做，只是为我提供一个 web.config 以便我可以在 IIS 中托管它。我运行我的 gulp 和 g运行t，执行缩小和构建任务，并将它们转储到 release 文件夹中，配置我的 web.config 让我的 IIS听我的子目录，瞧 - 我刚刚分离了开发代码和生产代码。

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

选项 3 - 使用 ocLazyLoad

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

希望这对您有所帮助。

Angular 中的脚本与 MVC

Bundle Scripts in Angular with MVC

c#

asp.net-mvc-4

angularjs

single-page-application