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:

ionic template not installing

this extension not installable on of installed products.

if download , install through vs 2013 community templates (in new project dialogue) error after creating project:

issue after opening ionic 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.

  1. go visual studio, add new folder named templates under root project folder.

  2. do following copy-past: move .js files \ionic-starter-tabs-master\js\ testionictemplate\scripts move html files \ionic-starter-tabs-master\templates testionictemplate\templates

  3. go vs -> right click on folders mentioned above -> add->existing items. after add these files, have following structure.

enter image description here

step 4:

do following modification index.html of vs project based on index.html in template downloaded.

  1. 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.
  2. remove reference index.js , add reference .js copied.
  3. copy meta line \ionic-starter-tabs-master\index.html
  4. add 'ng-app="starter"' in body , remove default html element in body.
  5. 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:

enter image description here


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -