Let’s get familiar with the common Baasic tools and techniques and write an elementary “Hello World” sample application using Baasic AngularJS SDK and our built-in article feature.

Sign up for your Baasic account

Head over to Baasic registration form and fill in the required fields to create an account. You will receive an activation e-mail to confirm your registration. After confirmation, please navigate to your account dashboard.

Create your application

Baasic account dashboard allows you to manage all of your applications in one place. We already have plenty of information on how to use it, so if this is your first time using Baasic, you may want to check it out first. To create a new application, click on the Add a New App and enter the application name and administrator’s account information.

Write your Hello World articles

Navigate to the application dashboard, and use the compose article screen to add articles that we will retrieve from our sample AngularJS application.

AngularJS application

Create an AngularJS application by using the following code:

    angular.module('baasicArticleHelloWorld', [
        "baasic.api",
        "baasic.article"
    ])

Note that we will be using only Baasic AngularJS Core and Article SDK to build our application, so there are only two dependencies, baasic.api and baasic.article that we will need here.

Application configuration

In order to configure a Baasic application, we will need a baasicAppProvider injected in the AngularJS application configuration. To do that, use the following code and replace the “Article-Hello-World” with the unique identifier of your Baasic application:

   angular.module('baasicArticleHelloWorld').config(['baasicAppProvider',
        function (baasicAppProvider) {

            baasicAppProvider.create('Article-Hello-World', {
                apiRootUrl: 'api.baasic.com',
                apiVersion: 'beta'
            });

    }])

Hello World Controller

To fetch the articles we have inserted earlier using the dashboard, we will use a simple controller:

     angular.module('baasicArticleHelloWorld').controller('MainController', ['$scope', 'baasicArticleService',
        function($scope, articleService) {
            $scope.articles = [];

            var apiParams = {
                embed: "Tags",
                statuses: 'published'
            };
            articleService.find(apiParams)
                .success(function (collection) {
                    $scope.articles = collection.item;
                });
        }]);

We have requested a Tags embed, so Baasic will return tags embedded in all article objects. Additionally, we have specified that we want to retrieve only published articles. As always, due to the asynchronous nature of such requests, find method uses the standard promise pattern.

Hello World page

To actually display the articles to your users, we will use a simple HTML page. Create index.html and use the following markup to display the articles retrieved from the back-end:

<!DOCTYPE html>
<html ng-app="baasicArticleHelloWorld">
  <head>
    <meta charset="utf-8"/>
    <title>Baasic AngularJS Article Hello World</title>
  </head>
  <body>
    <h1>Baasic AngularJS Article Hello World</h1>
    <div ng-controller="MainController">
        <div ng-repeat="article in articles">
            <h2>{{article.title}}</h2>
            <p>{{article.content}}</p>
        </div>
        <div ng-show="articles.length === 0">
            <p>No articles in the application.</p>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://cdn.baasic.com/angularjs/baasic-javascript-framework-1.0.0.min.js"></script>
    <script src="http://cdn.baasic.com/angularjs/uritemplate-1.0.0.min.js"></script>
    <script src="http://cdn.baasic.com/angularjs/angular-hal-parser-1.0.0.js"></script>
    <script src="http://cdn.baasic.com/angularjs/baasic-angular-core-1.0.0.min.js"></script>
    <script src="http://cdn.baasic.com/angularjs/baasic-angular-article-1.0.0.min.js"></script>

    <script src="app.js"></script>
  </body>
</html>

You can use the Baasic CDN to serve all SDK files.

Demo and Source code

You can try the Demo or use source code on GitHub.

How to Run

Just open index.html file from the src folder.

Get in touch

Get in touch with us using one of our community channels:

Feel free to leave a comment

comments powered by Disqus