controller.html index.html 페이지

"BaseCtrl"컨트롤러 클래스가 있습니다. 이 컨트롤러 클래스는 기본/루트 HTML 페이지 "index.html"에 대한 전역 함수를 처리합니다. TypeScript 초보자입니다. 일부 HTML보기에 컨트롤러를 사용하려면 다음 세 가지를해야합니다.controller.html index.html 페이지

1) HTML보기에서 컨트롤러를 명시 적으로 호출 할 필요가 없습니다. 즉, ng-controller 특성을 사용할 필요가 없습니다. 경우 1

2)) 내 응용 프로그램의 루트 클래스에서 작동하는, 나는 컨트롤러의 별명 (예 : controllerAs 지정 "controllerAs"와 같은 특별한 속성을 사용해야합니다. "BC"를 예를 들어

, $ 범위가 사용되지 않기 때문에

$routeProvider 
      .when("/login", { controller: "LoginCtrl", templateUrl: "app/views/login.html", controllerAs: "lc" });

3), 모든 식료품 컨트롤러 클래스의 (메서드, 속성)에 액세스하기 위해, 나는 2에서 "BC")처럼 컨트롤러의 별칭을 사용해야합니다. 예 : ng-model = "bc.FirstName"등

내 질문은 : 위에 언급 한 컨트롤러 "BaseCtrl"이 있습니다. 하지만이 컨트롤러는 내 응용 프로그램 경로 클래스의 모든 경로와 연결되어 있지 않습니다 (내 아래의 경로 클래스 코드를 참조하십시오). 즉, 해당 컨트롤러에 대한 별칭이없는 것입니다. 그렇다면 기본/루트 "index.html"에서 컨트롤러의 내용을 호출하거나 액세스하려면 어떻게해야합니까? 컨트롤러 클래스의 코드에서 "$ scope"를 사용하여 기존의 비 -Script 코드와 동일하게해야 컨트롤러의 별칭을 사용하는 것에 대해 걱정하지 않아도됩니까? 각도 코드에 TypeScript를 사용하고 있습니다.

는 당신의 도움을 주셔서 감사합니다.

index.html을 코드 :

<!DOCTYPE html> 
<html> 
<head> 
    <title>AngularJS With TypeScript In Visual Studio</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

    <script src="scripts/angular.js"></script> 
    <script src="scripts/angular-route.js"></script> 

    <script src="app/app.js"></script> 
    <script src="app/Constants/Constants.js"></script> 
    <script src="app/routes.js"></script> 

    <script src="app/models/AuthToken.js"></script> 

    <script src="app/services/SessionSrvc.js"></script> 
    <script src="app/controllers/BaseCtrl.js"></script> 


</head> 
<body ng-app="angularWithTs"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <nav class="navbar navbar-default"> 
        <div class="container-fluid"> 
         <div class="navbar-header"> 
          <a class="navbar-brand" href="#">Angular URl-Based routing</a> 
         </div> 

         <ul class="nav navbar-nav"> 
          <li><a href="/login" ng-if="!bc.loggedIn()">Login</a></li> 
          <li><a href="/register" ng-if="!bc.loggedIn()">Register</a></li> 
          <li><a href="/presidents">Presidents</a></li> 
          <li><a href="/contacts">Contacts</a></li> 

          <li><a href="#" ng-click="bc.OnLogoutButtonClicked()">Logout</a></li> 




         </ul> 

         <ul class="nav navbar-nav pull-right"> 
          <li> 
           <a disabled><span class="label label-success pull-right" ng-if="bc.loggedIn()">Logged In</span> </a> 
          </li> 
         </ul> 

        </div> 
       </nav> 

       <div> 
        <div ng-view></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

경로 클래스 코드 :

/// <reference path="../scripts/typings/angularjs/angular.d.ts" /> 
/// <reference path="../scripts/typings/angularjs/angular-route.d.ts"/> 

module angularWithTs { 
    "use strict"; 

    function routes($routeProvider: ng.route.IRouteProvider, $locationProvider: ng.ILocationProvider) { 


     $routeProvider 
      .when("/login", { controller: "LoginCtrl", templateUrl: "app/views/login.html", controllerAs: "lc" }); 


     $routeProvider 
      .when("/logout", { controller: "LogoutCtrl", templateUrl: "app/views/logout.html", controllerAs: "loc" }); 




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

     $locationProvider.html5Mode({ 
      enabled: true, 
      requireBase: false 
     }); 
    } 


    routes.$inject = ["$routeProvider", "$locationProvider"]; 

    angular.module("angularWithTs").config(routes); 
}

BaseCtrl 클래스 코드 :

module angularWithTs { 
    "use strict"; 

    export class BaseCtrl { 
     static $inject = ["$location", "SessionSrvc"]; 
     _sessionSrvc: SessionSrvc; 
     _$location: ng.ILocationService; // http://notebookheavy.com/2013/05/22/angularjs-and-typescript/ 


     constructor($location: ng.ILocationService, sessionSrvc: SessionSrvc) { 
      this._sessionSrvc = sessionSrvc; 
      this._$location = $location; 
     } 

     loggedIn(): boolean { 
      return this._sessionSrvc.getToken() != "undefined"; 
     } 

     OnLogoutButtonClicked() : void { 
      // do some stuffs 
     } 


    } 

    angular.module("angularWithTs").controller("BaseCtrl", BaseCtrl); 
}

출처

2016-09-10 Thomas.Benz

루트 (/) 경로의 경로를 만들거나 'ng-controller'를 사용하십시오. 컨트롤러에 어떤 식 으로든 무엇이 있는지보기를 말해야합니다. 'ng-controller '가 없으면 TypeScript와 아무런 관련이 없습니다. 이 결점은 라우트 정의에서 컨트롤러를 지정했기 때문입니다. BTW,'.when()'와'.otherwise()'를'$ routeProvider'에 연결할 수 있습니다. – Lex

도와 줘서 고마워, 렉스. "index.html"보기에서 ng-controller를 사용합니다. –

컨트롤러를 부분으로 연결하는 방법에는 두 가지가 있습니다.

경로를 사용하고 경로 개체에 controllerAs 속성을 정의 할 수 있습니다.
일부 요소에 ng-controller 지시문을 정의합니다. 이 경우에도 별칭을 정의 할 수 있습니다. 예 : <div ng-controller="BaseCtrl as vm">{{vm.name}}</div> 그래서 vm 별칭입니다.

물론 특히 TypeScript 사용의 경우 1이 더 좋습니다. 그러나 귀하의 응용 프로그램에 더 적합한 것을 선택하십시오.

출처

2016-09-10 18:38:28 Mikki

Mikki, 도와 주셔서 감사합니다. 나는 접근 # 2 ng-controller로 간다. 그리고 그 접근법이 효과적입니다.그러나 "/"(루트)에 대한 추가 경로를 사용하여 "index.html"로 이동하면 내 응용 프로그램이 무한 재귀 적으로 실행됩니다. –

controller.html index.html 페이지

답변

관련 문제