AngualrJS 소스를 분석해야 하는 관계로 급하게 인터넷에서 정보를 짜집기 하는중.
정말 울고 싶다...빨리 다른걸로 개발했으면 좋겠다...ㅠㅠ
이거 사용하는 프로젝트가 거의 없는 듯.
============================================
라우팅 기능 구현 모듈
ng-route : 기본 모듈
ui-router : angular-ui에서 개발함
기존엔 백엔드 서버에서 관리하나, SPA 에서는 브라우저 단에서
처리할 수 있어야 함
현재 페이지에서 다른 페이지로 이동하는 방법으로, routeProvider와 stateProvider 를 사용.
stateProvider를 사용하는 경우 $state를 사용하여 페이지 이동이 가능합니다.
$state.go('stateName', {parameter})
여기서 stateName은 route 설정에 선언된 이름, 즉 이동할 위치이며 뒤의 parameter는 함께 전달할 파라미터 값입니다.
예) 이동페이지가 아래와 같다면..
http://webisfree.com?category=angular
1. js 에서 사용법
$state.go('wf', {category: 'angular'});
2. html 태그에서 사용법
<a ui-sref="wf({ category: 'angular' })">Click</a>
예)
<a ui-sref="about" href="#/about">ABOUT</a>
1. 브라우저에서 #/about 주소로 접속하면 about이라는 이름의 State로 연결되어 물리적인 페이지 이동 없이 해당 내용이 출력된다.
2. HTML의 특정 엘러먼트에 ui-view 애트리뷰트를 식별자로 부여하면 해당 부분에 링크된 페이지의 내용이 AJAX로 주입된다.
var sampleApp = angular.module('sample-app', ['ui.router']);
sampleApp.config(function($stateProvider) {
var aboutState = {
name: 'about',
url: '/about',
templateUrl: 'about.html'
}
$stateProvider.state(aboutState);
});
주소와 페이지를 연결하여 주는 URL 라우팅 정보의 각 단위를 State라고 부른다.
위와 같이 개별 State를 $stateProvider로 추가하여 준다.
위의 경우 #/about 주소 요청이 들어올 경우 about.html의 내용을 ui-view 영역에 출력한다.
=====================================================
멀티뷰를 가진 state 예
<!-- index.html -->
<body>
<div ui-view></div>
</body>
<!-- article.html -->
<div>
<div ui-view="header"></div>
<div ui-view="body"></div>
<div ui-view="footer"></div>
</div>
<!-- article-header.html -->
<div>Header</div>
<!-- article-body.html -->
<div>Body</div>
<!-- article-footer.html -->
<div>Footer</div>
=====================================================
// app.js
var sampleApp = angular.module('sample-app', ['ui.router']);
sampleApp.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('article', {
url: '/article',
views: {
'': {
templateUrl: 'article.html'
},
'header@article': {
templateUrl: 'article-header.html'
},
'body@article': {
templateUrl: 'article-body.html'
},
'footer@article': {
templateUrl: 'article-footer.html'
}
}
});
}]);
======================================================
JavaScript 오브젝트는 크게 3가지.
1. Native Object
2. Host Object
3. User Object
$ location 서비스는 window.location을 기반으로 브라우저 주소 표시 줄의 URL을 구문 분석하고 응용 프로그램에서 URL을 사용할 수있게합니다. 주소 표시 줄의 URL 변경 사항은 $ location 서비스에 반영되고 $ location 변경 내용은 브라우저 주소 표시 줄에 반영됩니다.
$ location 서비스 :
브라우저 주소 표시 줄에 현재 URL을 노출하므로
URL을보고 관찰하십시오.
URL을 변경하십시오.
사용자가 URL을 브라우저와 동기화
주소 표시 줄을 변경합니다.
뒤로 또는 앞으로 버튼을 클릭하거나 내역 링크를 클릭합니다.
링크를 클릭하십시오.
URL 객체를 일련의 메소드 (프로토콜, 호스트, 포트, 경로, 검색, 해시)로 나타냅니다.
url([url]);
메소드는 getter / setter입니다.
매개 변수없이 호출되면 URL (예 : /path?a=b#hash )을 리턴 하십시오.
매개 변수로 호출 될 때 경로, 검색 및 해시를 변경하고 $location 리턴하십시오 .
// given URL http://example.com/#/some/path?foo=bar&baz=xoxo
var url = $location.url();
// => "/some/path?foo=bar&baz=xoxo"
=========================================================
How to get current URL Location in Angularjs?
<!DOCTYPE html>
<html>
<head>
<title>Get current url in Angularjs?</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
</head>
<body>
<div ng-app="HDTutoApp" ng-controller="HDTutoCtrl">
<p>AngularJs Url of Webpage: {{ weburi }}</p>
<p>Host of Webpage in AngularJs: {{ myhostname }}</p>
<p>AngularJs Port of Webpage: {{ webportno }}</p>
<p>Angular Protocol of Webpage display: {{ webprotocol }}</p>
</div>
<script type="text/javascript">
var HDTutoApp = angular.module('HDTutoApp', []);
HDTutoApp.controller('HDTutoCtrl', function ($scope, $location) {
$scope.weburi = $location.absUrl();
$scope.myhostname = $location.host();
$scope.webportno = $location.port();
$scope.webprotocol = $location.protocol();
});
</script>
</body>
</html>
========================================================
https://jeonghwan-kim.github.io/ui-route%EB%A1%9C-%EB%9D%BC%EC%9A%B0%ED%8C%85-%EC%9D%B8%EC%A6%9D-%EA%B5%AC%ED%98%84/
https://webisfree.com/2017-09-27/angularjs-stateprovider%EC%97%90%EC%84%9C-state-go-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95
https://jsonobject.tistory.com/264
angularjs stateProvider에서 $state.go 사용하는 방법
AngularJS를 사용하여 SPA(Single Page Application)으로 구현하는 경우 페이지 이동 즉, 현재 페이지에서 다른 페이지로 이동하는 방법으로 routeProvider 또는 stateProvider를 사용합니다.
webisfree.com
ui-route로 라우팅 인증 구현
단일 페이지 웹 어플리케이션(SPA)을 지원하는 앵귤러의 핵심적인 모듈이 바로 "라우팅 모듈"입니다. 이것을 구현한 것이 ng-route와 ui-router 모듈이구요. ng-route는 앵귤러에서 기본으로 제공하는
jeonghwan-kim.github.io
https://runebook.dev/ko/docs/angularjs/api/ng/service/$location
http://daplus.net/javascript-window-%EB%98%90%EB%8A%94-location%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-angularjs%EC%97%90%EC%84%9C-%EB%A6%AC%EB%94%94%EB%A0%89%EC%85%98/
[javascript] $ window 또는 $ location을 사용하여 AngularJS에서 리디렉션 - 리뷰나라
내가 작업중인 앱에는 여러 상태 (ui-router 사용)가 포함되어 있습니다. 일부 상태에서는 로그인이 필요하고 다른 상태는 공개적으로 사용 가능합니다. 사용자가 로그인했는지 여부를 유효하게
daplus.net
$localStorage
https://mizzo-dev.tistory.com/entry/AngularJS-AngularJS-%ED%95%99%EC%8A%B5-3
'IT > JavaScript와 Framework' 카테고리의 다른 글
| Angualar에서 ng-conller as 문법에 대한 설명된 곳... (0) | 2022.05.02 |
|---|---|
| AngularJS - routeProvider와 urlRouterProvider 차이 $rootScope.on 에 대한 써머리들 (0) | 2022.04.29 |
| eclipse - AngualrJS 실습1 (0) | 2022.04.21 |
| AngularJS 서비스 생성 API provider, factory, service (0) | 2022.04.18 |
| JWT ( JSON WEB TOKEN ) 이란? (0) | 2022.04.14 |
댓글