Angular 1.5 components not working on iOS Simulator

ionic-v1
1

Hi guys! I’m working on an app using ionic 1.3 and angular 1.5.3 and everything is working fine. The point is that I am using Angular 1.5 components and they work perfectly on the browser but they do not load on the iOS Simulator.

Could you help me with that??

Thanks in advance :slight_smile:

1 Like
2

ok! Finally, I solved it. It was a problem with the route of the template because the compiled app reads starting from www/ (for those who have the same problem)
:wink:

1 Like
3

Derrick, any chance you could post sample code for how you got components working in Ionic? Are you using ui-router?

4

i’m really sorry… i never checked this again…

of course i do (though i think you wont need it haha)
I didn’t do anything special. Yes i’m using ui-router as a ionic project does by default, but i’m just using state on the config module (i’m not using ui-* directives on templates or anything like that)

var yourComponent = {
  bindings: {
   containerWidth: '<',
   currentProgress: '<',
   totalProgress: '<',
   classNames: '@'
  },
  templateUrl: 'templates/components/yourComponent.html',
  controller: [function(){
   function calculateWidth(containerWidth, currentProgress, totalProgress){
    //does some stuff...
   }
   this.width = calculateWidth(this.containerWidth, this.currentProgress, this.totalProgress);
   //do more stuff here ....
  }]
};

angular
  .module('yourModule')
  .component('yourComponent', yourComponent);

That was a simple js file for my component and then I had a template file with the html code of my component

<div style="height: 10px; border-radius: 4px; width: {{$ctrl.width+'px'}}" class="{{$ctrl.classNames}}" ng-style="{'width': $ctrl.width+'px'}"></div>

I hope this helps somebody :smiley:

see you!!

1 Like
5

Thanks for taking the time to update this! I’ll be using it.

1 Like
6

np!! I hope it is useful for you then :wink:

I forgot to mention that the component file must be required on the index.html file too