$Route는 기본 ng모델로 제공되지 않고, ngRoute 모듈로 제공된다.
그래서 route관련 기능들은 모두 route모듈로 접근해야 사용이 가능하다.
route.min.js파일 다운
angular-route.min.js아래 소스에서 app이름을 넣어주고, route모듈과 controller스크립트 파일을 추가한다.
<!DOCTYPE html> <html lang="en" ng-app="mainApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script type="text/javascript" src="js/angular-route.min.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body> <div ng-view></div> </body> </html>controller.js
var app = angular.module('mainApp', ['ngRoute']);
/*
module의 config api를 사용해서 provider 서비스 제공자에 접근이 가능하다.
여기에서는 $route 서비스 제공자를 인자로 받아온다.
$routeProvider의 when 메소드를 이용해서 특정 URL로 설정할 수 있다.
이때 라우터 설정 객체를 전달하는데 <ng-view>태그에 삽입을 원하는 탬플릿에 해당하는 url을 설정 객체의
template 또는 templateUrl 속성으로 정의한다.
template는 텍스트나 html등을 바로 삽입할 수 있고, templateURL은 특정 파일명을 추가해서 사용할 수 있다.
*/
app.config(function($routeProvider){
$routeProvider.when('/', {
template : "Welcome to Homepage!"
}).when('/login', {
template : "login Page"
}).otherwise({
redirectTo : '/'
});
});
결과화면
Console창에서 document.location.hash입력하고 엔터를 칠 경우 페이지가 이동되고 결과값이 화면에 출력한다
document.location.hash값을 /login으로 변경하고 실행하면 페이지가 이동되고 이동된 결과값이 출력된다.
세팅되지 않은 주소로 입력이 될 경우 기본 페이지로 Redirect를 시켜주면 된다.
'JavaScript > angularJS' 카테고리의 다른 글
| angularJS $http (0) | 2018.07.22 |
|---|---|
| AngularJS Login App (0) | 2018.07.22 |
| AngularJS01. Hello World (0) | 2018.07.20 |
| 3. todo 여러개 출력하기(반복문 사용하기) - ng-repeat (0) | 2018.05.18 |
| 2. ng-app, ng-init 사용하기, AngularJS개념, 간단한 todo객체 만들어보기 (0) | 2018.05.18 |
