웹사이트 검색

AngularJS 라우팅 예제 - ngRoute, $routeProvider

오늘은 ngRoute 모듈과 $routeProvider를 사용한 AngularJS Routing 예제를 살펴보겠습니다. 앞서 우리는 AngularJS 컨트롤러를 살펴보았습니다.

AngularJS의 라우팅

ngRoute

AngularJS ngRoute 모듈은 Angular 애플리케이션을 위한 라우팅, 딥 링크 서비스 및 지시문을 제공합니다. 라우팅 기능을 사용하려면 AngularJS 공식 사이트에서 ngRoute 모듈이 포함된 angular-route.js 스크립트를 다운로드해야 합니다. 애플리케이션에서 CDN을 사용하여 이 파일을 포함할 수도 있습니다. 이 튜토리얼에서는 Google CDN을 사용할 것입니다. https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js 이 파일을 애플리케이션에 번들하는 경우 추가할 수 있습니다. 아래 코드로 귀하의 페이지에.

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

Google CDN에서 포함하려면 아래 코드를 사용하십시오.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>

그런 다음 아래와 같이 종속 모듈로 추가하여 AngularJS 애플리케이션에서 ngRoute 모듈을 로드합니다.

angular.module('appName', ['ngRoute']);

ngView

ngView 지시문은 지정된 경로에 HTML 템플릿 또는 보기를 표시하는 데 사용됩니다. 현재 경로가 변경될 때마다 $route 서비스의 구성에 따라 포함된 보기도 함께 변경됩니다.

$routeProvider

$routeProvider는 경로를 구성하는 데 사용됩니다. ngRoute config()를 사용하여 $routeProvider를 구성합니다. config()는 $routeProvider를 매개변수로 사용하는 함수를 사용하고 라우팅 구성은 함수 내부로 들어갑니다. $routeProvider에는 when() 또는 otherwise() 메서드를 허용하는 간단한 API가 있습니다.

AngularJS 라우팅 구문

다음 구문은 AngularJS에서 경로를 구성하는 데 사용됩니다.

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

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

when() 메서드는 경로와 경로를 매개변수로 받습니다. 경로는 # 기호 뒤의 URL 부분입니다. route에는 templateUrl 및 controller의 두 가지 속성이 포함되어 있습니다. templateUrl 속성은 AngularJS가 ngView 지시문을 사용하여 div 내부에 로드하고 표시해야 하는 HTML 템플릿을 정의합니다. 컨트롤러 속성은 HTML 템플릿과 함께 사용해야 하는 컨트롤러를 정의합니다. 애플리케이션이 로드되면 # 기호 뒤의 URL 부분과 경로가 일치합니다. 지정된 URL과 일치하는 경로 경로가 없으면 브라우저는 else() 함수에 지정된 경로로 리디렉션됩니다.

AngularJS 라우팅 예제

이제 간단한 예제를 통해 AngularJS 라우팅을 이해해 보겠습니다. 처음에는 모듈, 일부 경로를 정의하고 컨트롤러를 만들고 여러 보기를 만듭니다. 마지막으로 다중 보기를 보유할 응용 프로그램의 셸 페이지를 만듭니다.

  1. mainApp이라는 모듈을 생성하고 ngRoute를 종속 모듈로 로드합니다.
  2. $routeProvider를 사용하여 경로를 구성합니다.
  3. 이 예에서는 /home 및 /viewStudents의 두 경로를 사용합니다.
  4. 이 예에서는 단일 컨트롤러인 StudentController
    5. 만 사용합니다.\n
  5. StudentController는 학생 배열과 메시지로 초기화됩니다. 홈페이지에 메시지를 표시하고 viewStudents 페이지에 학생 목록을 표시합니다.
  6. 이 파일을 main.js로 저장

main.js

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

mainApp.config(function($routeProvider) {
	$routeProvider
		.when('/home', {
			templateUrl: 'home.html',
			controller: 'StudentController'
		})
		.when('/viewStudents', {
			templateUrl: 'viewStudents.html',
			controller: 'StudentController'
		})
		.otherwise({
			redirectTo: '/home'
		});
});

mainApp.controller('StudentController', function($scope) {
	$scope.students = [
		{name: 'Mark Waugh', city:'New York'},
		{name: 'Steve Jonathan', city:'London'},
		{name: 'John Marcus', city:'Paris'}
	];

	$scope.message = "Click on the hyper link to view the students list.";
});

예를 들어 URL이 https://www.journaldev.com/index.html#/home과 같은 경우 # 뒤의 URL 부분이 /home과 일치하면 home을 로드합니다. html 페이지이고 /viewStudents와 일치하면 viewStudents.html을 셸 페이지에 로드합니다. 일치하는 것이 없으면 그렇지 않은 상태로 이동하고 페이지는 home.html로 리디렉션됩니다. 이제 보기를 만들고 home.html 및 viewStudents.html 파일로 저장할 수 있습니다. <코드>홈.html

<div class="container">
	<h2> Welcome </h2>
	<p>{{message}}</p>
	<a href="#/viewStudents"> View Students List</a>
</div>

이것은 우리 애플리케이션의 기본 페이지입니다. 이 보기에서는 StudentController에서 이미 초기화한 메시지를 출력합니다. viewStudents 페이지에 대한 링크도 볼 수 있습니다. viewStudents.html

<div class="container">
	<h2> View Students </h2>
	Search:
	<br/>
		<input type="text" ng-model="name" />
	<br/>
	<ul>
		<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
	</ul>

	<a href="#/home"> Back</a>
</div>

위 보기에서 검색 옵션이 있는 학생 목록을 볼 수 있습니다. 마지막으로 아래 단계에 따라 AngularJS 라우팅 예제 애플리케이션을 완료합니다.

  • ng-app 응용 프로그램 mainApp 자동 부트스트랩
  • ngView 지시문은 보기의 자리 표시자입니다 - home.html 및 viewStudents.html
  • angular.min.js 및 angular-route.min.js 포함
  • 이전 단계에서 만든 main.js를 포함합니다.
  • 파일을 index.html로 저장

<코드>index.html

<!DOCTYPE html>
<html>
	<head lang="en">
	  <meta charset="utf-8">
	  <title>AngularJS Routing</title>

	</head>
	<body>

	  <div ng-app="mainApp">
		<ng-view></ng-view>
	  </div>

	  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
	  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
	  <script type="text/javascript" src="main.js"></script>
	</body>
</html>

이것이 AngularJS 라우팅 예제의 전부입니다. 애플리케이션을 실행할 준비가 되었습니다.

애플리케이션 실행

  • 동일한 디렉토리에 모든 파일을 저장합니다.
  • 브라우저에서 index.html 열기
  • 온라인 데모를 사용해 보십시오.

AngularJS 라우팅 예제 온라인 데모