How to create ionic apps using visual studio 2013 Community?

问题

Is there a tutorial on how to build ionic apps on visual studio?

Have anyone used ionic templates in VS? When I try to open this template, I'm getting this error:

This extension is not installable on any of the currently installed products.

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

The imported (CordovaTools) project was not found

Question: How can I get those .targets files here which could not be found by VS?

回答1:

It's because this template only support Visual Studio 2015 RC now but you are using VS 12.0 which is VS2013.

[Update]

Note: The following content may be moved to a blog or somewhere can be shared to others in the future.

Environment:

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

OS: Windows 8.1 pro

Topic: How to develop ionic starting from a template on https://github.com/driftyco/ionic-starter-tabs in Visual Studio 2013

Step 1:

Created a new blank Cordova App 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:

Let’s say the template folder is ionic-starter-tabs-master, and the project is TestIonicTemplate. Then start to merge things to the VS project.

Go to visual studio, add a new folder named templates under the root project folder.
Do the following copy-past: 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 folders mentioned above -> add->existing items. After add these files, we have the following structure.

Step 4:

Do the following modification to the index.html of VS project based on the index.html in the template we downloaded.

Add reference to ionic.css and ionic.bundle.js We can choose using local copy or ionic CDN, you can get all of these from http://code.ionicframework.com/# I mentioned before. I use CDN here.
Remove the reference to index.js and add reference to all .js we copied.
Copy the meta line from \ionic-starter-tabs-master\index.html
add 'ng-app="starter"' in the body and remove the default html element in body.
Copy the body content from \ionic-starter-tabs-master\index.html Now we 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'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 is the result I saw in ripple:

回答2:

I dont' quite understand your question, but you can use Visual Studio Code (VSC) for the development of Ionic apps and other web related project, it already comes with angular plugins.

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

npm install -g cordova ionic
ionic start myApp tabs
cd myApp
ionic platform add ios (or android)
ionic build ios (or android)
ionic emulate ios (or android)

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

来源：https://stackoverflow.com/questions/30925967/how-to-create-ionic-apps-using-visual-studio-2013-community

标签

visual-studio

templates

ionic-framework

visual-studio-cordova