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">
<head>
  <title>HelloWorld</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script>
    var helloApp = angular.module( "helloApp", [] );
    helloApp.controller( "HelloCtrl", [ '$scope', function($scope) {
      $scope.name = "ajitesh shukla";
    }]);
  </script>
</head>

<body ng-controller="HelloCtrl">
  <div class="page-header">
    <h1>Hello World Sample Program</h1>
  </div>
  <div>
    <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>
          </div>
      </div>
    </form>
  </div>
</body>
</html>

…

[adsenseyu1]

Author
Recent Posts

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning and BI. I would love to connect with you on Linkedin.
Check out my books titled as Designing Decisions, and First Principles Thinking.