Javascript Can'；不要让角组件与组件路由器一起工作_Javascript_Angularjs

Javascript Can'；不要让角组件与组件路由器一起工作

javascript angularjs

Javascript Can'；不要让角组件与组件路由器一起工作,javascript,angularjs,Javascript,Angularjs,我试图制作一个样板来使用angular 1.5.x和组件，但是（目前）不可能让组件工作以下是我的文件夹结构： rootfolder ..... index.html static/ app/ components/ app/ appBase.js hello/ hello.js app.js routes.js services.js 所以这个想法很简单

我试图制作一个样板来使用angular 1.5.x和组件，但是（目前）不可能让组件工作

以下是我的文件夹结构：

rootfolder
  .....
  index.html
  static/
    app/
      components/
        app/
          appBase.js
        hello/
          hello.js
      app.js
      routes.js
      services.js

所以这个想法很简单：把组件拆开，把路由放在里面。我用的是约翰·帕帕风格的指南和托德的座右铭

以下是我的模块：

app.js（主模块） routes.js（配置文件）组件：appBase.js/hello.js位于单独的文件夹中。

（函数（）{
"严格使用",；
变量应用={
模板：`
`,
$routeConfig：[
{路径：'/'，名称：'app'，组件：'hello'}
]
};
有棱角的
.module（'应用程序'，[]）
.组件（“应用程序”，应用程序）；
})();
（功能（）{
"严格使用",；
var hello={
模板：`你好，世界`
};
有棱角的
.module（'app.hello'，[]）
.component（“你好”，你好）；
})();

index.html


组件示例

我在控制台中没有错误，应用程序模块正在执行以下操作：

<app>
    <hello></hello>
     <ng-outlet></ng-outlet>
</app>

但是

hello

组件就是不工作。。。有什么想法吗？

我不知道为什么您没有收到任何控制台错误，但我认为您正在覆盖您自己的模块定义

尝试：

及

你的应用程序脚本在index.html中的什么位置？我现在看到app.min.jsoh中的所有内容都被缩小和浓缩了。哈哈，完全错过了，你是说我需要使用“getter”而不是设置一个新模块？像

angular.module（'app'）.component（）…

？问题就在于此！我正在覆盖

应用程序

模块。

(function(){
    'use strict';

    angular
      .module('app')
      .config(config)
      .value('$routerRootComponent', 'app');

    config.$inject = ['$locationProvider'];

    function config($locationProvider){
      $locationProvider.html5Mode(true);
    };

})();

(function() {

  'use strict';

  var app = {
    template: `
                <hello></hello>
                <ng-outlet></ng-outlet>
              `,
    $routeConfig: [
      { path: '/', name: 'app', component: 'hello' }
    ]
  };

  angular
    .module('app', [])
    .component('app', app);

})();

(function() {

  'use strict';

  var hello = {
    template: `<h1>Hello World</h1>`
  };

  angular
    .module('app.hello', [])
    .component('hello', hello);

})();

<!DOCTYPE html>
<html ng-app="app" lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Components example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

    <app></app>

    <script src="static/assets/bower/bower_components/angular/angular.js"></script>
    <script src="static/assets/bower/bower_components/angular-component-router/angular_1_router.js"></script>
    <script src="static/assets/js/dist/angular-app.min.js"></script>
</body>
</html>

<app>
    <hello></hello>
     <ng-outlet></ng-outlet>
</app>

(function() {

 'use strict'
  angular
    .module('app', ['ngComponentRouter', 'app.hello'])
    .module('app.hello', [])
})();

angular
    .module('app')
    .component('app', app);

angular
    .module('app.hello')
    .component('hello', hello);