templates - How to create ionic apps using visual studio 2013 Community? -
is there tutorial on how build ionic apps on visual studio?
have used ionic templates in vs? when try open template, i'm getting error:
this extension not installable on of installed products.
if download , install through vs 2013 community templates (in new project dialogue) error after creating project:
the imported (cordovatools) project not found
question: how can .targets files here not found vs?
it's because template support visual studio 2015 rc using vs 12.0 vs2013.
[update]
note: following content may moved blog or somewhere can shared others in future.
environment:
tools: visual studio 2013 update 4 + tools apache cordova ctp 3.1
os: windows 8.1 pro
topic: how develop ionic starting template on https://github.com/driftyco/ionic-starter-tabs in visual studio 2013
step 1:
created new blank cordova app in visual studio 2013.
file->new->project->javascript->apache cordova apps -> blank app (named testionictemplate).
step 2:
download template https://github.com/driftyco/ionic-starter-tabs open site http://code.ionicframework.com/# . use later.
step 3:
let’s template folder ionic-starter-tabs-master, , project testionictemplate. start merge things vs project.
go visual studio, add new folder named templates under root project folder.
do following copy-past: move .js files \ionic-starter-tabs-master\js\ testionictemplate\scripts move html files \ionic-starter-tabs-master\templates testionictemplate\templates
go vs -> right click on folders mentioned above -> add->existing items. after add these files, have following structure.
step 4:
do following modification index.html of vs project based on index.html in template downloaded.
- add reference ionic.css , ionic.bundle.js can choose using local copy or ionic cdn, can of these http://code.ionicframework.com/# mentioned before. use cdn here.
- remove reference index.js , add reference .js copied.
- copy meta line \ionic-starter-tabs-master\index.html
- add 'ng-app="starter"' in body , remove default html element in body.
- copy body content \ionic-starter-tabs-master\index.html have following index.html code:
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>testionictemplate</title> <!-- testionictemplate references --> <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet"> <link href="css/index.css" rel="stylesheet" /> <!-- ionic/angularjs js --> <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> </head> <body ng-app="starter"> <!-- nav bar updated navigate between views. --> <ion-nav-bar class="bar-stable"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <!-- views rendered in <ion-nav-view> directive below templates in /templates folder (but have templates inline in html file if you'd like). --> <ion-nav-view></ion-nav-view> <!-- cordova reference, added app when it's built. --> <script src="cordova.js"></script> <script src="scripts/platformoverrides.js"></script> <script src="scripts/app.js"></script> <script src="scripts/controllers.js"></script> <script src="scripts/services.js"></script> </body> </html>
and here result saw in ripple:
Comments
Post a Comment