Ionic framework packaged for Meteor.
driftyco:ionic package with this pull reuqest - ionic-team/ionic-framework#3133
nm, forgot to check the readme
Hi，friend！
the situation is like this:
I have 3 pages,the first one is in ionic tabs,and the others are a normal page.
the router is 1—>2—>3
normally，I click page1 go to page2，click page2 go to page3，and I can see a back button at page2 and page3，and I can go back to page1 through the back button，right?
but,the fact situation is this:
I click page1,it linked to page2,the back button didnot show,and the tabs at the bottom is disappeared。when I was linked to page3,I can back to page2,if i click the back button of the browser，it will return to page3。
it switch at 2 and 3，i can never go back to 1。
how can I resolve this？
thank you！
Hi There,
I am trying to running the example but it's not working.
I am getting error like this, when creating a new project:
TypeError: undefined is not a function
at createProject (http://localhost:3000/ionic.js?02a9c004d9e8246990904d3f641cf7b8b5c1bbcd:20:25)
and this is the error detail:
$scope.Projects.add(newProject); <-- THIS IS UNDEFINED (add)
Please Help, Thanks :)
I'm not completely sure about the reason but with angular 1.3+ "Any class-based animation code that makes use of transitions and uses the setup CSS classes (such as class-add and class-remove) must now provide a empty transition value to ensure that its styling is applied right away" issue
angular/angular.js@1bebe36 more in the migration process here: https://docs.angularjs.org/guide/migration
Using Ionic framework with the latest angular-meteor release 1.3.1 gives me errors in the console:
TypeError: Cannot read property 'then' of undefined
at Object.ngIfWatchAction [as fn] (urigo_angular.js:23116)
at Scope.$digest (urigo_angular.js:13984)
at Scope.scopePrototype.$digest (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1468)
at Scope.$apply (urigo_angular.js:14246)
at Scope.scopePrototype.$apply (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1478)
at urigo_angular.js:15977
at completeOutstandingRequest (urigo_angular.js:4874)
at urigo_angular.js:5247
I'm not sure but I guess the ionic version 1.0.0 b13 release in september 2014 was before the 1.3+ changes to occurs… this error comes erratically while navigation from panel to another one, the back menu items is something displayed, sometimes overridden. I cannot try but I'm wondering if the nightlybuild of ionic would have this issue too.
As meteor adds fastclick per default (in meteor platform https://github.com/meteor/meteor/tree/devel/packages/fastclick) it breaks ionic as mentionned
http://ionicframework.com/docs/api/page/tap/
there is the class="needsclick" workaround but a better solution would be great.
Hi,
when I click the tab,it comes to be this!and errors in the chrome console!
thank you for help!
Hi
Can i run my app on android in windows like the ionic frameworks does?
The icons are not showing on ios, Meteor 0.9.4 and if I run the app in chrome it chrashes on adding a "to do" however the slide out bars do work
https://drive.google.com/file/d/0B3brHlnWtRpRQ2p0TloyNzItSnc/view?usp=sharing
Hi there , I'm new to meteor and I'm trying to build a system with mobile client and web client,both have completely different look and feel and requirements,
is there any way to add this magnificent package for cordova only ,and add say bootstrap or material design for the browser .
I know that I can download the code and change the package.js to add the files on cordova only but then I have to do it every time you guys push an update .
any Ideas
Thank you
I can't get ion-nav-view work with sidemenu with todo example.
do we need ng-app in body or div tag ?
maybe it's an meteor-angular-ui-router relate issue.
I'm trying to figure out how to make the meteorionic starter app more like ionic - normally the ion-nav-view goes into index.html and all other pages are inserted into index.html via the router. If I try to correct this in the sample, ionic does not initalize and none of my pages will show up (and of course, it fails silently). Here's a link to the meteorionic starter done up like the tutorial which works fine up until I swap out ui-view with ion-nav-view.
https://drive.google.com/file/d/0B9cUKQX6oSyGWFlPOVlNQjBMREU/view?usp=sharing
Some icons are rendering (ion-checkmark, ion-help, ion-compose) and some are not (ion-ios-list, ion-ios-paper), so I am wondering if this package includes all the icons from Ionicons?
If I have to include them myself could you please point me to some resources.
Thanks
meteor-angular uses Angular 1.4 but meteor-ionic uses previous version.
There appears bunch of exceptions if they are added together.
Can you approve this PR?
Ionic dependencies should be included and loaded directly.
I get the following error 👍
Error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'
http://errors.angularjs.org/1.3.15/ng/btstrpd?p0=document
at REGEX_STRING_REGEXP (http://localhost:3000/packages/angularjs_angular.js?1f09dae41340a3124486f5b9ec377493377ff002:93:14)
at doBootstrap (http://localhost:3000/packages/angularjs_angular.js?1f09dae41340a3124486f5b9ec377493377ff002:1463:15)
at Object.bootstrap (http://localhost:3000/packages/angularjs_angular.js?1f09dae41340a3124486f5b9ec377493377ff002:1503:14)
at HTMLDocument.onReady (eval at (http://localhost:3000/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), :12:13)
at jQuery.Callbacks.fire (http://localhost:3000/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:3176:30)
at Object.jQuery.Callbacks.self.add as done
at jQuery.fn.ready (http://localhost:3000/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:3456:25)
at eval (eval at (http://localhost:3000/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), :19:31)
at eval (eval at (http://localhost:3000/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:372:22), :187:3)
at eval (native)angular.js:11655 (anonymous function)angular.js:8596 $getangular.js:14787 $get.Scope.$broadcastangular-ui-router.js:3218 $state.transitionTo.$state.transition.resolved.then.$state.transitionangular.js:13248 processQueueangular.js:13264 (anonymous function)angular.js:14466 $get.Scope.$evalangular.js:14282 $get.Scope.$digestangular.js:14571 $get.Scope.$applyangular.js:9698 doneangular.js:9888 completeRequestangular.js:9829 requestLoaded
When using meteor-ionic and trying to play a local file from a mobile device i get an error "Not allowed to load local resource:"
the command i'm running in meteor CLI is
"meteor run android-device"
Same thing on ionic CLI ("ionic run android --device") works without meteor.
Here's are 2 repos of the project:
meteor-ionic (with the issue)
https://github.com/harellevy/meteor-ionic-ngcordova-camera-gallery
ionic (working)
https://github.com/harellevy/ionic-ngCordova-camera-video-picker
the flow to get to the problem:
I tried to port the ionic sideapp to meteor. Unfortunately I got the following error:
Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found!
As I don't know if the problem comes from the meteor-ionic package or simply from somewhere else, I opened a question on SO with the process to reproduce the issue, basically:
git clone https://github.com/Xample/sidemenu-meteor
cd sidemenu-meteor/
meteorDownload the example file at https://codeload.github.com/netanelgilad/meteor-ionic-example/zip/master
Then:
cd ~/Downloads/meteor-ionic-example-master
meteor update
meteor add-platform ios
meteor run iosThe app starts but gets stuck on the splash screen.
@Urigo as you mentioned at [https://github.com/ionic-team/ionic-framework/pull/3133] is there a blog post on how to integrate ionic + meteor + angular-meteor already?
Thanks
In a meteor project without angular, I'm getting this error in browser console.
Thanks for your work.
I am using the latest package (v0.3.0) and the template variables, such as [[post.title]] and [[post.description]], are treated as strings instead of the variable value.
My setup is using a tab view and below are the details:
Posts = new Mongo.Collection("posts");
angular.module('app', ['angular-meteor', 'ui.router', 'ionic'])
.controller('PostCtrl', ['$scope', '$meteorCollection', '$state', '$ionicModal',
function ($scope, $meteorCollection, $state, $ionicModal) {
$scope.Posts = $meteorCollection(Posts);
}])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('tabs', {
url: '/tab',
abstract: true,
views: {
main: {
templateUrl: 'tabs.html'
}
}
})
.state('tabs.feed', {
url: '/feed',
views: {
feed: {
templateUrl: 'feed.html',
controller: 'PostCtrl'
}
}
})
.state('tabs.help', {
url: '/help',
views: {
help: {
templateUrl: 'help.html'
}
}
})
}])
Here are the relevant templates (feed.html, tabs.html):
<template name="feed.html">
<ion-view title="Feed">
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-compose" ng-click="openNewPostModal()"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="post in Posts">
<h2>[[post.title]]</h2>
<p>[[post.description]]</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</template>
<template name="tabs.html">
<ion-tabs class="tabs-positive">
<ion-tab icon="ion-checkmark" ui-sref="tabs.feed">
<ion-nav-view name="feed"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-help" ui-sref="tabs.help">
<ion-nav-view name="help"></ion-nav-view>
</ion-tab>
</ion-tabs>
</template>
Looking at the Meteor-ionic-example, I notice that ng-include is being used with tpl files. Based on my setup, I cannot use ng-include and would prefer to define my template in the router.
I have tried the following with the necessary changes (curly braces instead of square, removed template name="..", renamed file to tpl), which did not work:
.state('tabs.feed', {
url: '/feed',
views: {
feed: {
templateUrl: '"feed.tpl"',
controller: 'PostCtrl'
}
}
})
Could you please provide me with any guidance on how I could update the app with the current tab setup.
Thanks
Error looks like
$ meteor add-platform ios
Error creating Cordova prject: Error running
/Users/mpuncel/.meteor/packages/meteor-tool/.1.1.3.1wysac9++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/tools/cordova-scripts/cordova.sh
App id contains a reserved word, or is not a valid identifier.
To reproduce:
$ meteor create 3xperiment
$ cd 3xperiment
$ meteor add urigo:ionic
$ meteor add-platform ios
Subsequent attempts fail because it thinks the platform is already added. meteor run ios fails with the original error
Thanks for your angular2-meteor package ! I want to try ionic 2 using the meteor CLI but I don't know how to resgiter ionic/ionic or get de definitions.
we were able to get this up and running in the browser, which is awesome.
I am confused as to how to emulate/build using this as an app on a mobile device. I am also new to Ionic so it's possible that I'm missing something really obvious.
Hi Urigo! Thanks for the awesome meteor-angular and meteor-ionic packages you've been working on!
One thing that would be great to do is support building a custom CSS file using the Sass version of Ionic CSS in meteor-ionic. This would be really powerful, as you could then override default Ionic SASS variables in one place to customise the theme of your app, without needing to target multiple ionic classes.
When just using Ionic, it is achieved like this:
myapp.scss
// override default ionic variables
$font-size-base: 10px !default;
$font-size-large: 14px !default;
$font-size-small: 11px !default;
$base-color: white !default;
$positive: #990099 !default;
// import ionic sass (any variables defined above will override the default ionic settings)
@import "www/lib/ionic/scss/ionic";
// import app css partials
@import 'layout';
@import 'brand';
Then we compile to a css file (myapp.css) using gulp or similar. In index.html, we include myapp.css (rather than the prebuilt css file in www/lib/ionic/...).
I would definitely be happy to do this and contribute, but would appreciate a bit of guidance to get me started! Would you be able to help me out please?
Many thanks,
Richard.
Hey @Urigo thanks for this awesome package! Finally we are able to use all the feature of ionic ;).
I'm facing an issue related with collection-repeat directive when there is a hot-code-push or when the data is sent 2 times in a row.(the second one I found out creating the reproduction)
These are the screenshots of the console errors on my app.
And here is the reproduction:
https://github.com/guilhermedecampo/collection-repeat-maximum-stack
Do you have any ideia in how fix this error?
Thanks!
I tried the updated example.
meteor create todo
cd todo
mrt add ionic
mrt add ngMeteor
then copy pasted the html and js code. The issue manifest when doing the following
create two new projects p1 and p2
click to select p1
create task for p1 say p1 task1
click to select p2 (p1 task1 will still be displayed)
this is actually an issue I am having using ionic and ngMeteor for a while now and have not been able to solve yet. It might not be ionic specific
package use:
urigo:angular
urigo:ionic
can't create $ionicModal
I'll try with script wrap
template(name='modal')
script(id="modal.html", type="text/ng-template")
,but all not work for me. no error msg from console.. help
When trying to add a project the modal comes up and it looks ionic....
But inside the createProject function the $scope.Projects.add fails
$scope.Projects has no 'add' method.
In the debugger it looks like:
$$collection: Mongo.Collection
length: 0
proto: Array[0]
I changed the 'add' to 'push' just for fun and got 'Maximum call stack size exceeded'
what am I missing?
When I am building the example into android apk file and install it in my Android device.
The page is not responsive and cannot run correctly.
Any Idea about this?
Thanks
@Urigo, as requested:
Please add to the README a note about using meteor-ionic, meteor-angular-ui-router, and angular-meteor.
Routes:
$stateProvider
.state('myState', {
url: '/mystate',
template: UiRouter.template('mystate.hmtl'),
controller: 'MyStateCtrl'
});Template:
<template name="mystate.html">
<ion-view tile="My State">
<ion-content class="has-header has-footer">
<form>
<input type="text" ng-model="myVar"/>
<button type="submit" ng-click="updateMyVar(myVar)">Update myVar</button>
</form>
[[ myVar ]]
</ion-content>
</ion-view>
</template>Controller:
angular.module("MyApp", ['angular-meteor', 'ui-router', 'ionic'])
.controller("MyStateCtrl", [ '$scope', function($scope) {
$scope.updateMyVar = function(value) {
console.log("Value: " + value);
$scope.myVar = "";
}
});You'll notice that the proper value will be logged to the console. However, the bound data in the template [[ myVar ]] is still the value you entered in the input[text]. And does not get reset back to "" as you defined it in the controller.
The issue is that <ion-content> directive uses it's own childScope (http://ionicframework.com/docs/api/directive/ionContent/). Therefore, the scope variable defined in ng-model is applied on the childScope, not the scope of your controller. Therefore, you must use $parent when defining a variable in ng-model in order to have the proper scoping!
New Template:
<template name="mystate.html">
<ion-view tile="My State">
<ion-content class="has-header has-footer">
<form>
<input type="text" ng-model="$parent.myVar"/>
<button type="submit" ng-click="updateMyVar($parent.myVar)">Update myVar</button>
</form>
[[ $parent.myVar ]]
</ion-content>
</ion-view>
</template>This will work as expected.
The problem is that I need to use double tap to activate any action. On Androyd everything is fine, what could be the reason? i'll try include
, :hover, :active, :focus
user-select: none
-webkit-user-select: none
this solution not work ;( anyone?
I have found out that the framework does not work properly. Especially the "collectionRepeat" Directive (http://ionicframework.com/docs/api/directive/collectionRepeat/) is not working correct anymore. Got a lot of flicker when i scoll up and down and I can't use smooth touch-scrolling anymore. I've created a repo https://github.com/ndevr/meteor-ionic-collection-repeat with the example of ionic's collection repeat demo where you can see the issues. I already forked "urigo:angular" to test it with angular 1.3.6 cause ionic using it in the bundle of the latest version (v1.0.0-beta-14) and your package is using 1.3.8. I'am not sure what is wrong but it looks like angular did some wrong calculations for positioning?! I really need the directive because of the performance problems with large lists.
I would be great to have an example/pattern on how to share an app published either to Galaxy/Meteor server or privately using Ionic View!
In my opinion those delimiters in ionic-angular.js should be replaced by [[ ]]
mbp:~ xample$ more /Users/xample/development/testProjects/myApp/www/lib/ionic/js/ionic-angular.js | grep "{{"
* {% raw %}<ion-item ng-repeat="i in items">{{i}}</ion-item>{% endraw %}
* {% raw %}Hello, {{i}}!{% endraw %}
* {% raw %}{{item}}{% endraw %}
* <img ng-src="{{image.src}}">
template: '<i class="icon {{icon()}} icon-refreshing"></i>',
'<a class="item-content" ng-href="{{$href()}}" target="{{$target()}}"></a>';
* Item {{item}}
* [ion-footer-bar]({{ page.versionHref }}/api/directive/ionFooterBar/) directive.
* {% raw %}Hello, {{item}}!{% endraw %}
* {% raw %}<img ng-src="{{item.img}}">
* <h2>{{item.title}}</h2>
* <p>{{item.description}}</p>{% endraw %}
* <i class="icon ion-arrow-left-c"></i>{% raw %}{{getPreviousTitle() || 'Back'}}{% endraw %}
'<i class="icon {{pullingIcon}}"></i>' +
'<i class="icon {{refreshingIcon}} icon-refreshing"></i>' +
'<span class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</span>' +
'<i class="icon {{getIconOn()}}" ng-if="getIconOn() && isTabActive()"></i>' +
'<i class="icon {{getIconOff()}}" ng-if="getIconOff() && !isTabActive()"></i>' +Hey great package! I am having trouble integrating ionic and creating a basic side bar menu with the newest meteor and packages:
index.html:
<body>
<div>
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
</div>
</body>
app.js
if (Meteor.isClient) {
var app = angular.module('todo', ['angular-meteor', 'ionic'], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
app.controller("TodoCtrl", ['$scope', '$collection', '$ionicSideMenuDelegate', function ($scope, $collection, $ionicSideMenuDelegate) {
$scope.toggleProjects = function () {
$ionicSideMenuDelegate.toggleLeft();
};
}]);
}
The result is this:
I created a meteor project and did meteor add urigo:ionic and added these lines into my html page:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.js"></script>
<script src="lib/ionic/js/ionic-angular.js"></script>I keep getting an error in the console reporting that the <!DOCTYPE html> shouldn't be there. Is there a way to have these require ionic js files to not have this as it isn't required in meteor.
Hey there
Really love ionic and would love to use it with meteorjs on the latest version.
How to use $ionicModal with meteor-ionic + ngMeteor
loneleeandroo/ngMeteor#9
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.