AngularJS Test Blog Part I

AngularJS is a pretty cool javascript framework I am currently working with. So I decided to write some little tutorials on how to use it and this is the first part of it. The result will be something very simple but similar to a blog.

One blog entry shall consist of title, author, date, tag and the text content itself.

At first it’s needed to download AngularJS 1 here.

index.html

This will be the template to display all the data. Notice the modifications at the html and the body tag for angular purposes.

<html ng-app="webapp.main">
  <head>
    <title>Angular Test Blog</title>
    <script src="angular.min.js"></script>
    <script src="controller.js"></script>
    
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body ng-controller="MainController as mainController">
    <div class="title-container">
      <h1>{{title}}</h1>
    </div>
    <div class="main-container">
      <div class="post-container">
      </div>
    </div>
  </body>
</html>

 controller.js

Here the angular app and our main controller will be defined. The main functionality will be added later.

var app = angular.module('webapp.main', []);
app.controller('MainController', MainController);

function MainController($scope) {
  $scope.title = "Angular Test Blog"

};

Now if you open the site you should see the h1 title of the page „Angular Test Blog“.

<h1>{{title}}</h1>

The above html with the double brackets got replaced by the text defined in controller.js by

$scope.title = "Angular Test Blog";

This is how basically $scope works. Data appended to the scope is only accessible inside the controler it’s defined in. To define global variables accessible in all controlers you could use $rootScope. Both $scope and $rootScope bindings are updated frequently at the end of any JavaScript code turn. You can also force them to update their bindings with the $apply() method, but be aware this could cause in runtime failures.

The next step should be to retrieve the data to be displayed. In this case there will be an array several objects in it holding the post data we want. The MainController in should now look like this.

function MainController($scope) {
  $scope.title = "Angular Test Blog"
  var postContentString = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,'
    +'sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,'
    +'sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.'
    +'Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
    +'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor'
    +'invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et'
    +'accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata'
    +'sanctus est Lorem ipsum dolor sit amet.';	
  
  $scope.posts = [
      {postTitle:"Super Fancy Post Title #1", hiddenTags: "All C#", postTag: "C#", postAuthor: "John Doe", postDate: "Nov 11 2016", postContent: postContentString},
    {postTitle:"Another Fancy Post Title", hiddenTags: "All Java",  postTag: "Java", postAuthor: "Janine Doe", postDate: "Nov 12 2016", postContent: postContentString},
    {postTitle:"Fancy Post Title Again", hiddenTags: "All JS", postTag: "JS", postAuthor: "Jannice Doe", postDate: "Nov 13 2016", postContent: postContentString},
    {postTitle:"Last Fancy Post Title #4", hiddenTags: "All CSS", postTag: "CSS", postAuthor: "Jenkins Doe", postDate: "Nov 14 2016", postContent: postContentString}
    ]
};

The „hiddenTags“ property will be used later for search and sort options. The next step will be to modify the html template for our purposes. It should now look like this.

<html ng-app="webapp.main">
  <head>
    <title>Angular Test Blog</title>
    <script src="angular.min.js"></script>
    <script src="controller.js"></script>
    
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body ng-controller="MainController as mainController">
    <div class="title-container">
      <h1>{{title}}</h1>
    </div>
    <div class="main-container">
      <div class="post-container" ng-repeat="p in posts">
        <h2>{{p.postTitle}}</h2>
        <h5>author: {{p.postAuthor}} | date: {{p.postDate}} | Tag: {{p.postTag}} </h5>
        <p>{{p.postContent}}</p>
      </div>
    </div>
  </body>
</html>

The above code uses the ng-repeat attribute to dynamically display the content. Its very similar to a simple foreach loop. The cool thing about this is that if we dynamically add a new post it will be displayed immediately.

style.css

body{
  background-color: #efefef;
}
.title-container{
  margin: 0 auto;
  margin-top: 20px; 
  width: 50%;
}
.main-container{
  margin: 0 auto;
  margin-top: 20px;
  width: 50%;
}

.post-container{
  padding-top: 20px;
    margin-top: 20px;
    background-color: white;
    border-bottom: 7px solid lightblue;
    box-shadow: 4px 2px 12px #888888;
}

.post-container > h2{
  text-align: center;
  margin-bottom: 3px;
}

.post-container > h5{
  text-align: center;
  font-size: 11px;
  margin: 0 auto;
}

.post-container > p{
  padding: 20px;
}

When the style.css is properly attached it’s time to see the results of the work so far. The browser should now render something like this:

screen01

Now there shall be a search bar and dropdown to select through the categories/tags of the post. To do so a few lines have to be added in our template. Angular got a inbuilt filter tool that we will make use of.

index.html

<html ng-app="webapp.main">
  <head>
    <title>Angular Test Blog</title>
    <script src="angular.min.js"></script>
    <script src="controller.js"></script>
    
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body ng-controller="MainController as mainController">
    <div class="title-container">
      <h1>{{title}}</h1>
      <p>
        <input type="text" ng-model="search.postTitle" placeholder ="Search.."></input>
        <select ng-model="search.hiddenTags">
          <option>All</option>
          <option ng-repeat="p in posts" value="{{p.postTag}}">{{p.postTag}}</option>
        </select>
      </p>
    </div>
    <div class="main-container">
      <div class="post-container" ng-repeat="p in posts | filter:search">
        <h2>{{p.postTitle}}</h2>
        <h5>author: {{p.postAuthor}} | date: {{p.postDate}} | Tag: {{p.postTag}} </h5>
        <p>{{p.postContent}}</p>
      </div>
    </div>
  </body>
</html>

The search bar is a simple text input element binded with the ng-model attribute to search.postTitle, so in the filter only the postTitle will be filtered by user input. The dropdown menu is binded per ng-model to search.hiddenTags. Next to the „All“ option the other options are rendered by ng-repeat again.

Now the page should look like this.

screen02

Thats it. We produced a dynamic blog template with simple AngularJS. You can download the whole project from my dropbox here.

There will be more little tutorial about Angular soon. I plan on showing how to get the data from external sources via Ajax and promise and on make a quick tutorial on angular datatables.

 

One Comment, RSS

  1. Pascal 22. Mai 2017 @ 14:11

    Nicer blog 😉

Comments are closed.