AngularJS : ui-router 구성 요소가 표시되지 않습니다.

응용 프로그램에서 구성 요소를 표시하기 위해 각도 ui-router를 사용하는 간단한 각도 응용 프로그램을 작성하려고합니다.AngularJS : ui-router 구성 요소가 표시되지 않습니다.

템플릿과 컨트롤러를 사용하여 작동하도록 할 수 있지만 구성 요소를 리팩터링하면 화면에 렌더링되지 않습니다. 콘솔 오류도 발생하지 않습니다. 여기

가 내 앱이 각 샘플 응용 프로그램을 기반으로한다 Hello Solarsytem

는 app.js

var myApp = angular.module('materialThings', ['ui.router']); 

myApp.config(function ($stateProvider) { 
    // An array of state definitions 
    var states = [ 
     { 
      name: 'about', 
      url: '/about', 
      component: 'about' 
     } 
    ] 

    // Loop over the state definitions and register them 
    states.forEach(function (state) { 
     $stateProvider.state(state); 
    }); 
}); 

myApp.run(function($rootScope) { 
    $rootScope.$on("$stateChangeError", console.log.bind(console)); 
});

index.html을

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>My AngularJS App</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css"> 
    <link rel="stylesheet" href="app.css"> 
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.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="app.js"></script> 
    <script src="about.js"></script> 

</head> 
<body ng-app="materialThings"> 

<a ui-sref="about" ui-sref-active="active">About</a> 

<ui-view></ui-view> 

<!-- In production use: 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> 
--> 

</body>

about.js

angular.module('materialThings').component('about', { 
    template: '<h3>Its the UI-Router<br>Hello Solar System app!</h3>' 
})

출처

2016-10-28 Leo

어떤 ui-router 버전입니까? – Mahesh

이 질문을 참조하십시오 : Angular - UI.Router not loading component

당신이 작동하지 않습니다 0.3.x를 사용하는 경우. 1.0.0으로 업그레이드하십시오 (베타 버전이 최신 버전이라고 생각합니다). 시도해보십시오. 그래서 0.3.1

도 참조는 사용할 수없는 -

콤포넌트 속성이 [email protected]에서 제공하는 (그 1.0.0-aplpha 첨가 하였다 here 및 CHANGELOG.MD에서 참조) 비슷한 게시물에 대한 내 답변에 - https://stackoverflow.com/questions/40089948/angular-ui-router-works-with-template-but-not-component

출처

2016-10-28 19:49:35 Mahesh

감사합니다! 필자의 의존성을 확인했으며 angle-ui-router 0.3을 사용하고 있습니다. – Leo

둘러보기 http://stackoverflow.com/questions/40575749/angular-ui-router-0-3-2-doesnt-work-correct-with-components –

시도 변수이 당신의 상태를 변경하려면 :

var states = [ 
    { 
     name: 'about', 
     url: '/about', 
     template: '<about></about>' 
    } 
]

불행하게도 구성 요소에 대한 UI 라우터 가이드는 내가 왜 당신에게 더 계속 찾고,이 방법으로 설명 할 것 같지 않습니다.

출처

2016-10-28 19:40:34

버전을 확인하고 https://github.com/angular-ui/ui-router/issues/2627을보십시오 – mmey

AngularJS : ui-router 구성 요소가 표시되지 않습니다.

답변

관련 문제