Angularjsのコンポーネントの状態

こんにちは私は状態でコンポーネントを使用することにいくつかの質問があります。だから私はテンプレートを使用してuiのルーティングをやってみましたとうまく動作します。代わりにコンポーネントにルーティングしようとすると、このエラーが発生します。Angularjsのコンポーネントの状態

私app.jsで

angular.module('app', ['ui.router']) 
    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise('/'); 
     $stateProvider 
      .state('home', { 
       url: '/home', 
       component: 'home' 
     }); 
}]);

と私のindex.htmlで

<html ng-app="app"> 
    <head> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script> 
     <script src="Content/lib/angularjs/Chart.js"></script> 
     <script src="Content/lib/angularjs/angular-chart.js"></script> 
     <script src="Content/app/components/home.js"></script> 
     <script src="Content/app/app.js"></script> 

     <link rel="stylesheet" href="Content/lib/bootstrap/bootstrap.css"> 
     <link rel="stylesheet" href="index.css"> 
     <link rel="stylesheet" href="Content/lib/bootstrap/bootstrap.css"> 
     <link rel="stylesheet" href="Content/app/components/redditAnalyzer.css"> 

    </head> 
    <body> 
     <a ui-sref="home">click me</a> 
     <div ui-view></div> 

    </body> 
    </html>

と私のhome.htmlで

<body> 

    "some stuffs" 

</body>

と私のhome.jsで

angular.module('app', ['chart.js']) 
    .component('home', { 
     templateUrl: 'Content/app/components/home.html', 
     bindings: {}, 
     controller: ['$http', 
      function ($http) { 
       var vm = this; 

"some more stuffs" 

      }] 
    });

私は私のindex.htmlで私をクリックして上のクリックしたときしかし、私はこのエラー

Error: [$injector:unpr] http://errors.angularjs.org/1.6.6/$injector/unpr?p0=homeDirectiveProvider%20%3C-%20homeDirective 
    at angular.js:88 
    at angular.js:4826 
    at Object.d [as get] (angular.js:4981) 
    at angular.js:4831 
    at Object.d [as get] (angular.js:4981) 
    at getComponentBindings (angular-ui-router.js:sourcemap:8144) 
    at TemplateFactory.makeComponentTemplate (angular-ui-router.js:sourcemap:8135) 
    at Ng1ViewConfig.getTemplate (angular-ui-router.js:sourcemap:7938) 
    at Object.<anonymous> (angular-ui-router.js:sourcemap:9719) 
    at angular.js:1385 "<div ui-view="" class="ng-scope">"

は私が間違って何をやってもらいますか？ありがとうございます！

出典

2017-11-19 Chris Jeong

"app"という名前のモジュールを2回登録しています。同じ名前の2番目のモジュールが最初のモジュールを上書きします。

同じ名前の場合にのみ、依存関係注入配列を使用します。ゲッターはセッターではないとして、それが作用は依存配列引数がない場合

変更：

// register new module with dependencies 
angular.module('app', ['ui.router']).config... 
// register new module with dependencies ... but will overwrite the first due to same name 
angular.module('app', ['chart.js']).component...

へ：

は

// register new module with dependencies 
angular.module('app', ['ui.router','chart.js']).config... 
// references an existing module to add component to 
angular.module('app').component...

また<script>の順序を切り替え、追加しようとする前にモジュールが存在しますそれにコンポーネント

<!-- Module created in this file --> 
<script src="Content/app/app.js"></script> 
<!-- subsequent files can then access existing module --> 
<script src="Content/app/components/home.js"></script>

出典

2017-11-19 21:23:56 charlietfl

別の名前付きモジュールをdependenciそれに必要なのはchart.jsのようなもので、第2のモジュールを最初の '' app "'モジュールに注入します。すべては個人的な好みにもよりますが、必要に応じて他のプロジェクトに簡単に参加できます – charlietfl

Angularjsのコンポーネントの状態

答えて

関連する問題