如何使用 Angular + Browserify + Gulp 渲染视图？答案

【问题标题】：How to render views using Angular + Browserify + Gulp?如何使用 Angular + Browserify + Gulp 渲染视图？
【发布时间】：2015-11-15 21:03:16
【问题描述】：

我一直在使用 Angular 和 Browserify 来创建更多模块化代码并在前端使用 require 语法。我使用 gulp 任务成功创建了我的包文件，但是每当我在 index.html 中加载脚本并加载 localhost 时，我的视图都不会呈现。我在此处的配置文件中引用了我的视图，然后将其加载到我的入口点文件中，gulp 任务使用该文件来编译捆绑文件。

但是，我的视图都没有呈现。有具体的方法吗？

例如。

function config($stateProvider, $locationProvider,$urlRouterProvider){
  $stateProvider
    .state('Home', {
      url:'/',
      controller: 'HomeCtrl',
      controllerAs: 'home',
      templateUrl: 'views/home.html'
    });

  $urlRouterProvider.otherwise('/');
}

module.exports = config;

【问题讨论】：

您是否遇到任何控制台错误？
没有控制台错误。脚本在浏览器中加载正常，我的视图都没有加载
你有没有在你的页面上添加<ui-view></ui-view>
我添加了 ui-view，但它没有引用任何其他视图。生病检查以确保我在 angular.module 参数中正确包含 ui-router
ui-router 在那里..这就是为什么你没有收到任何$moduler 错误..你能检查一下你是否在页面上包含了ng-app="appName"..

标签： angularjs gulp browserify

【解决方案1】：

我想通了。解决方案是使用 $templateCache 并缓存 html 模板。我使用 angular-gulp-templatecache 将我的所有模板渲染到 angular 模板模块中。由于我使用的是 browserify，因此我将入口点文件和新创建的模板文件连接到一个文件中，然后从我的 index.html 将其作为 main.js 提供。

【讨论】：