AngularJS & Bootstrap Hello World UI Template

angularjs bootstrap

The article is a placeholder for the copy & paste code for AngularJS and Bootstrap. If one wants to quickly get started with AngularJS and Bootstrap, one may want to bookmark this page.

Points to pay attention:

  • AngularJS script referenced from Google hosted libraries
  • Bootstrap scripts and CSS files from bootstrapcdn


<!DOCTYPE html>

<html ng-app="helloApp">
  <link rel="stylesheet" href="//">
  <script src="//"></script>
  <script src="//"></script>
    var helloApp = angular.module( "helloApp", [] );
    helloApp.controller( "HelloCtrl", [ '$scope', function($scope) {
      $ = "ajitesh shukla";

<body ng-controller="HelloCtrl">
  <div class="page-header">
    <h1>Hello World Sample Program</h1>
    <form class="form-horizontal" role="form">
      <div class="form-group">
          <label class="col-md-2 control-label">Type Your Name</label>
          <div class="col-md-4">
               <input type="text" ng-model="name"  class="form-control" value="{{name}}"/>
               <span>Hello {{ name }}!</span>


Ajitesh Kumar

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.
Posted in Javascript, UI. Tagged with , .

Leave a Reply

Your email address will not be published. Required fields are marked *