11

我正在构建一个带有角度生成器的 yeoman 应用程序。

我的 index.html 文件中包含的 js 库是：

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.js"></script>   
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular-ui-select2/src/select2.js"></script>

只有在 angular之前包含 jquery 时才会出现此问题，如果在angular 之后则不会发生此问题。

标题指出的问题是我在控制台中收到“警告：尝试多次加载角度”并且应用程序无法初始化。

有谁知道为什么会发生这种情况？

我有一个 ng-app，我只包含一次 Angular ......以及所有内容。它看起来与配置无关，因为更改脚本的位置可以修复它。

你们有什么线索吗？

有谁知道我是否能够配置包括脚本的顺序？当我使用 angular-generator 时，我已经使用 usemin 进行了设置，以包含 bower 脚本。我想知道是否有任何方法可以指定包含脚本的顺序。

这是我的项目的 bower.json 文件：

{
  "name": "<name>",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.15",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "angular-ui-router": "~0.2.10",
    "modernizr": "~2.8.1",
    "d3": "~3.4.6",
    "angular-ui-select2": "~0.0.5"
  },
  "devDependencies": {
    "angular-mocks": "1.2.15",
    "angular-scenario": "1.2.15"
  }
}

我试图在谷歌搜索没有运气。提前致谢！

更新1：

我刚刚发现，如果我以这种方式包含脚本，则不会包含 angular 两次，并且总是首先加载它。

  <!-- build:js scripts/vendor.js -->
  <script src="bower_components/angular/angular.js"></script>
  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/modernizr/modernizr.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="bower_components/d3/d3.js"></script>
  <script src="bower_components/select2/select2.js"></script>
  <script src="bower_components/angular-ui-select2/src/select2.js"></script>
  <!-- endbower -->

不是最好的解决方案，但至少现在......无论如何，我想把所有东西都放在 bower:js 标签中。

4

8 回答 8

26

经过长时间的测试......最终在我的 index.html 文件中我有一个

<ui-view />

由angular ui路由器使用并将其替换为此，成功了。

<ui-view></ui-view>
于 2014-05-21T14:33:48.473 回答
13

对我来说，当我在路线中错误地引用了我的视图时，就会发生这种情况。

我有：

.when('/route', {
      templateUrl: 'views/myPage.html',
      controller : 'myCtrl'
})

但我的观点被命名为views/mypage.html

错误消息不是我所期望的。我本来预计会出现丢失的视图错误。

于 2014-11-19T22:18:39.750 回答
3

.NET 和 MVC 5 也发生在我身上，过了一会儿我意识到在标签中：ngview

再次包含在您身上的部分脚本中。为了解决服务器端的问题，我所做的是返回部分视图。就像是：

public ActionResult Index()
{
    return View();
}

public ActionResult Login()
{
    return PartialView();
}

public ActionResult About()
{
    return PartialView();
}
于 2016-03-25T22:31:50.223 回答
2

我收到了同样的警告，这是因为包含的文件的顺序以及使用的版本。

为了解决上述警告，我按以下顺序重新包含文件：

jquery.js
jqueryui.js
angular.js

注意：您必须在jquery之前添加脚本标签，angularjs以便 angularjs 可以替换jqLite为jQuery.

此外，我的代码可以使用AngularJS v1.2.0，但不能使用更高角度的版本。因此，还要检查您的 jquery 和 angularjs 版本兼容性。

于 2014-10-05T15:50:18.450 回答
0

是的，我通过在 html 页面中对 JS 脚本顺序进行排序解决了我的问题。

当把 angular js 脚本放在第一位时，就不会再发生这种情况了。

这很奇怪。

谢谢。

于 2015-07-21T11:03:00.153 回答
0

我在使用电子应用程序时遇到了类似的问题。我在 index.html 页面中包含了 angular.min.js ，每次我来到那个页面时，警告出现的次数都会变成双倍……比如 1、2、4、8、16 等。所以在 4/5 刷新之后，应用程序过去变得非常慢。我找到的解决方案是.. 使用 require('./path/angular.min.js'); 而不是包含 angular.min.js 和 script 标签

这只会加载一次文件。

根据节点文档

缓存 #

模块在第一次加载后被缓存。这意味着（除其他外）每次调用 require('foo') 都将返回完全相同的对象，如果它会解析为同一个文件。

多次调用 require('foo') 可能不会导致模块代码被多次执行。这是一个重要的特点。有了它，可以返回“部分完成”的对象，从而允许加载传递依赖项，即使它们会导致循环。

于 2017-03-25T07:52:50.150 回答
0

这是另一个没有被任何人覆盖的场景，但它导致了同样的问题，一开始可能并不明显：

如果您使用 Gulp 或任何其他带有 angular-template-cache 插件的类似工具并将所有代码合并到一个文件中，您需要确保在实际连接发生之前执行模板缓存生成，否则您的 app.min。 Node.js 没有模板缓存部分。

Gulpfile 看起来像这样：

var paths = {
  styles: 'assets/less/style.less',
  scripts: 'assets/js/**/*.js',
  templates: 'views/**/*.html'
}

function styles() {
  return gulp.src(paths.styles)
    .pipe(less())
    .pipe(cleanCSS())
    .pipe(gulp.dest('./assets/css/'));
}

function scripts() {
  return gulp.src(paths.scripts, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('app.min.js'))
    .pipe(gulp.dest('./assets/js'));
}

function templatecache() {
  return gulp.src(paths.templates)
    .pipe(templateCache({ module: 'ams', root: '/views/'}))
    .pipe(gulp.dest('./assets/js'));
}

function clean() {
  return del(['assets/js/app.min.js', 'assets/js/templates.js', 'assets/css/style.css']);
};

var build = gulp.series(clean, templatecache, gulp.parallel(styles, scripts));

关键部分是最后一行，首先执行 clean 和 templatecache，然后并行执行脚本和样式。我也在并行执行模板缓存，并进入了重复的 angularjs 警告。希望它可以帮助某人。

于 2018-04-28T06:43:16.777 回答
-7

工具视觉工作室----只需像这样评论angularjs文件`

    <script src="~/Scripts/angular.min.js"></script>


</section>`
于 2015-05-14T05:35:31.783 回答