Question

我使用角度1.5.8和uglify并使用＆＃34; ReferenceError: Uncaught ReferenceError: angular is not defined＆＃34;获得了一些非常奇怪的日志。适用于Windows 7/10，Firefox 52.0上用户的var application = angular.module('app'..."。

我使用了一些虚拟机进行调试而没有任何成功。

这是我的代码：

<!doctype html>
<html lang="en" ng-controller="MainCtrl">

<head>
  <meta charset="utf-8" />
  <title>angular-kickstart</title>
  <meta name="description" content="angular-kickstart - speed up your AngularJS development and testing with a great gulpjs build system.
">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title ng-bind="title"></title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="keywords" content="AngularJS, angular-kickstart, gulp, bower, vesparny" />

  <!-- build:css assets/css/main.css -->
  <link rel="stylesheet" type="text/css" href="src/vendor/pure/pure.css" />
  <link rel="stylesheet" type="text/css" href="src/vendor/pure/grids-responsive.css" />
  <link rel="stylesheet" type="text/css" href="tmp/main.css" />
  <!-- endbuild -->
</head>

<body>
  <div>
    <header ui-view="header"></header>
    <div ui-view class="l-page island"></div>
    <footer ui-view="footer"></footer>
  </div>

  <!-- build:js assets/js/vendor.js -->
  <script type="text/javascript" src="src/vendor/angular/angular.js"></script>
  <script type="text/javascript" src="src/vendor/angular-ui-router/release/angular-ui-router.js"></script>
  <!-- endbuild -->

  <!-- build:js assets/js/main.js -->
  <script type="text/javascript" src="src/app/app.js"></script>

  <script type="text/javascript" src="src/app/getting-started/getting-started.js"></script>
  <script type="text/javascript" src="src/app/home/home.js"></script>

  <script type="text/javascript" src="src/common/directives/version.js"></script>
  <script type="text/javascript" src="src/common/interceptors/httpInterceptor.js"></script>
  <script type="text/javascript" src="src/common/services/dataService.js"></script>
  <script type="text/javascript" src="src/common/filters/uppercase.js"></script>

  <script type="text/javascript" src="src/common/header.js"></script>
  <script type="text/javascript" src="src/common/footer.js"></script>

  <script type="text/javascript" src="tmp/templates.js"></script>
  <!-- endbuild -->
</body>

</html>

js file：

(function() {
  'use strict';

  function config($stateProvider, $urlRouterProvider, $logProvider, $httpProvider) {
    $urlRouterProvider.otherwise('/');
    $logProvider.debugEnabled(true);
    $httpProvider.interceptors.push('httpInterceptor');
    $stateProvider
      .state('root', {
        views: {
          'header': {
            templateUrl: 'src/common/header.tpl.html',
            controller: 'HeaderCtrl'
          },
          'footer': {
            templateUrl: 'src/common/footer.tpl.html',
            controller: 'FooterCtrl'
          }
        }
      });
  }

  function MainCtrl($log) {
    $log.debug('MainCtrl laoded!');
  }

  function run($log) {
    $log.debug('App is running!');
  }

  angular.module('app', [
      'ui.router',
      'home',
      'getting-started',
      'common.header',
      'common.footer',
      'common.services.data',
      'common.directives.version',
      'common.filters.uppercase',
      'common.interceptors.http',
      'templates'
    ])
    .config(config)
    .run(run)
    .controller('MainCtrl', MainCtrl)
    .value('version', '1.1.0');

  function getLocale() {
    var initInjector = angular.injector(["ng"]);
    var $http = initInjector.get("$http");

    var available_languages = ['de_DE', 'en_GB', 'es_ES', 'fr_FR', 'it_IT'];

    if(_.isUndefined(CONST_LANG) || _.isNull(CONST_LANG) || !_.contains(available_languages, CONST_LANG.fullcode)){
      CONST_LANG = {shortcode:'en', fullcode:'en_GB'};
    }

    return $http.get('assets/locale/' + CONST_LANG.fullcode + '.json').then(function(response) {
      application.constant("LOCALE", response.data);
    }, function(errorResponse) {
      console.log(errorResponse);
    });

  }

  function bootstrapApplication() {
    angular.element(document).ready(function () {
      angular.bootstrap(document, ['app']);
    });
  }

  // Load locale before angular's bootstrap
  getLocale().then(bootstrapApplication);
})();

这很奇怪，有时因为任何原因我的角度没有正确加载..

有什么想法吗？

Answer 1

尝试将<html lang="en" ng-controller="MainCtrl">更改为<html lang="en" ng-app="app">

Answer 2

正如@kennypowers所说，您必须先用git branch --list替换<html lang="en" ng-controller="MainCtrl">

您还需要将<html lang="en" ng-app="app">附加到文档节点，例如MainCtrl上：

body

同时将<body ng-controller="MainCtrl">移至<script type="text/javascript" src="src/vendor/angular/angular.js"></script>代码，以确保在加载js文件时<head>可用

一个好的做法也是首先启动你的模块

angular

然后在任何地方声明控制器，指令，配置，......：

angular.module('app', [
      'ui.router',
      'home',
      'getting-started',
      'common.header',
      'common.footer',
      'common.services.data',
      'common.directives.version',
      'common.filters.uppercase',
      'common.interceptors.http',
      'templates'
    ]);

Angular未定义随机（Firefox 52.0 / IE11）

2 个答案: