<html>
<head>
<title>Flapper News</title>
<script src="/angular.min.js"></script>
<script src="/angular-ui-router.js"></script>
<script src="EX1.js"></script>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view>default</ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News1</h1>
<a href="#/home2">Go P2</a>
</div>
</script>
<script type="text/ng-template" id="/home2.html">
<div class="page-header">
<h1>Flapper News2</h1>
<a href="#/home">Go P1</a>
</div>
</script>
</body>
</html>
EX1.html
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
var app = angular.module('flapperNews', ['ui.router'])
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html'
,controller: 'MainCtrl'
});
$stateProvider
.state('home2', {
url: '/home2',
templateUrl: '/home2.html'
,controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
EX1.js
이러면 EX1.html을 불러오면 js파일에 인자가 없기때문에 $urlRouterProvider.otherwise('home'); 를 실행하게 되고 home이라는 기본 스테이트로 넘어가게 되어
asd.html안에있는 /home.html 를 불러오게 된다.
https://thinkster.io/mean-stack-tutorial 참고하였음
템플릿 넘기기는 <a>태그로 가능하기도 한데 코드로 약간 복잡하게도 가능함
http://stackoverflow.com/questions/14201753/angular-js-how-when-to-use-ng-click-to-call-a-route 참고하였음
angular.min.js