AngularJS 뷰

AngularJS는 단일 페이지에서 여러 뷰를 통해 단일 페이지 애플리케이션(Single Page Application)을 지원합니다. 이를 위해 AngularJS는 ng를 제공합니다-view와 ng-template 지시자 및 $routeProvider 서비스.

ng-view 지시자

ng-view 지시자는占位符만 생성하며, 설정에 따라 해당 뷰(HTML 또는 ng)를 배치할 수 있습니다.-template 뷰를 사용합니다).

사용법

메인 모듈에서 ng-view는 div를 정의합니다.

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

ng-template 지시자

ng-template 지시자는 스크립트 태그를 사용하여 HTML 뷰를 생성합니다. 그것은 다음을 포함합니다id속성, 이 속성은 $routeProvider가 컨트롤러와 뷰를 맵핑하는 데 사용합니다.

사용법

메인 모듈에서 스크립트 블록을 ng 정의하고, 그에 대한 컨트롤러를 추가합니다.-template。

<div　ng-app　=　"mainApp">
　　　...
　　　<script　type　=　"text/ng-template"　id　=　"addStudent.htm">
　　　　　　<h2> Add Student </h2>
　　　　　　{{message}}
　　　</script>
</div>

$routeProvider 서비스

$routeProvider는 URL 설정을 설정하고, 이를 해당 HTML 페이지나 ng와 맵핑할 수 있는 중요한 서비스입니다.-template 매핑을 통해 컨트롤러를 추가합니다.

사용법1

메인 모듈에서 스크립트 블록을 ng 정의하고, 그에 대한 컨트롤러를 추가합니다.-template。

<div　ng-app　=　"mainApp">　
　　　...　
　　　<script　type　=　"text/ng-template"　id　=　"addStudent.htm">　
　　　　　　<h2> Add Student </h2>　
　　　　　　{{message}}　
　　　</script>　　
</div>

사용법2

메인 모듈에서 스크립트 블록 정의하고 라우팅 설정을 설정합니다.

var　mainApp　=　angular.module("mainApp",　['ngRoute']);
mainApp.config(['$routeProvider',　function($routeProvider)　{
　　　$routeProvider
　　　
　　　.when('/addStudent',　{
　　　　　　templateUrl: 'addStudent.htm', controller: 'AddStudentController'
　　　})
　　　.when('/viewStudents', {
　　　　　　templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
　　　})
　　　.otherwise({
　　　　　　redirectTo: ''/addStudent
　　　});
});

위 예제에서 다음과 같은 점들이 중요합니다-

$routeProvider 정의는 mainApp 모듈 설정하의 함수로, '$routeProvider' 키를 사용합니다.
$routeProvider.when으로 정의된 URL"}}/addStudent"를 사용하여, "addStudent.htm"에 매핑된 URL을 사용했습니다. addStudent.htm은 HTML 주 페이지와 동일한 경로에 위치해야 합니다. HTML 페이지가 정의되지 않았다면, ng-template와 id ="addStudent.htm"을 함께 사용합니다. ng-template。
"otherwise"는 기본 뷰를 설정하는 데 사용됩니다.
"controller"는 뷰에 상응하는 컨트롤러를 설정하는 데 사용됩니다.

온라인 예제

이 예제는 위에 설명된 모든 지시의 사용을 보여줍니다.

testAngularJS.htm

예제

<html>
　　　<head>
　　　　　　<title>Angular　JS　Views</title>
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular-route.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-뷰 애플리케이션 예제</h2>
　　　　　　<div　ng-app　=　"mainApp">
　　　　　　　　　<p><a　href　=　"https://ko.oldtoolbag.com/run/angularjs-views-1.html#addStudent"　target="_self">신규 학생</a></p>
　　　　　　　　　<p><a　href　=　"https://ko.oldtoolbag.com/run/angularjs-views-1.html#viewStudents"　target="_self">보기 학생</a></p>
　　　　　　　　　<div　ng-view></div>
　　　　　　　　　
　　　　　　　　　<script　type　=　"text/ng-template"　id　=　"addStudent.htm">
　　　　　　　　　　　　<h2>신규 학생</h2>
　　　　　　　　　　　　{{message}}
　　　　　　　　　</script>
　　　　　　　　　
　　　　　　　　　<script　type　=　"text/ng-template"　id　=　"viewStudents.htm">
　　　　　　　　　　　　<h2>보기 학생</h2>
　　　　　　　　　　　　{{message}}
　　　　　　　　　</script>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var　mainApp　=　angular.module("mainApp",　['ngRoute']);
　　　　　　　　　mainApp.config(['$routeProvider',　function($routeProvider)　{
　　　　　　　　　　　　$routeProvider
　　　　　　　　　　　　
　　　　　　　　　　　　.when('/addStudent',　{
　　　　　　　　　　　　　　　templateUrl:　'addStudent.htm',
　　　　　　　　　　　　　　　controller: ''
　　　　　　　　　　　　})
　　　　　　　　　　　　.when('/viewStudents', {
　　　　　　　　　　　　　　　templateUrl: ''
　　　　　　　　　　　　　　　controller: ''
　　　　　　　　　　　　})
　　　　　　　　　　　　.otherwise({
　　　　　　　　　　　　　　　redirectTo: ''/addStudent
　　　　　　　　　　　　});
　　　　　　　　　});
　　　　　　　　　mainApp.controller('AddStudentController', function($scope) {
　　　　　　　　　　　　$scope.message = "이 페이지는 학생 추가 테이블을 표시하기 위해 사용됩니다.";
　　　　　　　　　});
　　　　　　　　　mainApp.controller('ViewStudentsController', function($scope) {
　　　　　　　　　　　　$scope.message = "이 페이지는 모든 학생을 표시하기 위해 사용됩니다.";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

테스트를 해보세요‹/›

출력 결과

웹 브라우저에서 파일을 엽니다.testAngularJS.htm결과를 확인하십시오.

AngularJS 스코프(작용 범위)AngularJS Ajax

AngularJS 기본 튜토리얼