Tuesday 27 February 2018

AngularJS Hello World Example

Background

AngularJS is a client-side javascript framework developed by Google which can interact with HTML. It helps to easily create and maintain SPA (Single page applications)

Some of its features are -
  1. Helps create responsive applications
  2. Provides MVC capabilities
  3. Dependency injection
  4. Powerful and flexible with less code to write
NOTE: AngularJS is a very old framework. The first version is called AngularJS. Later versions are just called angular. You can see the detailed release history - https://github.com/angular/angular.js/releases. This post will try to explain a simple Hello World program in Angular JS. This is mainly for projects that are already on it. If you are starting a new project I would highly recommend to go with later angular versions. You can visit https://angular.io/  for the same.


 AngularJS Hello World Example

Let's start by writing our HTML file. Create a folder where you can store your code files. Now in this folder create two files -
  1. helloWorld.html
  2. helloWorld.js
And add following content to it -

helloWorld.html:

 <html>
    <head>
        <title>Hello World!</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>       
        <script type="text/javascript" src="helloWorld.js"></script>
    </head>
    <body ng-app="helloWorldApp">

        <div ng-controller="helloWorldAppController" ng-init="init()">
                  <p>Enter Message here : <input type="text" ng-model="message"></p>
                   <p>Entered Message :  {{ message }}!</p>
        </div>

    </body>
</html>



helloWorld.js  :

 (function(){
    'use strict';
    console.log("In JS");
    var helloWorldApp = angular.module("helloWorldApp", []);
    helloWorldApp.controller("helloWorldAppController", function($scope) {
        $scope.init = function() {
            console.log("Init method called");
            $scope.message = "Hello World!";
        }
    });

})();



Now you can simply open the helloWorld.html file and see the changes. 

 

Understanding the code

Now that we saw the behavior let's try to understand the code.

In our code we have initialized a angular module using ng-app directive. In the javascript we get this module using andular.module() function.  Inside a module you can have multiple controllers controlling various parts of your html. In our case we have defined a controller called helloWorldAppController that controls the div element we have defined. In the javascript we are getting this controller from our module.


Once you have the controller you can define varibles and functions that you can access in the HTML controller by this particular controller. You can also notice the variable called "message" that is defined in the controller is accessible in the HTML using {{message}} syntax. You would also see the binding exist using the ng-model syntax. This is called two way binding. So value changed in the input field is immediately visible in same HTML using {{message}} syntax as well as the controller using $scope.message. In the html where we have declared controller we have also specified init method using ng-init and you can see this menthod defined in controller using $scope.init. This is called when controller is initialized and this function in the controller script initialized messages variable to "Hello World!" that is reflected in HTML page.



Lastly we have injected our controller script (helloWorld.js ) and  angular js script in the html for our angular js code to work. Make sure angular script is the 1st one added.

All keywords starting with ng- are angular directived.
  • ng-app
  • ng-controller
  • ng-init
  • ng-model 

Create a gif from a video using ffmpeg with good quality

Background

In the last post, we saw to Resizing videos and images using ffmpeg. In this post, we will see how we can convert a video into a gif with good quality.



 Create a gif from a video using FFmpeg

You can use the following shell script to convert your video to Gif -

#!/bin/bash
#----------------------------------------------------
#  Author : athakur
#  Version : 1.0
#  Create Date : 27/02/2018
#  Update Date : 27/02/2018
#  Description : Create gif from a video
#    Sample usage : ./creategif.sh input.mp4 output.gif
# ffmpeg static build can be downloaded from https://johnvansickle.com/ffmpeg/
#----------------------------------------------------
echo "Converting $1 to $2"

if [ -z "$1" ] || [ -z "$2" ]
  then
  echo "Incorrect arguments supplied. Format - ./creategif.sh input.mp4 output.gif"
  exit
fi

palette="/tmp/palette.png"

filters="fps=10,scale=1024:-1:flags=lanczos"

ffmpeg -v warning -i "$1" -vf "$filters,palettegen" -y "$palette"
ffmpeg -v warning -i "$1" -i $palette -lavfi "$filters [x]; [x][1:v] paletteuse" -y "$2"

echo "Completed gif creation" 


You can find this code in my GitHub gists section-
 To run you can simply execute following command - 
  • ./creategif.sh input.mp4 output.gif
Input need not be an mp4. It can be an .avi or a .webm too.

Sample video and gif are as follows -

Video :




Gif :




That's it your high-quality gif is ready.


You can do more with FFmpeg like scaling and cropping of video before converting to gig. Eg.

./ffmpeg -loglevel warning -y -i input.mp4 -i palette.png -filter_complex "crop=800:500:0:0[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=3[tl];[tl]fps=10,scale=1024:-1:flags=lanczos"  target.gif



Related Links

t> UA-39527780-1 back to top