Android App 프로그래밍 - Ionic Framework로 만화 사이트 어플 만들기 #2

일단 의 사이드 부분으로 적당히 수정 해보도록 하겠다. 간단하다. 일단 구조를 알아 보기 위해 app.js를 본다. 이 부분이 중요하다. 여기서 abstract: ture 라고 써져 있는 부분이 가장중요하다. angular-ui-abstract 여기에 들어가서 abstract 부분을 읽어 보자. 간단하게 이야기 하면 url-state에서의 자식개념이라고 생각하면 편하다. 예를 들어 app.search의 state는 url이 /search 지만 실제로는 /app/search로 표현된다. 즉 일단 /app의 state가 실행된 뒤, /search의 state가 실행된다. 그러므로 이 예제에서는 일단 menu template이 실행된후 그 다음에 child template이 실행되기 때문에 구조를 알기 위해서는 menu.html부터 보는 편이 편하다. 이게 menu.html 이다. 중요한부분은 태그이다. 일단 하나하나 보면 ionSideMenus부터 시작된다. 링크를 들어가서 docs를 보아라. 내용부분에는 헤더바와 태그를 넣었다.이 nav-view에 childstate의 template가 들어가게 된다. search라면 search.html이 이곳에 표현이 되는 구조이다. 그리고 밑에는 side-menu가 있다. 이 부분을 수정한다면 side-menu가 수정 될 것이다. 이렇게 바꾸었다. 이제 실행하면 side-menu가 이렇게 보인다. 그러면 이제 이에 알맞게 필요한 부분들을 만들도록 해보자.

일단 zang부터 만들어 보겠다. 우리가 예전에 쓴 meanStack으로 만드는 만화사이트 의 zang.js 을 참고하자. 똑같이 하면 된다. angular.module('zang', ['ionic']) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('app.zang', { url: '/zang', views: { 'menuContent': { templateUrl: 'templates/zang/list_zang.html', controller: 'listZangCtrl' } } }) .state('app.zang.sub', { url: '/zang/:listname', views: { 'menuContent': { templateUrl: 'templates/zang/sublist_zang.html', controller: 'sublistZangCtrl' } } }) .state('app.zang.view', { url: '/zang/:listname/:index', views: { 'menuContent': { templateUrl: 'templates/zang/view_zang.html', controller: 'viewZangCtrl' } } }) .state('app.zang.update', { url: '/zang/update', views: { 'menuContent': { templateUrl: 'templates/zang/update_zang.html', controller: 'updateZangCtrl' } } }) })

.controller('listZangCtrl', function ($scope, $http) {
    //ajax 통신을 위해 $http을 추가 하였다
    $http.get('/api/zangsisi/manhwalists')
        .then(function (res) {
            console.log(res.data);
            $scope.lists = res.data;
        });
    $scope.$parent.nowTitle = "장시시만화";
})
.controller('sublistZangCtrl', function ($scope, $http, $routeParams) {
    $http.get('/api/zangsisi/manhwalists/' + $routeParams.listname)
        .then(function (res) {
            console.log(res.data);
            $scope.manhwas = res.data;
        });
    $scope.$parent.nowTitle = $routeParams.listname;
})
.controller('viewZangCtrl', function ($scope, $http, $routeParams) {
    $http.get('/api/zangsisi/manhwalists/' + $routeParams.listname + '/' + $routeParams.index)
        .then(function (res) {
            console.log(res.data);
            $scope.manhwa = res.data;
            $scope.$parent.nowTitle = res.data.name;
        });
    $http.get('/api/zangsisi/manhwalists/' + $routeParams.listname + '/' + (parseInt($routeParams.index) - 1))
        .then(function (res) {
            console.log(res.data);
            $scope.preManhwa = res.data;
        });
    $http.get('/api/zangsisi/manhwalists/' + $routeParams.listname + '/' + (parseInt($routeParams.index) + 1))
        .then(function (res) {
            console.log(res.data);
            $scope.nextManhwa = res.data;
        });
})
.controller('updateZangCtrl', function ($scope, $http, $routeParams) {
    $http.get('/api/zangsisi/update')
        .then(function (res) {
            console.log(res.data);
            $scope.manhwas = res.data;
        });
    $scope.$parent.nowTitle = "업데이트목록-장시시";
});`

이런식으로 하면 될 듯 하다. 이제 html template 를 1개씩 만들어 보도록 하자.

일단 zangsisi 만화의 list부터 만들어 보자.

<ion-view view-title="list_zang"> <ion-content> <ion-list> <ion-item ng-repeat="item in lists" href="#/app/zang/{{item.name}}" ng-hide="item.name == '(공지사항)' || item.name == '(수정/건의)' || item.name == '(완결 작품 목록)' || item.name == '(페이스북 페이지)'"> {{item.name}} </ion-item> </ion-list> </ion-content> </ion-view>

이제 되는지 봐보자. 아마 이런 에러가 뜨면서 아무것도 표시가 안되었다(현재는 내 서버의 설정을 바꾸었기 때문에 될것이다. 똑같은 환경에서 하고 싶다면 일단 meanStack으로 만드는 만화사이트 를 git clone하거나 강좌를 따라해서 일단 서버를 만들고 http.get의 주소를 localhost:3000으로 하면 아마 이와같은 에러와 함께 안될것이다) 에러를 찬찬히 살펴보면 Access-Contrl-Allow-Origin 헤더가 문제라고 한다. 이건 CORS라고 하는 javascript의 자체적인 보안 문제이다. javascript는 자신의 서버가 아닌 다른 서버에서 데이터를 가져오는 것을 금지한다. CORS에 대해 더 자세히 알고싶다면 검색하라. 이걸 풀기 위해 우리는 서버에서 다른 서버의 javascript에서도 접근 할 수 있도록 만들어주자. 이런 설정을 추가해주면 된다. 이제 다시 실행하면 서버의 데이터를 잘 가져오는것을 확인할수 있을것이다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

그러면 이제 부터 이걸 토대로 나머지 부분들도 다 만들겠다. 쉬우니 혼자서 해보고 안된다면 git 을 참고하도록 하는것이 좋을듯 하다.

이제 탭을 추가하여 업데이트 부분을 만들도록 하겠다. 탭은 css 탭 ionic 탭 2가지 가 있다. 차이는 탭 모습을 보여주냐, 탭으로된 인터페이스를 만드느냐의 차이이다. 즉 탭의 모습만 보여주냐, 아니면 탭을 눌렀을때 어떤 컨트롤러가 실행되어서 어느 페이지로 이동되는등 인터페이스가 만들어 지냐의 차이가 있겠다. 잘 모르겠다면 한번 가지고 놀면 바로 알것이다. 우리는 이번에는 간단하게 탭을 눌렀을때에도 디자인은 같고, 내용물만 다르기 때문에 css쪽이 더 간단하게 될 것 같다고 생각되어서 css로 한다.일단 우리는 Striped Style tabs을 사용한다. 일단 간단하게 subheaer를 만들고 거기에 tab을 넣는다. 이런식으로 하면 된다. 일단 클릭을 하면 각각의 이름의변수만 true로 하고 나머지는 false로 한다. 그다음에 ng-class를 통해 active 클래스를 활성시켜준다. 그리고 마찬가지로 이렇게 한다면 눌럿을때 화면이 잘 바뀐다. 완료다. 이제는 ionic에서 localstorage을 이용하여 내만화, 최근본 만화등을 추가 할 수 있도록 하겠다.