in my (monaca /onsen UI angularjs ) application I want to load my projects when the project is start
<script>
ons.bootstrap()
.controller('AppController', function() {
this.pushes = 0;
this.pops = 0;
this.details = 0;
this.showDetails = function(){
if (this.details == 1)
this.details = 0;
else
this.details = 1;
}
this.getProjects = function(){
console.log('getData');
$http.get("http://localhost:3000/api/getAllProject")
.then(function(response) {
this.projects = response.data;
console.log('Projects: '+this.projects)
});
}
});
</script>
and this is the html page
<body ng-controller="AppController as app">
<ons-sliding-menu
menu-page="menu.html" main-page="home.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="home.html">
<ons-navigator var="myNav">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Projects</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="refresh" size="30px" fixed-width="true"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item ng-click="app.showDetails()" ng-repeat="item in app.projects">
{{item.projectcode}}
</ons-list-item>
<div ng-show="app.details==1">
<p ng-click="myNav.pushPage('level1.html')"> Levels </p>
</div>
</ons-list>
</ons-page>
</ons-navigator>
</ons-template>
as you can see I need to call the function getProjects() from the AppController when the application start so I can get the projects from DB to display it
There are 3 easy ways to achieve what you want. The differences are minor, but it's best to know them.
using the
ons-page'sons-initattributeThis will load the data when the page is initialized (becomes attached to the DOM).
using the
ons-page'sons-showattributeThis will load the data when the page is shown (for example if you are switching between many pages). This means that if you go to another page with the navigator and then go back it will be called again (that way refreshing the projects).
using the
ons.readyfunction. If you want to call the function only once after onsen is ready to do its magic ui stuff you can use this. It makes sure thatDOMContentReady,devicereadyand some other events have been triggered and then calls your function. Usage:Note: it takes a function - that means that you shouldn't actually call it yourself - it should be like this
ons.ready(myFunction), NOTons.ready(myFunction()).Feel free to choose the method which you think is most relevant for your case.
Some final notes:
The attribute is
swipeable- you missed thee. Your example works because it's swipeable by default.I don't see you having
$httpas a dependency. Unless you have it from somewhere else you should do: