如何將現有的Angular1網頁應用程序轉換爲Cordova應用程序？

我發現很多教程在互聯網上告訴你如何構建 a 新科爾多瓦應用程序與AngularJS，這很好。如何將現有的Angular1網頁應用程序轉換爲Cordova應用程序？

但是如果我有我的AngularJS的web應用程序活蹦亂跳的，我想從它使移動應用（Android/IOS）？這可能/可行/可取？

如果是，你可以給一些建議，或者點一些現有的資源記錄這個任務？

2014-09-21 MarcoS

[**離子框架**]（http://ionicframework.com/）（使用Angular和Cordova）可以滿足您的大部分要求。我現在已經使用了幾天，而且效果很好。 – dmahapatro 2014-09-21 15:58:03

是的，但*如何*？更多，我看到Ionic是在應用程序堆棧的UI塊中，而我的Web應用程序使用Bootstrap：如何將它們集成？ – MarcoS 2014-09-21 16:47:57

請將問題標題從angularjs更新爲angular1，因爲人們可能會混淆http://stackoverflow.com/questions/41781963/how-to-convert-an-existing-angularjs-2-web-app-to-a-cordova -app – ishandutta2007 2017-04-26 14:40:45

至於dmahapatro說讓包裝爲您的移動應用AngularJS你最好的辦法是使用離子型框架。這種遷移將非常簡單。 Ionic包含一個UI框架，但根本不需要，任何網頁編碼都可以工作，因爲您的應用只是在鉻框架中運行。離子命令行工具實際上完成了所有的魔法。

我會通過旋轉起來使用命令ionic start APPNAME基準離子應用程序啓動。然後，您可以將您的應用程序放入APPNAME/www目錄中。然後編輯你的index.html並在頭部添加這個腳本標籤。 <script src="cordova.js"></script>

這是真的需要讓你的應用程序專爲移動所有。您可以通過運行ionic platform add android來安裝Android的依賴關係，然後運行ionic run android（安裝驅動程序時是否安裝了驅動程序或運行如Genymotion的仿真程序）來測試Android。如果你想爲iOS構建，你將需要一個Mac（eww ...），但是它很容易ionic platform add ios，然後運行ionic run ios在Apple上進行測試，儘管我相信有更多的設置。

爲了得到離子的指示和其他有用的實用工具的額外好處，你可以依賴添加到您的主離子模塊像下面。注意我還添加了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(); 
     } 
    }); 
});

所有你幾乎設置，因爲你已經在AngularJS是離子的骨幹（雙關語意）所有。就樣式等而言，您可能會遇到設備特定的問題，但大多數情況下它應該可以正常工作。隨時隨時給我留言，如果你想要更多的幫助與Ionic或AngularJS。謝謝！^_^

來源

2015-05-08 14:43:09 Popcorn245

感謝您的回答！有點晚了，但可能我會參考它爲我的下一個項目...:-) – MarcoS 2015-07-11 08:22:06

@MarcoS對不起，我剛剛看到你被遺忘了，我覺得晚了，然後永遠不會。自從他們處於早期測試階段以來，我一直在使用Ionic，他們剛剛發佈了他們的第一個穩定版本，真的值得研究。下午我，如果你想談商店。謝謝！^_^ – Popcorn245 2015-07-24 21:58:45

我打算等待一個穩定的AngularJS 2.0（2015年9月〜10月，我想是）重新編寫我的應用程序，然後我會嘗試您的建議，當然...我如何下午你？ :-) – MarcoS 2015-07-25 08:44:24

我按照Popcorn245提到的步驟工作。需要注意的是，如果原始的Angular項目使用了bower庫，那麼您應該將Angular項目的package.json和bower.json文件與新的離子項目合併。今後，bower庫將被安裝在www/lib文件夾內（這在.bowerrc文件中指出），所以它應該被重定向到index.html和Angular項目的app.js文件中。我希望這些信息對您有所幫助。如果您需要幫助，請隨時通過PM與我聯繫。此致敬禮！

來源

2016-02-22 03:51:32 elmerDeVe

如何將現有的Angular1網頁應用程序轉換爲Cordova應用程序？

回答

相關問題