티스토리 뷰
앞서 말했듯 이 UI-Routing 으로 요구 사항을 달성 할 수 있습니다 .
그러나이를 달성 할 수있는 추가 구성은 거의 없습니다. 전체 모듈을 탐색하는 대신 구체적으로 지정하십시오. 이것들로 시작
첫 번째 경우
- Index.html 에 학생 목록이 있습니다.
- studentName을 클릭하고-> studentDetails.html로 이동합니다 .
이 경우 탐색 전에 데이터를 미리 채울 수있는 RESOLVE 라는 속성 이 있습니다 .
명확한 설명이 여기에 제공됩니다.
두 번째 경우
classDetails.html이라는 페이지에서 일부 사용자에게는 표시되고 일부 사용자에게는 숨겨져 야하는 두 개의 섹션이 있습니다.
일부 학생이보고있는 경우 클래스의 직원 정보를 볼 수 없어야합니다.
직원이보고있는 경우 전체 클래스 세부 정보를 볼 수 있습니다.
우리가 재산이라고 한이 해결하기 위해 명명 된 뷰 에서 -UI 라우팅을
둘 다 다른보기이지만 동일한 컨트롤러를 사용합니다. 또한 ( 추상 상태 ) 코드가 포함 된 샘플 데모 에 대해 살펴보십시오.
두 번째 질문에 대해서는 아래 코드 스 니펫을 찾으십시오.
컨트롤러에 의존성으로 주입하여 재사용 할 수 있는 서비스 생성
angular.module('myApp').factory('dataService', function ($http) {
var connectionurl = 'http://localhost:8000/';
return {
////Common Service call for json files
getJsonContent: function (jsonfileName, successcallback) {
$http({
method: 'GET',
url: connectionurl + jsonfileName + '.json'
})
.success(function (data, status, headers, config) {
successcallback(data);
})
.error(function (data, status, headers, config) {
//error handling
})
}
}
});
컨트롤러에서 위 서비스 사용
angular.module('myApp').controller('myController', function ($scope, dataService) {
////Function triggered on some event
$scope.someFunction= function (value_changed_in_view) {
if (value_changed_in_view)
{
dataService.getJsonContent("jsonfileA",function (successcall) {
$scope.variable_name= successcall;
})
}
else {
dataService.getJsonContent("jsonfileB",function (successcall) {
$scope.variable_name= successcall;
})
}
}
});
1) Angular JS를 사용하고 있다고 언급 했으므로 ng-route / ui-route와 같은 Angular JS 기능을 사용할 수 있습니다. 이를 통해 사용자는 동일한 페이지 내에서 여러보기를로드 할 수 있습니다. HTML 부분의 경우 다른보기를로드하는 Main 및 Detailed View 옵션을 사용하여 간단한 탐색 모음을 만들 수 있습니다.
<div ui-view></div>
위의 div는보기에서 콘텐츠를로드합니다. 즉, ng / ui 경로에서 상태 또는 URL이 일치 할 때마다 해당 html을 위의 div 안에 통합 할 것입니다. 아래 링크는 더 많은 것을 이해하는 데 도움이 될 것입니다 : https://github.com/angular-ui/ui-router
2) 두 번째 질문에 대해 완전히 이해하지 못합니다. 다른 JSON을로드하려면 angular JS에서 컨트롤러 내부에 다른 함수를 정의하고 필요한 JSON 파일을 호출 할 수 있습니다.
------------------- A simple Single Page Application using AngularJs.
다운로드
Extract and execute in your local machine which will give you little idea about SPA
출처
https://stackoverflow.com/questions/39940163