Categories: JavascriptUI

AngularJS & Bootstrap Hello World UI Template

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]

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.

Share
Published by
Ajitesh Kumar
Tags: javascriptUI

Recent Posts

Large Language Models (LLMs): Four Critical Modeling Stages

Large language models (LLMs) have fundamentally transformed our digital landscape, powering everything from chatbots and…

4 weeks ago

Agentic Workflow Design Patterns Explained with Examples

As Large Language Models (LLMs) evolve into autonomous agents, understanding agentic workflow design patterns has…

4 weeks ago

What is Data Strategy?

In today's data-driven business landscape, organizations are constantly seeking ways to harness the power of…

4 weeks ago

Mathematics Topics for Machine Learning Beginners

In this blog, you would get to know the essential mathematical topics you need to…

2 months ago

Questions to Ask When Thinking Like a Product Leader

This blog represents a list of questions you can ask when thinking like a product…

2 months ago

Three Approaches to Creating AI Agents: Code Examples

AI agents are autonomous systems combining three core components: a reasoning engine (powered by LLM),…

2 months ago