AngularJS는 단일 페이지의 여러보기를 통해 단일 페이지 응용 프로그램을 지원합니다. 이를 위해 AngularJS는 NG-View 및 NG-Template 지시와 $ loureprovider 서비스를 제공합니다.
ng-view
NG-View 태그는 단순히 구성에 따라 배치 할 수있는 해당 뷰 (HTML 또는 NG-Template보기) 인 자리 표시자를 만듭니다.
사용
기본 모듈에서 div 및 ng-view를 정의하십시오.
<div ng-app = "mainapp"> ... <div ng-view> </div> </div>
ng-template
NG-Template 지시문은 스크립트 태그를 사용하여 HTML 뷰를 만드는 데 사용됩니다. 여기에는 $ loureprovider가 매핑 한 컨트롤러 뷰용 "ID"속성이 포함되어 있습니다.
사용
유형을 기본 모듈에서 ng-template의 스크립트 블록으로 정의하십시오.
<div ng-app = "mainapp"> ... <script type = "text/ng-template"id = "addstudent.html"> <h2> 학생 추가 </h2> {{message}} </script> </div>$ loureprovider
$ loureprovider는 그룹 URL을 구성하고 해당 HTML 페이지 또는 NG-Template에 맵핑하고 동일한 키를 컨트롤러에 사용하는 서비스를 첨부합니다.
사용
유형을 기본 모듈에서 ng-template의 스크립트 블록으로 정의하십시오.
<div ng-app = "mainapp"> ... <script type = "text/ng-template"id = "addstudent.html"> <h2> 학생 추가 </h2> {{message}} </script> </div>사용
기본 모듈의 스크립트 블록을 정의하고 라우팅 구성을 설정하십시오.
var mainApp = Angular.Module ( "mainApp", [ 'ngroute']); mainApp.config ([ '$ loureprovider', function ($ lourteprovider) {$ lourteprovider. say ( '/addstudent', {templateUrl : 'addStudent.html', 컨트롤러 : 'addStudentController'}). 'ViewStudentsController'}).다음은 위의 예에서 고려해야 할 중요한 문제입니다.
$ loureprovider는 키워드를 '$ loureprovider'로 사용하여 MainApp 모듈의 구성 함수로 정의됩니다.
$ lourteprovider URL "/addStudent"가 정의되면 "addStudent.html"에지도를 맵핑하십시오. addStudent.html은 기본 HTML 페이지와 동일한 경로에 있어야합니다. HTM 페이지가 정의되지 않으면 ng-template은 id = "addstudent.html"에 의해 사용됩니다. 우리는 ng-template를 사용했습니다.
"그렇지 않으면"설정에 사용되는 기본보기입니다.
"Conlloer"는 뷰의 해당 컨트롤러를 설정하는 데 사용됩니다.
예
다음 예제는 위의 모든 지침을 보여줍니다.
testangularjs.html
<html> <head> <title> Angular JS보기 </title> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"> </script> <body> <h2> Angularjs 샘플 애플리케이션 </h2> <div-apapp "<p> <href ="#adstudent </p> <p> <a href = "#viewstudents"> view view view </a> </p> <div ng-view> </div> <script type = "text/ng-template"id = "addstudent.html"> <h2> 학생 추가 </h2> {{message}} </script> <script> <text/ng-template " id = "viewstudents.html"> <h2> view </h2> {{message}} </script> <cript> var mainapp = angular.module ( "mainApp", [ 'ngroute']); mainApp.config ([ '$ loureprovider', function ($ lourteprovider) {$ lourteprovider. say ( '/addstudent', {templateUrl : 'addStudent.html', 컨트롤러 : 'addStudentController'}). 'ViewStudentsController'}). mainApp.controller ( 'addStudentController', function ($ scope) {$ scope.message = "이 페이지는 학생 양식 추가를 표시하는 데 사용됩니다";}); mainApp.controller ( 'ViewStudentsController', function ($ scope) {$ scope.message = "이 페이지는 모든 학생을 표시하는 데 사용됩니다";}); </script> </body> </html>결과
웹 브라우저에서 Open TextAngularjs.html. 결과는 다음과 같습니다.
위는 AngularJS보기 정보의 편집입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 웹 사이트를 지원 해주셔서 감사합니다!