2017-05-15 2 views
0

ngRoute을 혼자서 처음으로 사용하려고합니다.컨트롤러가 등록되지 않은 것처럼 보입니다.

컨트롤러를 등록 할 때 Error: [$controller:ctrlreg]을 치려고합니다.

내 index.html을 :

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href="resources/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="resources/css/font-awesome.min.css" /> 
    <link href="resources/css/header.css" rel="stylesheet" /> 
    <link href="resources/css/index.css" rel="stylesheet" /> 
</head> 
<body> 
    <div id="main-div" class="flex"> 
     <div class="flex header"> 
      <img id="header-img-left" src="resources/img/WSC.png" /> 
      <img id="header-img-right" src="resources/img/StobartRail.png" /> 
     </div> 
     <!-- body --> 
     <div ng-app="kioskApp" id="questions-div"> 
      <div ng-view></div ng-view> 
     </div> 
    </div> 
    <script src="resources/js/angular.min.js"></script> 
    <script src="resources/js/angular-route.min.js"></script> 
    <script src="resources/js/jquery-3.2.1.min.js"></script> 
    <script src="resources/js/bootstrap.min.js"></script> 
    <script src="app/app.module.js"></script> 
    <script src="app/components/homeController.js"></script> 
</body> 
</html> 

당신이 두 .js 파일, 하나 개되는 모듈과 두 번째는 homeController 인을 참조 볼 수 있듯이.

모듈은 단순히 경로를 설정합니다 : 내 ng-view에서 해당 파일에 다양한 요소를 볼 수

(function() { 
    angular.module('kioskApp', ['ngRoute']) 
     .config(function ($routeProvider) { 

      $routeProvider.when("/", { 
       controller: "../../app/components/homeController", 
       controllerAs: "vm", 
       templateUrl: "../../app/home/home.html" 
      }); 

      $routeProvider.when("/login", { 
       controller: "../../app/components/loginController", 
       controllerAs: "vm", 
       templateUrl: "../../app/home/login.html" 
      }); 

      $routeProvider.otherwise({ redirectTo: "/" }); 
     }); 

})(); 

내 .html 중에서는 벌금을 집어됩니다. 의 대신에,

(function() { 

    "use strict"; 

    angular.module('kioskApp') 
     .controller('homeController', homeController); 

    function homeController() { 
     let vm = this; 

     vm.placeholder = [{ id: 10 }, { id: 11 }]; 

    }; 
})(); 

답변

2

, 파일 경로에 대한 필요가 없습니다. 컨트롤러가 아닌 경로의 이름을

 $routeProvider.when("/", { 
      controller: "homeController", 
      controllerAs: "vm", 
      templateUrl: "../../app/home/home.html" 
     }); 

     $routeProvider.when("/login", { 
      controller: "loginController", 
      controllerAs: "vm", 
      templateUrl: "../../app/home/login.html" 
     }); 
+0

F ** k 내 인생 ... 나는이 화면을 너무 오랫동안보고있었습니다. 건배 <3 – geostocker

+0

@geostocker anglesjs는 사용자가 등록한 컨트롤러를 검색합니다. :) – Pengyy

0

당신이 컨트롤러를 지정 오류가 :하지만 어떤 이유로 내 컨트롤러는

나는 homeController에 문제를 찾을 수 없습니다 ... 등록하지 않는 것 경로를 파일 이름으로 지정해야합니다.

는 대신 컨트롤러 경로의 컨트롤러 이름을 사용하여 경로 설정에서 올바른 구문

$routeProvider 
    .when('/', { 
    templateUrl: '../../app/home/login.html', 
    controllerAs: "vm", 
    controller: 'LoginCtrl' 
    }) 
0

을해야합니다. 등 : routes에 컨트롤러를 바인딩 할 때

$routeProvider.when("/", { 
     controller: "homeController", 
     controllerAs: "vm", 
     templateUrl: "../../app/home/home.html" 
    }); 
0

변경 컨트롤러 분야 : 는 아래의 예를 참조하십시오.

https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider

제어기 - {(문자열 | 기능) =} - 그 FN 제어기 새로 만든 범위 또는 문자열로 전달하는 경우는 등록 컨트롤러의 이름과 연관되어야한다.

관련 문제