codesign: [AngularJS] route

* Router

location에 따라서, 다른 view를 보여준다.
각 views는 컨트롤러를 가지고 있다.

1. index.html

부트 스트랩은 gui 변경으로 사용할 필요는 없다.
class 관련 내용은 부트스트랩의 css 관련 설정이므로, router와는 상관없다.

<!DOCTYPE html>

<html lang="en">

  <head>

    <title>AngularJS Routing example</title>

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

  </head>

  <body ng-app="fruitApp">

    <div class="container">

        <div class="row">

        <div class="col-md-3">

            <ul class="nav">
                <!-- link -->

                <li><a href="#AddNewOrder"> Add New Order </a></li>

                <li><a href="#ShowOrders/1"> Show Order </a></li>

            </ul>

        </div>

        <div class="col-md-9">

            <!-- router에 의한 view가 전환된다-->

            <div ng-view></div>

        </div>

        </div>

    </div>  

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

    <script src="app.js"></script>

  </body>

</html>

Colored by Color Scripter

2. app.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

//Define an angular module for our app

var sampleApp = angular.module('fruitApp', []);

//Define Routing for app

sampleApp.config(['$routeProvider',

  function($routeProvider) {

    $routeProvider.

      when('/AddNewOrder', {

        templateUrl: 'templates/add_order.html',

        controller: 'AddOrderController',      

        customData: 'customData'// custom data를 사용할 수 있다.

    }).

      when('/ShowOrders/:orderId', {// id를 이용해서, routeParams에서 처리할 수 있다.

        templateUrl: 'templates/show_orders.html',

        controller: 'ShowOrdersController'

      }).

      otherwise({

        redirectTo: '/AddNewOrder'

      });

}]);

sampleApp.controller('AddOrderController', function($scope,$route) {        

     //access the foodata property using $route.current

    var customData = $route.current.customData;

    $scope.message = customData;

});

sampleApp.controller('ShowOrdersController', function($scope,$routeParams) {

    $scope.message = 'This is Show orderId screen';

   // routeParams을 이용해서, 아이템을 분류할 수 있다.

    $scope.order_id = $routeParams.orderId;

});

Colored by Color Scripter
cs

3. add_order.html

1

2

3

<h2>Add New Order</h2>

{{ message }}
cs

4. show_order.html

1

2

3

4

5

<h2>Show Orders</h2>

{{ message }}<br>

Here are the details for order <b>#{{order_id}}</b>.
cs

- reference

http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

codesign

2016년 1월 16일 토요일

[AngularJS] route

댓글 없음:

댓글 쓰기