Clever Geek Handbook

How to create ionic applications using visual studio 2013 Community?

Is there a tutorial on creating ionic apps in visual studio ?

Has anyone used ionic templates in VS ? When I try to open this template, I get this error:

Ionic template not installing

This extension cannot be installed on any installed product.

If I download and install via VS 2013 Community templates (in the new projects dialog) I get this error after creating the project:

Issue after opening Ionic project

Could not find imported project (CordovaTools)

Question . How can I get those .targets files that VS cannot find?

+3


source to share


2 answers


This is because this template only supports Visual Studio 2015 RC, but you are using VS 12.0, which is VS2013.

[ Refresh ]

Note. The following content can be moved to the blog or somewhere in the future can be shared with other users.

Environment

Tools: Visual Studio 2013 Update 4+ Tools for Apache Cordova CTP 3.1

OS: Windows 8.1 pro

Subject . How to develop ionic exodus from a template at https://github.com/driftyco/ionic-starter-tabs in Visual Studio 2013

Step 1:

Created a new blank Cordova application in Visual Studio 2013.

File-> New-> Project-> JavaScript-> Apache Cordova Apps -> Blank App (named TestIonicTemplate).

Step 2:

Download the template from https://github.com/driftyco/ionic-starter-tabs Open the site http://code.ionicframework.com/# . We will use it later.



Step 3:

Suppose the template folder is ionic starter-contributor-master and the project is TestIonicTemplate. Then start combining things with your VS project.

  • Go to visual studio, add a new folder called templates under your project root folder.

  • Make the following copy: move all .js files from \ ionic-starter-tabs-master \ js \ to TestIonicTemplate \ scripts Move all html files from \ ionic-starter-tabs-master \ templates to TestIonicTemplate \ Templates

  • Go back to VS -> right click on the above folders -> add -> existing items. After adding these files, we have the following structure.

enter image description here

Step 4:

Modify the index.html of your VS project based on index.html in the template you downloaded as follows.

  • Add link to ionic.css and ionic.bundle.js. We can choose to use local copy or ionic CDN, you can get it all from http://code.ionicframework.com/# I already mentioned. I am using CDN here.
  • Remove link to index.js and add link to all .js we copied.
  • Copy the meta line from \ ionic-starter-tabs-master \ index.html
  • add 'ng-app = "starter" to the body and remove the default html element in the body.
  • Copy body content from \ ionic-starter-tabs-master \ index.html. We now have the 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">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>

    <!-- Cordova reference, this is added to your app when it 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>
Run codeHide result


And here is the result I saw in the sandglass:

enter image description here

+3


source


I don't quite understand your question, but you can use Visual Studio Code (VSC) to develop Ionic apps and another web project, it comes with angular plugins already.

If you mean that if VS can create Ionic Projects, I don't think it is possible. Create it via CMD / Terminal



  • npm install -g cordova ionic
  • myApp input tabs with iicic
  • cd myApp
  • ionic platform add ios (or android)
  • ionic build ios (or android)
  • ionic emulator ios (or android)

and then open it through your favorite IDE or text editor to start developing.

+2


source






More articles:


All Articles