Reputation: 21359

Porting ionic sidemenu project to meteor

I made an app using the ionic framework and would like to make it run on meteor. The App is build on top of the sidemenu template you can create tying ionic start myApp sidemenu.

Here is the Git of the port or just

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

How to do so ?

Upvotes: 1

Answers (1)

Flavien Volken

Reputation: 21359

Create both projects:

ionic start ionicProject sidemenu

meteor create meteorProject

Reorganise the files:

All the important files within a ionicframework comes into a www folder start to reorganise them to fit with the meteor good practices.

In the meteor root folder, create a client, server, css, and public folder
Copy the ionicProject/www/css files into the meteorProject/css
Copy all the js files, the main index.html and the templates files into the meteorProject/client folder
All the other files which only needs to be served (images, audio, documents) must be put into the meteorProject/public folder
The ionicProject/www/lib will be replaced by a meteor package. Do not include it.
The meteorProject/server folder will remain empty

Now we need to ensure meteor will load the app.js file before the other one.

Create the meteorProject/client/lib folder
Move the app.js file into that one

You should have the following structure:

├── 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

Import the meteor packages:

meteor add urigo:ionic

That one will include other dependent packages below:

  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 package allows to use the bower package manager. Well basically it is a tool to allow easily include other packages using a description file (which might be used by angular but not packaged for meteor yet) you will likely be using it for installing ngCordova. No need for this sidemenu port btw
ionic correspond to all the files we did not copied from the ionicProject/www/lib folder. Those are now included by default into your meteor project.
angular is basically the same as for ionic. Angular is now included into your meteor project as well + the 'angular-meteor' which will be useful for bootstrapping the app.
angular-ui-router same story but for the router. This will be mandatory to handle the url and forward them to the right page. It's a little bit like the Iron router but angular way and compatible
tinytest is added per default, no real need for the port

Edit and port the files

index.html - On meteor the header and the body are parsed and generated back by the framework. In short, meteor packs everything and generate the script and style files for you. Conversely if you wanted to just include a css or a js file through a or tag within the header / body, they will be dismissed by meteor. This is the reason why we are using packages instead of adding our script by ourselves. This to say, that most of the content of the index.html is now useless and needs to be removed. Even the is not allowed by meteor because it will generate it for you as well…. Moreover, no attributes are allowed in the body. This might be problematic for bootstrapping our project with angularJS. The html files looks like this now:

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

The templates files: All the .html files not being into the server, public or private folder are loaded and packed into one big html by meteor. As meteor will search for and pack all the .html it will load but not include all the one within a <template> tag. All the files into the meteorProject/client/templates must be edited and encapsulated within a <template> tag bearing the name attribute such that we can easily find it back later on. For example the template browse.html will be packed such as:

<template name="browse.html">  
... browse html file content ...
</template>

Repeat this step for all the templates.

app.js

Open the file and add the manual bootstrap for angularJS, in this manner you manually add the ng-app tag on top of the document.

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

Note: You need to do it once everything is loaded, for this reason we are doing it within the Meteor.startup function caller.

Add the 'angular-meteor' package to your application, this will change the Angular delimiters to [[ and ]] instead of the regular conflicting with meteor's handlebars {{ and }}

angular.module('starter', ['angular-meteor','ionic', 'starter.controllers'])

Replace the router's templateUrl path url references to something we can use with the loaded by meteor templates. Remember, we are not storing the templates into the meteorProject/public folder, therefore we cannot load them through templateUrl:'someUrl' you might do it but I do not recommend

templateUrl: "templates/menu.html", becomes template:UiRouter.template('menu.html'), Repeat this step for all the states in the state provider.

controller.js

just replace the template dependency of the modal. From: $ionicModal.fromTemplateUrl('templates/login.html', { to $ionicModal.fromTemplateUrl('login.html', {

This is again to ensure the template is found correctly. Note that for some reason we have been able to load the templateUrl using the template name. It's still a mystery to me, probably a meteor package port have added this sugar…

playlists.html (but possibly other files)

Edit all the files and replace all the {{ occurrences to [[ and }} to ]] Basically in this example you will only have to edit playlists.html

Last step At this stage you should be able to run the ionic sidemenu project under meteor. There is only one thing missing. As you can remember, we changed the delimiters {{}} -> [[]]. Unfortunately, some of the ionic directives are using the regular {{}} delimiters and expect them to be functional. Therefore while adding a <ion-item href="myPath"> this is compiled to something like <a href={{$href()}}> so… now if you click on a menu, the href will be wrong and you will not be redirected to the right page… To fix this, a workaround is to embed the <ion-item> within your own <a href="myRef"> tag. I'm still looking for a better solution…. Still to do so, just refactor all your ion-item such that:

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

becomes encapsulated in

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

Dependencies

Last thing, meteor will try to minify your javascript during the deployment, doing so you might break the angular code if it is not using the array notation. Just refactor all your methods putting your methods into an array. Read the guide for more information. An alternative is to avoid meteor to minify the code deploying using --debug meteor deploy --debug your-project.meteor.com

To get this tutorial:

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

Upvotes: 2

Porting ionic sidemenu project to meteor

Answers (1)

Related Questions