angularjs $routeProvider template 함수 및 매개 변수 해혹

angularjs 공식 문서에서 $routeProvider의 설정에 대해template와templateUrl의 설정에 대해
if it is a function, it will be called with the following parameters:
{Array.<Object>} - route parameters extracted from the current$location.path() by applying the current route

읽기에 상당히 까다로워서 무슨 뜻인지 이해하기도 쉽지 않다.
간단하게 말하자면template와temlateUrl의 값은 하나의 함수일 수 있으며 매개 변수를 가지고 각각 하나의 html 스크립트와 하나의 html 스크립트 파일의 URL을 되돌려줄 수 있다.파라미터가 없는 상황은 간단하니 대응하는 데이터를 되돌려주면 된다.그럼 매개 변수가 있는 상황은요, 매개 변수는 무엇입니까?위에서 언급한 것은 루트 파라미터입니다.처음에 $routeParams인 줄 알고 $routeParams를 매개 변수로 삼았습니다.사실 함수를 정의할 때 우리가 전달하는 매개 변수는 사실 형삼이다.그럼 실삼은 어디에서 왔습니까?이 함수는 사실 백그라운드에서 실행되고 angularJS가 실삼을 함수에 전달한다. 물론 실삼을 인용하기 위해서는 함수에 형삼을 설정해야 한다.그럼 실삼은 어떻게 왔어요?위에서 언급한 현재 루트의 $location이 있습니다.path().path 설정 세션에서 path 파라미터가 이름 그룹 (named group) 을 사용하면 파라미터가 추출되어 $routeParams에 저장됩니다.path에서 추출된 이 매개 변수가 바로 이곳의 실삼입니다.
코드 보기:
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body ng-app="Main">
    <div ng-controller="MainController">
        <div ng-view></div>
    </div>
</body>
</html>
<script src="scripts/angular.min.js" type="text/javascript"></script>
<script src="scripts/angular-route.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function template(data)
    {
        console.log(data);
        return '<span>{{path}}</span><br /><span>{{url}}</span>';
    }
    var app = angular.module('Main', ['ngRoute']);
    app.controller('MainController', function ($scope, $location) {
        $location.url('/test/1#?a=1#hash');
        $scope.url = $location.url();
    }).controller('controllor', function ($scope, $location, $route) {
        $scope.path = $location.path();
    });
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/test/:test', {
            template: template,
            controller: 'controllor'
        });
      
    }]);
</script>

실행 후 콘솔에서 {"test":"1"}을 출력할 수 있습니다.
위의 글은 역할 영역의 문제 ($scope.url) 도 보여 줍니다.전역 함수 재angularjs의 응용

좋은 웹페이지 즐겨찾기