Gulp，浏览器同步不适用于 angularjs ng-view答案

【问题标题】：Gulp, browser sync does not work with angularjs ng-viewGulp，浏览器同步不适用于 angularjs ng-view
【发布时间】：2016-03-09 14:12:02
【问题描述】：

我正在尝试使用 gulp 和浏览器与 angularjs 同步来设置项目。当我在 index.html 文件中使用 ng-view 标记时，我无法让浏览器同步正常工作。这是我在运行浏览器同步时在浏览器控制台中遇到的错误： Uncaught TypeError: Cannot read property 'data1457531805746' of null 来自browser-sync-client.2.11.1.js:204 它按预期工作，页面加载正常，当不使用 ng-view/ngRoute 时。

这些是我的文件： ./gulpfile.js

// Spin up a server
gulp.task('browserSync', function() {
  browserSync.use(spa({
  selector: "[ng-app]" //Only needed for angular apps
  }));

  browserSync.init({
    port: 8080,
    server: {
      baseDir: path.src
    }
  })
});

 // Watch for changes in files
 gulp.task('watch', ['browserSync'], function() {
    // Watch .js files -- removed for brevity
  });
 // Default Task
gulp.task('default', ['watch']);

./app/controllers/controllers.js '使用严格';

/* Controllers */

var dc4SearchControllers = angular.module('dc4SearchControllers', []);

dc4SearchControllers.controller('CompanySearchCtrl', ['$scope', '$http',
  function($scope, $http){
    $scope.test = 'Hello, world!';
}]);

./app/index.html

<html ng-app="dc4SearchApp">
<head>
  <link href="/bower_components/webui-core/dist/webui-core.min.css" rel="stylesheet">
  <script src="/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="/bower_components/angular/angular.min.js"></script>
  <script src="/bower_components/angular-route/angular-route.min.js">    </script>
  <script src="/bower_components/lodash/lodash.min.js"></script>
  <script src="/bower_components/webui-core/dist/webui-core.min.js"></script>
  <script src="app.js"></script>
  <script src="controllers/controllers.js"></script>
</head>
<body ng-view>

</body>
</html>

./app/app.js '使用严格';

/* App Module */

var dc4SearchApp = angular.module('dc4SearchApp', [
  'ngRoute',
  'dc4SearchControllers'
]);

dc4SearchApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/company-search', {
        templateUrl: 'views/company-search.html',
        controller: 'CompanySearchCtrl'
      }).
      otherwise({
        redirectTo: '/company-search'
      });
  }]);

./app/views/company-search.html

<div ng-controller="CompanySearchCtrl">
  <a href="#" class="button confirm">{{test}}</a>
  <div class="spinner spin"> </div>
</div>

我希望这只是我正在寻找但尚未尝试过的愚蠢而简单的事情！提前致谢。

【问题讨论】：

我得到了同样的错误，我通过在我的 index.html 文件中的 jQuery scipt 标记之前放置角度脚本来修复它。不知道为什么会这样。

标签： angularjs gulp browser-sync

【解决方案1】：

“Browsersync 的工作原理是在初始请求期间在正文标记之后立即注入异步脚本标记。为了使其正常工作，必须存在正文标记。或者，您可以使用 sn-p 为 sn-p 提供自定义规则p选项" https://www.npmjs.com/package/browser-sync

Browsersync 似乎正在重新加载正文标签。您是否尝试过将 ng-view 移动到另一个子 div ？

【讨论】：

哇，我没有尝试过，但它似乎有效！我还没有尝试过一些愚蠢而简单的事情。感谢您的帮助！