ui 라우터가 작동하지 않습니다.

-1

ui 라우터 페이지를 비워두면 문제가 있습니다.ui 라우터가 작동하지 않습니다.

<!DOCTYPE html> 
<html ng-app="storeApp"> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="0.3.0" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="app.js"></script> 
    <script src="controllers.js"></script> 
    <script src="services.js"></script> 
    </head> 

    <body> 
    <div ui-view="header"></div> 
    <div ui-view="content"></div> 
    <div ui-view="footer"></div> 
    </body> 

</html>

이것은 나머지 파일의 링크입니다.

https://plnkr.co/edit/1tUxa4eV5TjErqc8syM9?p=preview

힌트 : 난 그냥 plunker에 맞게 수정 난 내 프로젝트에 이물 및 꿀꺽 꿀꺽를 사용합니다. 프로젝트에서 인덱스 페이지의

이미지 :

출처

2016-08-18 Amal Magdy

드디어 내가 잘못된 방법으로 $ stateParams을 포함하는 문제가 controller.js 있다는 알아 냈어.

출처

2016-08-21 11:24:25

는

당신은 services.js를로드 할 필요 app.js. 이전 controllers.js, 몇 가지 문제가 있습니다 당신의 plunker에서

<script src="services.js"></script> 
    <script src="controller.js"></script> 
    <script src="app.js"></script>

당신은 controllers.js 언급했지만 파일 이름이 controller.js

출처

2016-08-18 01:30:34 Sajeetharan

답장을 보내 주셔서 감사합니다. 제 컴퓨터에서 올바르게 쓰고 아무 것도 나타나지 않았습니다. 나는 plunker에서 그것을 정정하고 같은 문제가 존재한다. –

서비스 및 컨트롤러로드 순서는 Angular가로드 된 후가 아니라 이전에로드됩니다. – MBielski

로딩 순서 만 jQuery를위한 문제와 몇 가지 다른 파일입니다. AngularUI의로드 순서가 좋습니다. 이것은 말하자면, 나는 또한 일반적으로 루트 URL에 대한 경로가 필요하다는 것을 알게되었습니다.

.state('root', { 
    url:'', 
    views: { 
     'header': { 
      templateUrl : 'header.html' 
     }, 
     'content': { 
      template : 'home.html', 
      controller : 'HomeController' 
     }, 
     'footer': { 
      templateUrl : 'footer.html' 
     } 
    } 
})

또한 JavaScript 파일을 본문으로 옮기고 페이지의 마지막 요소 뒤에 나타나게해야합니다. JS 파일을 인라인으로로드하면 앱 부팅에 악영향을 미칠 수 있습니다.

<!DOCTYPE html> 
<html ng-app="storeApp"> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
    </head> 

    <body> 
    <div ui-view="header"></div> 
    <div ui-view="content"></div> 
    <div ui-view="footer"></div> 
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="0.3.0" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="app.js"></script> 
    <script src="controllers.js"></script> 
    <script src="services.js"></script> 
    </body> 

</html>

출처

2016-08-19 17:10:21 MBielski

재생 해 주셔서 감사합니다. 템플릿 'home.html'을 templateUrl : 'home.html'으로 변경합니다. 그렇지만 템플릿이 표시되지만 컨트롤러와 서비스가 작동하지 않습니다. –

예. 이미 내 프로젝트에서 해당 작업을 수행했습니다. 내 인덱스 페이지의 스크린 샷 http://i.stack.imgur.com/AMKSC.jpg –

ui 라우터가 작동하지 않습니다.

답변

관련 문제