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.
- Agentic Reasoning Design Patterns in AI: Examples - October 18, 2024
- LLMs for Adaptive Learning & Personalized Education - October 8, 2024
- Sparse Mixture of Experts (MoE) Models: Examples - October 6, 2024
I found it very helpful. However the differences are not too understandable for me