기존 Angular1 웹 앱을 Cordova 앱으로 변환하는 방법

기존 Angular1 웹 앱을 Cordova 앱으로 변환하는 방법

인터넷에서 AngularJS를 사용하여 새로운 Cordova 앱을 만드는 방법을 알려주는 튜토리얼을 많이 찾았습니다.

내 앵글이 있으면 어떻게 하지?JS 웹 앱이 활성화되어 있고 모바일 앱(Android/IOS)을 만들고 싶습니다.이것이 가능한가/가능한가/권장할 만한가?

그렇다면 이 작업을 문서화하고 있는 기존 리소스에 대해 조언하거나 지적해 주시겠습니까?

dmahapatro가 말했듯이 Angular를 얻으려면모바일용 JS 앱 패키징은 이온 프레임워크를 사용하는 것입니다.이 이행은 매우 간단합니다.Ionic은 UI Framework를 포함하지만, 앱이 크롬 프레임에서 실행되고 있기 때문에 웹 코딩은 전혀 필요하지 않습니다.ionic 명령줄 툴은 실제로 모든 기능을 수행합니다.

먼저 명령어를 사용하여 표준 ionic 앱을 회전시킵니다.ionic start APPNAME앱은 APPNAME/www 디렉토리에 넣기만 하면 됩니다.그런 다음 index.html을 편집하고 이 스크립트태그를 헤더에 추가합니다. <script src="cordova.js"></script>

모바일용 앱을 구축하기 위해 필요한 것은 이것뿐입니다.Android에서 테스트를 수행할 수 있습니다.ionic platform add androidAndroid에 대한 종속성을 설치한 후 실행하다ionic run android(드라이버가 설치되어 있거나 Genymotion과 같은 에뮬레이터가 실행되고 있는 안드로이드를 연결합니다).iOS용으로 구축하려면 Mac(ww...)이 필요하지만 그만큼 간단합니다.ionic platform add ios그리고 나서 달려라ionic run ios애플에서 테스트하기 위해서입니다만, 조금 더 셋업이 있다고 생각합니다.

Ionic의 지침 및 기타 유용한 유틸리티의 추가 이점을 얻으려면 다음과 같이 메인 이온 모듈에 종속성을 추가할 수 있습니다.ngCordova도 추가했습니다.디바이스 통합을 향상시키기 위해 ngCordova를 적극 추천합니다.

angular.module('APPNAME', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaSplashscreen) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.navigator && window.navigator.splashscreen) {
            window.plugins.orientationLock.unlock();
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
        if (window.cordova){
            // Hide Splash Screen when App is Loaded
            $cordovaSplashscreen.hide();
        }
    });
});

Angular를 이미 타셨기 때문에 대체로 준비가 되어 있습니다.JS: 이온의 백본(펀 의도)입니다.스타일링 등에 따라서는 디바이스 고유의 문제가 발생할 수 있지만 대부분의 경우 정상적으로 동작합니다.Ionic이나 AngularJs에 대해 더 많은 도움을 원하시면 언제든지 메시지를 주세요.감사합니다!^_^

팝콘245에서 언급한 단계를 따라 해보니 효과가 있었습니다.원래 Angular 프로젝트에서 bower 라이브러리를 사용하는 경우 패키지를 병합해야 합니다.새로운 이온 프로젝트와 함께 Angular 프로젝트의 json 및 bower.json 파일.따라서 bower 라이브러리는 www/lib 폴더 내에 설치됩니다(이것은 .bowerrc 파일에 나타나 있습니다).따라서 Angular 프로젝트의 index.html 및 app.js 파일에 리다이렉트 됩니다.이 정보가 당신에게 도움이 되길 바랍니다.도움이 필요하시면 언제든지 PM으로 연락주세요.안부 전합니다!

Popcolon245에서 설명한 절차에 따라 현재 동작하고 있는 Angular 1 프로젝트를 빌드하여 "dist" 폴더(root 디렉토리에도 "index.html" 파일이 포함되어 있어야 함)에서 "www" 폴더로 모든 파일을 복사한 후 "ionic serve"를 시도합니다.

elmerDeve가 준 솔루션을 사용해 보았지만 앱이 작동하지 않았습니다.어쨌든, 솔루션을 제공해 주신 elmerDeve에 감사드립니다.

언급URL : https://stackoverflow.com/questions/25961013/how-to-convert-an-existing-angular1-web-app-to-a-cordova-app