In order to create a hello world sample based on the Baasic article module you should follow the steps described below:
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 and follow the next step.
Account dashboard allows you to manage all of your Baasic applications in one place. To create new application click the Add a New App on the account dashboard and enter the application name and administrator's account information.
Navigate to the application dashboard https://dashboard.baasic.com/apps/your-api-key/ and use compose article (https://dashboard.baasic.com/apps/your-api-key/article/add) screen to add hello world article that we will use in the 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 the hello world application, so you may notice that there are two dependencies defined baasic.api and baasic.article that we need for this app.
In order to configure Baasic application we will need a baasicAppProvider injected in the AngularJS application configuration, to do that use the following:
angular.module('baasicArticleHelloWorld').config(['baasicAppProvider',
function (baasicAppProvider) {
baasicAppProvider.create('Article-Hello-World', {
apiRootUrl: 'api.baasic.com',
apiVersion: 'beta'
});
}])To fetch the hello world article that we have wrote using the Baasic article dashboard we will need simple controller that will fetch the articles from the Baasic back-end. To do that we will use the following code:
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;
});
}]);To actually display the articles from the back-end we need a mark-up and for this purpose we will use HTML5 with our AngularJS application. Create index.html and use the following mark-up to display the articles:
<!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>Dependencies for this applications, as mentioned earlier, are only Baasic AngularJS Core and Article SDK and you can use the Baasic CDN to serve the SDKs.
Full source code can be found on the GitHub. More information about the Demo can be found in the blog post here.
Well, you just need to open a index.html file from the src folder and thats it.
Get in touch using one of the community channels
GitHub: Baasic Google Groups: Baasic Support Twitter: @baasical
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent