Categories: JavascriptUI

Angular-UI Bootstrap Hello World Code Example

While working on several AngularJS tiny projects that are made live on my another website, I used Bootstrap to create good-looking UIs while eventing aspect was taken care by AngularJS.
Then, I came across several pages on the web which talked about using great UI-widget based framework such as ExtJS, KendoUI for laying out quick & great looking UIs and use AngularJS as an eventing framework. This is where I also got introduced to Angular-UI project (http://angular-ui.github.io/). This is when I came to know AngularJS Bootstrap components which is written by Angular-UI team. The same could be found on following page: http://angular-ui.github.io/bootstrap/.
As a demo, take a look at the my another website, where I replaced JQuery/Bootstrap JS libraries with AngularJS Bootstrap components. I was basically using bootstrap/jquery libraries for achieving drop-down in vertical menu which I was able to accomplish with just AngularJS bootstrap components.

 

Why I may use AngularJS Bootstrap Components?

I went on to do quick POC and found that AngularJS bootstrap components was able to serve most of my needs without having the need to include following two JS libraries:

  • bootstrap.min.js
  • jquery.min.js

Thus, this tremendously reduced the memory footprint of overall JS files required to achieve what I wanted to achieve with my webpages.


Why I may not use AngularJS Bootstrap Components?

Primarily because, it may create a hard binding with my AngularJS code and may present difficulties if I want to explore other UI-widgeting framework in future.

 

HelloWorld Code Example with AngularJS Bootstrap

Pay attention to some of the following:

  • Inclusion of “ui-bootstrap-tpls-0.9.0.min.js” javascript library. Actually, there is an alternate library without “tpls” named such as “ui-bootstrap-[version].min.js”. One would want to library with name consisting of “tpls” if he/she wanted to use bootstrap-specific templates bundled with directives. This is a recommended file for people who want to take all the directives and don’t need to customize anything the solution. However, one who do want the default templates and provide their own templates, could get the file, ui-bootstrap-[version].min.js. One could download these files from https://github.com/angular-ui/bootstrap/tree/gh-pages.
  • Inclusion of “ui.bootstrap” module when instantiating the app using code, var helloApp = angular.module( “helloApp”, [‘ui.bootstrap’] );
  • Exclusion or no dependency on jQuery or Bootstrap’s JavaScript is required.
<html ng-app="helloApp">
<head>
  <title>HelloWorld</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
  <script src="ui-bootstrap-tpls-0.9.0.min.js"></script>
  <script>
    var helloApp = angular.module( "helloApp", ['ui.bootstrap'] );
    helloApp.controller( "HelloCtrl", [ '$scope', function($scope) {
      $scope.name = "calvin hobbes";
    }]);
  </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>

Conclusion

To conclude, for my sample projects, I would definitely use AngularJS Boostrap components rather than depending on Jquery & Bootstrap JS libraries.


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

Recent Posts

Retrieval Augmented Generation (RAG) & LLM: Examples

Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…

7 days ago

How to Setup MEAN App with LangChain.js

Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…

2 weeks ago

Build AI Chatbots for SAAS Using LLMs, RAG, Multi-Agent Frameworks

Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…

2 weeks ago

Creating a RAG Application Using LangGraph: Example Code

Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…

3 weeks ago

Building a RAG Application with LangChain: Example Code

The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…

3 weeks ago

Building an OpenAI Chatbot with LangChain

Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…

3 weeks ago