Question

我的问题如下：我使用grunt生成我的角度项目。因此，在一个咕噜声构建之后，dist文件夹中的索引可以使用良好的结构，但是当我查看chrome的consol调试后，我看到头部在主体部分内部重复。这里是index.html的以下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>XXXXXX</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta name="description" content="XXXXXXXXXX">
    <meta name="keywords" lang="fr" content="XXXXXXX">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="favicon.png" />
    <!-- include: "type": "css", "files": ["app.full*.css"] -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="stylesheet">
    <!--  Google Analytic -->
    <script>
    </script>
    <!--  Google Analytic -->    
    <script>
    </script>

</head>
<body ng-app="XXXXX">
<ui-view></ui-view>
<!--[if lt IE 9]>
<p class="browsehappy">Votre navigateur est trop ancien.</p>
<![endif]-->
<!-- include: "type": "js", "files": ["lib/angular/**/*.js", "lib/angular-translate/**/*.js", "lib/[a-zA-Z]*/**/*.js"] -->
<!-- include: "type": "js", "files": ["app.*.js", "js/**/*.module.js", "js/**/*.js"], "ordering": "'top-down'" -->
</body>
</html>

Chrome调试中的结果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>XXXXXX</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta name="description" content="XXXXXXXXXX">
    <meta name="keywords" lang="fr" content="XXXXXXX">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="favicon.png" />
    <!-- include: "type": "css", "files": ["app.full*.css"] -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="stylesheet">
    <!--  Google Analytic -->
    <script>
    </script>
    <!--  Google Analytic -->    
    <script>
    </script>        
</head>
<body ng-app="XXXXX">
<meta charset="UTF-8">
    <title>XXXXXX</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta name="description" content="XXXXXXXXXX">
    <meta name="keywords" lang="fr" content="XXXXXXX">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="favicon.png" />
    <!-- include: "type": "css", "files": ["app.full*.css"] -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="stylesheet">
    <!--  Google Analytic -->
    <script>
    </script>
    <!--  Google Analytic -->    
    <script>
    </script>
<ui-view></ui-view>
<!--[if lt IE 9]>
<p class="browsehappy">Votre navigateur est trop ancien.</p>
<![endif]-->
<!-- include: "type": "js", "files": ["lib/angular/**/*.js", "lib/angular-translate/**/*.js", "lib/[a-zA-Z]*/**/*.js"] -->
<!-- include: "type": "js", "files": ["app.*.js", "js/**/*.module.js", "js/**/*.js"], "ordering": "'top-down'" -->
</body>
</html>

所以我不知道为什么会这样。^^

Answer 1

好的，我找到了答案。当我宣布我的app.component我命名他身体:(。别忘了检查它。

angular
  .module('xxxxFront')
  .component('body', {
    templateUrl: 'index.html'
  });

所以我这样命名。

angular
  .module('xxxxFront')
  .component('main', {
    templateUrl: 'index.html'
  });

在grunt发布后，头部的内容在身体内容中重复

1 个答案: