angularjs ui routing 적용

메뉴 추가 및 컨트롤러 없는 html 적용 # 해시맵 사용

/src/main/resources/static/index.html
/src/main/resources/static/home.html
/src/main/resources/static/company.html
/src/main/resources/static/js/hello.js

<!doctype html>
<html>
<head>
<title>Hello AngularJS</title>
<link href="css/angular-bootstrap.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
 display: none !important;
}
</style>
</head>

<body ng-app="hello">
 <div class="container">
  <h1>Greeting</h1>
  <div ng-controller="homeController as home" ng-cloak class="ng-cloak">
   <p>The ID is {{home.greeting.id}}</p>
   <p>The content is {{home.greeting.content}}</p>
   <a href="#/home">home</a> |
   <a href="#/company">company</a> <br>
   <div ng-view></div>
  </div>
 </div>
 <script src="js/angular-bootstrap.js" type="text/javascript"></script>
 <script src="js/hello.js"></script>
</body>
</html>

angular.module('hello',  ['ngRoute'])

.controller('homeController', function($http) {
 var self = this;
 $http.get('resource/').then(function(response) {
  self.greeting = response.data;
 })
})

 .controller('companyController', function($http) {
  var self = this;

 })



.config(function($routeProvider, $locationProvider) {
 $routeProvider
  .when('/', {
   templateUrl: 'home.html'
  })
  .when('/home', {
   templateUrl: 'home.html'
  }) // 컨트롤러 필요 없을때
  .when('/company', {
   templateUrl: 'company.html',
   controller  : 'companyController'
  }); // 컨트롤러 필요 할때

 // configure html5 to get links working on jsfiddle
 //$locationProvider.html5Mode(true);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
홈
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>회사</title>
</head>
<body>
회사
</body>
</html>

Live Bit Block

이 블로그 검색

angularjs ui routing 적용

angularjs ui routing 적용

댓글

댓글 쓰기