Question

我使用离子框架创建了一个应用程序，并希望让它在流星上运行。该应用程序构建在sidemenu模板之上，您可以创建绑定ionic start myApp sidemenu。

> git clone https://github.com/Xample/sidemenu-meteor
> cd sidemenu-meteor/
> meteor

怎么做？

Answer 1

创建两个项目：

离子启动离子项目侧菜单

meteor create meteorProject

重新组织文件：

离子框架内的所有重要文件都会进入www文件夹，开始重新组织它们以适应流星良好做法。

在meteor root文件夹中，创建客户端，服务器，css和公用文件夹
将ionicProject/www/css个文件复制到meteorProject/css
将所有js文件，主index.html和模板文件复制到meteorProject/client文件夹
所有其他只需要提供的文件（图片，音频，文档）必须放入meteorProject/public文件夹
ionicProject/www/lib将被流星包替换。不要包含它。
meteorProject/server文件夹将保持空白

现在我们需要确保meteor将app.js文件加载到另一个文件之前。

创建meteorProject/client/lib文件夹
将app.js文件移至该文件

您应该具有以下结构：

├── client
│   ├── controllers.js
│   ├── index.html
│   ├── lib
│   │   └── app.js
│   └── templates
│       ├── browse.html
│       ├── login.html
│       ├── menu.html
│       ├── playlist.html
│       ├── playlists.html
│       └── search.html
├── css
│   └── style.css
├── public
│   └── img
│       └── ionic.png
└── server

导入meteor包：

meteor add urigo:ionic

下面将包含其他依赖包：

  added mquandalle:bower at version 0.1.11    
  added urigo:ionic at version 0.0.6          
  added urigo:angular at version 0.4.8        
  added urigo:angular-ui-router at version 0.6.1
  added tinytest at version 1.0.3

bower包允许使用bower包管理器。基本上它是一个工具，允许使用描述文件轻松包含其他包（可能由角度使用但尚未打包为流星）你可能会用它来安装ngCordova。不需要这个sidemenu port btw
ionic对应于我们未从ionicProject/www/lib文件夹复制的所有文件。这些现在默认包含在您的流星项目中。
角度基本上与离子相同。 Angular现在也被包含在你的流星项目+角度流星＆＃39;这对于引导应用程序非常有用。
angular-ui-router同样的故事，但对于路由器。这将是处理网址并将其转发到正确页面的必填项。它有点像铁路由器，但角度方式兼容
默认添加tinytest，不需要端口

编辑和移植文件

<强>的index.html - 在流星上，标题和正文由框架解析并生成。简而言之，meteor包装了所有内容并为您生成脚本和样式文件。相反，如果你想通过标题/正文中的标记或标记包含css或js文件，它们将被流星解散。这就是我们使用包而不是自己添加脚本的原因。这就是说，index.html的大部分内容现在都是无用的，需要删除。即使是流星也不允许它，因为它也会为你生成....而且，身体中不允许任何属性。对于使用angularJS引导我们的项目，这可能会有问题。 html文件现在看起来像这样：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>sidemenu-meteor</title>
  </head>

  <body>
        <ion-nav-view></ion-nav-view>
  </body>

模板文件： 所有未加入.html，server或public文件夹的private文件都会被流星加载并打包成一个大的html。由于meteor将搜索并打包它将加载的所有.html，但不包括<template>标记内的所有meteorProject/client/templates。必须对<template>中的所有文件进行编辑并将其封装在带有name属性的<template name="browse.html"> ... browse html file content ... </template>标记中，以便我们以后可以轻松找到它。例如，模板browse.html将打包为：

Meteor.startup(function ()
{    
  angular.bootstrap(document, ['starter']);
});

对所有模板重复此步骤。

<强> app.js

打开文件并为angularJS添加手动引导程序，这样就可以在文档顶部手动添加ng-app标记。

[[

注意：一旦加载完所有内容就需要这样做，因此我们在Meteor.startup函数调用者中进行此操作。

添加＆＃39; angular-meteor＆＃39;打包到您的应用程序，这会将Angular分隔符更改为]]和{{，而不是与流星的句柄}}和angular.module('starter', ['angular-meteor','ionic', 'starter.controllers'])

templateUrl

将路由器的meteorProject/public路径网址引用替换为我们可以使用流星模板加载的内容。请记住，我们没有将模板存储到templateUrl:'someUrl'文件夹中，因此我们无法通过templateUrl: "templates/menu.html",加载它们，但您不建议

template:UiRouter.template('menu.html'),变为$ionicModal.fromTemplateUrl('templates/login.html', { 对状态提供程序中的所有状态重复此步骤。

<强> controller.js

只需替换模态的模板依赖项。从： $ionicModal.fromTemplateUrl('login.html', { 至 {{

这又是为了确保正确找到模板。请注意，由于某种原因，我们可以使用模板名称加载templateUrl。这对我来说仍然是一个谜，可能是一个流星包端口添加了这个糖...

playlists.html （但可能还有其他文件）

修改所有文件并将所有[[次出现的内容替换为}}和]]至<ion-item href="myPath"> 基本上在此示例中，您只需编辑playlists.html

最后一步 在这个阶段，你应该能够在流星下运行离子侧面菜单项目。只缺少一件事。您记得，我们更改了分隔符{{}} - ＆gt; [[]]。不幸的是，一些离子指令正在使用常规的{{}}分隔符并期望它们具有功能性。因此，在添加<a href={{$href()}}>时，这会被编译为类似<ion-item>的内容，所以...现在，如果单击菜单，则href将出错，您将不会被重定向到正确的页面...要解决此问题，解决方法是将<a href="myRef">嵌入您自己的<ion-item nav-clear menu-close href="#/app/search">标记中。我还在寻找更好的解决方案......仍然这样做，只需重构你所有的离子项目：

    <a href="/#/app/search">
    <ion-item nav-clear menu-close >
      Search
    </ion-item>
    </a>

被封装在

中

meteor deploy --debug your-project.meteor.com

<强>依赖关系

最后，meteor将尝试在部署期间缩小您的javascript，这样做可能会破坏角度代码，如果它不使用array notation。只需重构所有方法，将方法放入数组中。阅读指南以获取更多信息。另一种方法是避免meteor使用--debug > git clone https://github.com/Xample/sidemenu-meteor > cd sidemenu-meteor/ > meteor

缩小代码部署

要获得本教程：

{{1}}

将离子侧面项目移植到流星上

1 个答案: