如何使用 visual studio 2013 社区创建离子应用程序？

Question

是否有关于如何构建的教程ionic apps on visual studio？

有人用过ionic templates in VS吗？当我尝试打开此模板时，出现此错误：

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

如果我通过 VS 2013 Community 模板 下载并安装 （在新项目对话中），我在创建项目后收到此错误：

The imported (CordovaTools) project was not found

问题：我怎样才能得到VS找不到的.targets文件？

Answer 1

我不太明白你的问题，但你可以使用 Visual Studio 代码 (VSC) 开发 Ionic 应用程序和其他与网络相关的项目，它已经带有 angular 插件。

如果你的意思是如果 VS 可以创建 Ionic 项目，我认为那是不可能的。通过 CMD/Terminal

创建

npm 安装-g cordova ionic
ionic 启动 myApp 选项卡
cd myApp
离子平台添加ios（或android）
离子构建 ios（或 android）
ionic 模拟 ios（或 android）

然后通过你喜欢的IDE或文本编辑器打开它开始开发。

Answer 2

因为这个模板现在只支持Visual Studio 2015 RC，但是你使用的是VS 12.0，也就是VS2013。

[更新]

注意：以下内容以后可能会移至博客或某处分享给其他人。

环境:

工具：Visual Studio 2013 更新 4 + Apache Cordova CTP 3.1 工具

OS: Windows 8.1 专业版

主题：如何在 Visual Studio 2013

中从 https://github.com/driftyco/ionic-starter-tabs 上的模板开始开发离子

第 1 步：

在 Visual Studio 2013 年创建了一个新的空白 Cordova 应用程序。

文件->新建->项目->JavaScript->Apache Cordova 应用程序-> 空白应用程序（名为 TestIonicTemplate）。

第 2 步：

从 https://github.com/driftyco/ionic-starter-tabs 下载模板打开网站 http://code.ionicframework.com/#。我们稍后会用到它。

第 3 步：

假设模板文件夹是ionic-starter-tabs-master，项目是TestIonicTemplate。然后开始合并东西到VS项目中。

转到visual studio，在下面添加一个名为templates的新文件夹根项目文件夹。
执行以下复制粘贴操作：将所有 .js 文件从 \ionic-starter-tabs-master\js\ to TestIonicTemplate\scripts 全部移动 html 个文件，从 \ionic-starter-tabs-master\templates 到 TestIonicTemplate\templates
回到VS -> 右击上面提到的文件夹 -> 添加->现有项目。添加这些文件后，我们有以下内容结构.

第 4 步：

根据我们下载的模板中的index.html对VS工程的index.html进行如下修改。

添加对ionic.css和ionic.bundle.js的引用我们可以选择使用本地副本或离子 CDN，您可以从 http://code.ionicframework.com/# 我之前提到过。我这里用CDN。
删除对 index.js 的引用并添加对我们所有 .js 的引用已复制。
从 \ionic-starter-tabs-master\index 复制元行。html
在正文中添加'ng-app="starter"'并删除默认的html 正文中的元素。
从\ionic-starter-tabs-master\index复制正文内容。html现在我们有以下 index.html 代码：

<!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>

这是我在 ripple 中看到的结果：

如何使用 visual studio 2013 社区创建离子应用程序？

How to create ionic apps using visual studio 2013 Community?

templates

visual-studio

ionic-framework

visual-studio-cordova