Question

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

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

Ionic template not installing

此扩展程序无法安装在任何当前安装的产品上。

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

Issue after opening Ionic project

未找到导入的（CordovaTools）项目

问题：如何在VS中找到 .targets 文件？

Answer 1

这是因为此模板现在仅支持Visual Studio 2015 RC，但您使用的是VS 12.0 VS2013。

[<强>更新

注意：以下内容可能会移到博客或某个地方，以后可以与他人分享。

<强>环境：

工具：用于Apache Cordova CTP 3.1的Visual Studio 2013 Update 4 +工具

操作系统：Windows 8.1专业版

主题：如何在Visual Studio 2013中https://github.com/driftyco/ionic-starter-tabs上的模板开发离子启动

第1步：

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

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

第2步：

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

第3步：

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

转到visual studio，在其下添加一个名为templates的新文件夹根项目文件夹。
执行以下copy-past：从中移动所有.js文件 \ ionic-starter-tabs-master \ js \ to TestIonicTemplate \ scripts全部移动来自\ ionic-starter-tabs-master \ templates的html文件 TestIonicTemplate \模板
返回VS - ＆gt;右键单击上面提到的文件夹 - ＆gt; 添加 - >现有项目。添加这些文件后，我们有以下内容结构

enter image description here

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

这是我在涟漪中看到的结果：

enter image description here

Answer 2

我不会＆＃39;非常了解你的问题，但是你可以使用Visual Studio Code（VSC）来开发Ionic应用程序和其他与web相关的项目，它已经附带了角度插件。

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

创建它

npm install -g cordova ionic
离子启动myApp标签
cd myApp
离子平台添加ios（或android）
ionic build ios（或android）
离子模拟ios（或android）

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

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

2 个答案: