Angularjs 구성 요소 상태

안녕하세요. 상태로 구성 요소를 사용하는 데 몇 가지 질문이 있습니다. 그래서 나는 템플릿을 사용하여 ui-routing을 시도하고 잘 작동합니다. 대신 구성 요소로 라우팅하려고하면이 오류가 발생합니다. 내 app.jsAngularjs 구성 요소 상태

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을 나를 클릭하면210

하지만, 난이 오류 내가 잘못하고있는 무슨

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" 모듈을 두 번 등록합니다. 동일한 이름의 두 번째 모듈이 첫 번째 모듈을 덮어 씁니다.

동일한 이름을 가진 경우에만 그 중 하나에 의존성 주입 배열을 사용하십시오. 게터는 세터하지대로 역할을 종속 배열 인수가없는 경우

변경 :

// 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와 같이 필요로하고 두 번째 모듈을 첫 번째 ""app 모듈에 삽입하십시오. 모두 개인적인 취향에 달려 있지만 필요한 경우 모듈을 다른 프로젝트로 쉽게 가져갈 수 있습니다 – charlietfl

Angularjs 구성 요소 상태

답변

관련 문제