Client-side: Bind your data in your web app via AngularJS
Wakanda’s client connector Angular-Wakanda provides a full integration of backend project to frontend.
Let’s see how you can display the superheroes you generated in the built-in database to your web frontend.
1 - Access the AngularJS module’s controller
As you can see in web/index.html
, our blank template Angular1 application is contained in an AngularJS module called “Starter”.
<!DOCTYPE html>
<html class="no-js" ng-app="Starter">
</html>
This “Starter” module, is discribed in web/app/app.js
. Our Wakanda’s client connector is injected there.
angular.module('Starter', ['wakanda'])
Its controllers are in the folder web/app/controllers
.
- Open its existing controller file
web/app/controllers/home.js
. That’s where we’re going to access the datastore.
A controller HomeController
is already created in the template.
$wakandaManager is a service provided by Wakanda. We’re going to use it to access the datastore ds. (it’s similar to the $http angular service)
2 - Access the data
In the controller under ,console.log('Angular-Wakanda is ready!');
add the following code :
ds.Superhero.$query({orderBy:"ID desc",pageSize:3}).$promise.then(function(response) {
$scope.favoriteSuperheroes = response.result;
});
Here $query() is an Angular-Wakanda method for querying all the Superhero entities saved in the datastore.
Here I used it to retrieve only the last 3 superheroes created through a promise.
$scope.favoriteSuperheores = reponse.result
create a variable favoriteSupereroes
in the app controller , and bind the server’s response to it. More info on $scope here
3 - Display the data in your front
Open web/index.html
and add the following code into the body to display the list
<div class="container" ng-controller="HomeController" >
<p ng-repeat= "superhero in favoriteSuperheroes">Hello {{superhero.name}} !</p>
</div>