如何使用visual 2013社区创建离子型应用？

Question

有关于如何构建visual studio上的离子型应用程序的教程吗？

有人用过VS中的离子模板吗？当我试图打开这个模板时，我得到了以下错误：

​

​

此扩展名不能安装在任何当前安装的产品上。

如果我通过VS 2013社区模板(在新项目对话中)下载和安装，则在创建项目后会出现以下错误：

​

​

未找到导入(CordovaTools)项目

问题：，我怎么能在这里得到那些VS找不到的.targets文件？

Answer 1

这是因为这个模板现在只支持VisualStudio2015RC，但是您使用的是VS 12.0，即VS2013。

更新

注意:下面的内容可能会被移到一个博客，或者将来在其他地方可以共享。

环境

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

操作系统: Windows 8.1 pro

主题：如何从Visual 2013中的https://github.com/driftyco/ionic-starter-tabs模板开始开发离子

步骤1：

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

文件-> New->Project->JavaScript->Apache应用程序-> Blank应用程序(命名为TestIonicTemplate)。

第2步：

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

第3步：

假设模板文件夹是离子启动选项卡主文件夹，而项目是TestIonicTemplate。然后开始将事情合并到VS项目中。

1. 转到visual studio，在根项目文件夹下添加名为模板的新文件夹。
2. 做下面的复制-过去:将所有.js文件从\离子-启动-选项卡-主\js\移到TestIonicTemplate\脚本将所有html文件从\离子型启动-主\模板移动到TestIonicTemplate\模板
3. 回到VS ->，右键单击上面提到的文件夹-> add->现有项。添加这些文件后，我们有以下结构。

​

​

第4步：

根据我们下载的模板中的index.html对VS项目的index.html进行以下修改。

1. 添加对ionic.css和ionic.bundle.js的引用我们可以选择使用本地复制或离子CDN，您可以从我前面提到的http://code.ionicframework.com/#获得所有这些。我这里用CDN。
2. 删除对index.js的引用，并添加对我们复制的所有.js的引用。
3. 从离子启动程序-制表符-主\index.html复制元行
4. 在正文中添加‘ng-app=“初学者’，并删除正文中的默认html元素。
5. 现在我们有了以下index.html代码:将正文内容从\master\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>

​

这就是我在波纹中看到的结果：

​

​

Answer 2

我不太明白您的问题，但您可以使用Visual (VSC)开发Ionic应用程序和其他与web相关的项目，它已经附带了角插件。

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

• npm安装-g cordova离子
• 离子启动myApp标签
• cd myApp
• 离子平台添加ios (或android)
• 离子构建ios (或android)
• 离子模拟ios (或android)

然后通过您最喜欢的IDE或文本编辑器打开它，以便开始开发。