Monday, 14 May 2018

026 AngularJS Includes

'ng-include' directive alow to add HTML from an external file.But the file should be within the same domain.By default AngularJS does not allow cross doing HTML from an external file.

Example 
 

<!DOCTYPE html>
<html>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
         <div ng-include="'myHtmlPage.htm'"></div>

</body>
</html>

Output

 This is my HTML Page.




Include Cross Domains
To include cross domain , you need to add config function of your application.


Example 
 
<!DOCTYPE html>
<html>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp">


<script>
 
var app = angular.module('myApp', [])

app.config(function ($sceDelegateProvider) 
{
         $sceDelegateProvider.resourceUrlWhitelist
     ([
             'http://adrilal.blogspot.in/2016/10/dooars-tour-sultanikhola-samsing.html'
          ]);
});

</script>

</body>
</html>

-------------




025 Bootstrap Typeahead

Wednesday, 9 May 2018

021 Bootstrap Glyphicon

Bootstrap Glyphicon
 

Bootstrap includes a collection of glyphs from the Glyphicon Halflings set.These are graphical component and free of cost with Bootstrap.

Example



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<body>
           <p>Email: <span class="glyphicon glyphicon-envelope"></span></p>
           <p>Enter your search term: <span class="glyphicon glyphicon-search"></span></p>
           <p>Rate this site: <span class="glyphicon glyphicon-star-empty"></span></p>
           <p>Move it to Dustbin: <span class="glyphicon glyphicon-trash"></span></p>
           <p>Go to home: <span class="glyphicon glyphicon-home"></span></p>
           <p>Open file : <span class="glyphicon glyphicon-file"></span></p>
            <p>Align Left : <span class="glyphicon glyphicon-left"></span></p>
            <p>Align Right : <span class="glyphicon glyphicon-right"></span></p>
            <p>Align Center : <span class="glyphicon glyphicon-center"></span></p>
</body>
</html>

  Email:
Enter your search term:
Rate this site:
Move it to Dustbin:
Go to home:
Open file :
Align Left :
Align Right :
Align Center :




022 Bootstrap Colors

Bootstrap Colors
Bootstrap support class for color.The following is class used for coloring purpose.

  • text-primary
  • text-secondary
  • text-success
  • text-danger
  • text-warning
  • text-info
  • text-light
  • text-dark
  • text-muted
  • text-white

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
       <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<body>
<span class="text-primary">This is the example of "text-primary"</span><br/> <span class="text-secondary">
This is the example of "text-secondary"</span><br/><span class="text-success">This is the
example of "text-success"</span><br/> <span class="text-danger">This is the example of "text-danger"</span><br/>
<span class="text-warning">This is the example of "text-warning"</span><br/> <span class="text-info">
This is the example of "text-info"</span><br/> <span class="text-light">This is the example
of "text-light"</span><br/> <span class="text-dark">This is the example of "text-dark"</span><br/>
<span class="text-muted">This is the example of "text-muted"</span><br/> <span class="text-white">
This is the example of "text-white"</span>
</body>
</html>

Output 

This is the example of "text-primary"
This is the example of "text-secondary"
This is the example of "text-success"
This is the example of "text-danger"
This is the example of "text-warning"
This is the example of "text-info"
This is the example of "text-light"
This is the example of "text-dark"
This is the example of "text-muted"
This is the example of "text-white"




For Background coloring Bootstrap uses the following class
  • bg-primary
  • bg-secondary
  • bg-success
  • bg-danger
  • bg-white
  • bg-dark
  • bg-light
  • bg-info
  • bg-warning

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<body>
<span class="bg-primary">This is the example of "bg-primary"</span><br/>
<span class="bg-secondary">This is the example of "bg-secondary"</span><br/>
<span class="bg-success">This is the example of "bg-success"</span><br/>
<span class="bg-danger">This is the example of "bg-danger"</span><br/>
<span class="bg-white">This is the example of "bg-white"</span><br/>
<span class="bg-dark">This is the example of "bg-dark"</span><br/>
<span class="bg-light">This is the example of "bg-light"</span><br/>
<span class="bg-info">This is the example of "bg-info"</span><br/>
<span class="bg-warning">This is the example of "bg-warning"</span><br/>
</body>
</html>

Output :

This is the example of "bg-primary"
This is the example of "bg-secondary"
This is the example of "bg-success"
This is the example of "bg-danger"
This is the example of "bg-white"
This is the example of "bg-dark"
This is the example of "bg-light"
This is the example of "bg-info"
This is the example of "bg-warning"



For Gradient coloring Bootstrap uses the following class


  • bg-gradient-primary
  • bg-gradient-secondary
  • bg-gradient-success
  • bg-gradient-danger
  • bg-gradient-warning
  • bg-gradient-info
  • bg-gradient-light
  • bg-gradient-dark



বাঙালির বেড়ানো সেরা চারটি ঠিকানা

  বাঙালি মানে ঘোড়া পাগল | দু একদিন ছুটি পেলো মানে বাঙালি চলল ঘুরতে | সে সমুদ্রই হোক , পাহাড়ি হোক বা নদী হোক। বাঙালির ...