01. Binding : http://forum.falinux.com/zbxe/index.php?document_srl=804623
02. Controller : http://forum.falinux.com/zbxe/index.php?document_srl=804950
03. controller 사이의 데이터 공유 : http://forum.falinux.com/zbxe/index.php?document_srl=805325
04. controller에 메소드 만들기 : http://forum.falinux.com/zbxe/index.php?document_srl=805915
05. Filter : http://forum.falinux.com/zbxe/index.php?document_srl=806499
06. ng-repeat와 filter의 응용 : http://forum.falinux.com/zbxe/index.php?document_srl=806788
07. Directive : http://forum.falinux.com/zbxe/index.php?document_srl=807545
08. Directive #2 : http://forum.falinux.com/zbxe/index.php?document_srl=808009
09. $scope? scope? : http://forum.falinux.com/zbxe/index.php?document_srl=818891
10. templateUrl 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=826765
11. routeProvider 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=828375

지난 번에 routeProvider에 대해서 간략하게 알아보았습니다.

이번에는 좀 더 깊이 살펴보도록 하겠습니다.

우선 redirectTo를 알아봅시다.

public/javascripts/main.js를 다음과 같이 수정합니다.
var app = angular.module("app", ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider.when('/', 
    {
      templateUrl: "/view1.html",
      controller: "AppCtrl"
    }
  ).when('/view1',
    {
      templateUrl: "/view1.html",
      controller: "AppCtrl"
    }
  ).when('/view2',
    {
      templateUrl: "/view2.html",
      controller: "AppCtrl"
    }
  ).otherwise({
    redirectTo: '/'
  });
});

app.controller('AppCtrl', function ($scope) {
  $scope.model = {
    message: "This is my app!!!"
  }
})


이제 localhost/view2 는 view2를 보여주지만 나머지 모든 url에 대해서는 /로 redirect되는 것을 확인할 수 있습니다.


routeParam에 대해서 알아봅시다.


public/javascripts/main.js를 수정합니다.

var app = angular.module("app", ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider.when('/', 
    {
      templateUrl: "/view1.html",
      controller: "AppCtrl"
    }
  ).when('/view1/:value1/:value2',
    {
      redirectTo: function(routeParam, path, search) {
        console.log(routeParam);
        console.log(path);
        console.log(search);

        return '/';
      }
    }
  ).when('/view2',
    {
      templateUrl: "/view2.html",
      controller: "AppCtrl"
    }
  ).otherwise({
    redirectTo: '/'
  });
});

app.controller('AppCtrl', function ($scope) {
  $scope.model = {
    message: "This is my app!!!"
  }
})


브라우저로 http://localhost/#/view1/a/b 를 들어가면 log로 다음과 같이 출력이 됩니다.

Object {value1: "a", value2: "b"}
/view1/a/b
Object {}


이렇게 url에 있는 파라미터를 활용할 수 있습니다.


이 게시물을...