<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 참고하였음
'JS > Angularjs' 카테고리의 다른 글
| AngularJs - textarea ng-model 설정하고나면 공백일때 (0) | 2016.06.23 |
|---|---|
| AngularJs - angular is not defined (0) | 2016.06.23 |
| AngularJS - Directives (0) | 2016.06.23 |
| nodejs 이중 Array (0) | 2016.06.20 |
| Cloud 9 - AngularJS가 작동안할때 (0) | 2016.05.30 |