将ionic sidemenu项目移植到meteor_Meteor_Ionic Framework

将ionic sidemenu项目移植到meteor

meteor ionic-framework

将ionic sidemenu项目移植到meteor,meteor,ionic-framework,Meteor,Ionic Framework,我做了一个应用程序使用离子框架，并希望使其运行在流星。该应用程序是在侧菜单模板的基础上构建的，您可以在侧菜单上创建它这是手术室如何操作？创建两个项目： meteor add urigo:ionic > git clone https://github.com/Xample/sidemenu-meteor > cd sidemenu-meteor/ > meteor ionic启动ionic项目侧菜单流星创建流星项目重新组织文件： meteor add urigo:

我做了一个应用程序使用离子框架，并希望使其运行在流星。该应用程序是在侧菜单模板的基础上构建的，您可以在侧菜单上创建它

这是手术室

如何操作？

创建两个项目：

meteor add urigo:ionic

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

ionic启动ionic项目侧菜单

流星创建流星项目

重新组织文件：

meteor add urigo:ionic

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

ionicframework中的所有重要文件进入

www

文件夹，开始重新组织它们，以符合meteor良好实践

在meteor根文件夹中，创建客户机、服务器、css和公用文件夹
将
```
ionicProject/www/css
```
文件复制到
```
项目/css
```
将所有js文件、main index.html和模板文件复制到
```
project/client
```
文件夹中
所有其他只需要提供的文件（图像、音频、文档）必须放入
```
项目/public
```
文件夹中
ionicProject/www/lib将被meteor软件包取代。不要包括在内
```
project/server
```
文件夹将保持为空

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

创建
```
project/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

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

该软件包将包括以下其他相关软件包：

  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软件包管理器。基本上，它是一个工具，可以使用一个描述文件（angular可能会使用它，但meteor还没有打包）轻松地包含其他包，您可能会使用它来安装ngCordova。顺便说一句，不需要这个侧菜单端口
ionic对应于我们没有从
```
ionicProject/www/lib
```
文件夹复制的所有文件。现在默认情况下，这些都包含在meteor项目中
角度基本上与离子的相同。Angular现在也包含在您的meteor项目中+Angular meteor，这将有助于引导应用程序
角度用户界面路由器相同的故事，但路由器。这将是处理url并将其转发到正确页面所必需的。它有点像铁制路由器，但棱角分明且兼容
tinytest是根据默认值添加的，不需要真正的端口

编辑并移植文件

index.html -在meteor上，头部和主体由框架解析并生成。简而言之，meteor会打包所有内容，并为您生成脚本和样式文件。相反，如果您只想通过标题/正文中的or标记包含css或js文件，meteor将不会考虑它们。这就是为什么我们使用包而不是自己添加脚本的原因。这就是说，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>

对所有模板重复此步骤

app.js

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

注意：您需要在加载所有内容后执行此操作，因此我们在Meteor.startup函数调用程序中执行此操作

将“angular meteor”包添加到应用程序中，这会将角度分隔符更改为
```
[[[
```
和
```
]
```
，而不是与meteor的把手冲突的常规分隔符
```
{{
```
和
```
}
```

替换路由器的
```
templateUrl
```
路径url引用，该url引用可与加载的meteor模板一起使用。请记住，我们没有将模板存储到
```
meteoproject/public
```
文件夹中，因此我们无法通过
```
templateUrl:'someUrl'
```
加载模板。您可以这样做，但我不建议这样做

templateUrl:“templates/menu.html”，

变成

template:UiRouter.template（'menu.html'），

对状态提供程序中的所有状态重复此步骤

controller.js

只需替换模式的模板依赖项。发件人：

$ionicModal.fromTemplateUrl（'templates/login.html'，{

到

$ionicModal.fromTemplateUrl（'login.html'，{

这也是为了确保正确找到模板。请注意，出于某种原因，我们已经能够使用模板名称加载templateUrl。这对我来说仍然是个谜，可能是meteor软件包端口添加了此糖

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

编辑所有文件并将所有出现的

替换为

[[

和

替换为

基本上，在本例中，您只需编辑playlists.html

最后一步 在这个阶段，您应该能够在meteor下运行ionic sidemenu项目。只缺少一件事。正如您所记得的，我们更改了分隔符{{}->[[]]。不幸的是，一些ionic指令正在使用常规的{{}}分隔符，并希望它们能够正常工作。因此，在添加

时，这会被编译为类似

的内容。因此…现在，如果单击菜单，href将出错，您将无法重定向到正确的页面…要解决此问题，一个解决方法是将

嵌入您自己的

标记中。我仍在寻找我ng寻求更好的解决方案……仍然要这样做，只需重构所有离子项目，以便：<

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

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