Angular UI Bootstrap controls in HTML 5 or MVC

This article describes about the mostly used controls in angular from UI bootstrap toolbox. All of these controls will be supported in most of the advanced browsers (IE 10+, Mozilla, Chrome, Firefox, Opera, etc).

Here, we explore on below controls.
 Search box with AutoComplete
 Date & Time controls
 Modal Popup

Please follow my previous article (SPA in MVC5 using angular) for setting up the MVC 5 project using angular.
http://nullskull.com/a/10479043/spa-single-page-application-in-mvc-5-and-angularjs.aspx

Follow the below link for basic understanding of ui bootstrap controls
https://angular-ui.github.io/bootstrap

Date Control:
As we have Date control in HTML5 and bootstrap and is not compatible with most of the browsers. Let’s create a Custom Date control directive in angular.
Add the jQuery Ui plugin from nugget and reference them in script and style bundle as below.

bundles.Add(new StyleBundle("~/Content/css").Include(
                       "~/Content/jquery-ui.css"));

       bundles.Add(new ScriptBundle("~/bundles/angularspa").Include(
              
           "~/Scripts/jquery-ui.js"));

Create a custom date directive in your angular module as below.
var app = angular.module('angularspa', ["ngRoute"]);

app.directive("customdatepicker", function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, elem, attrs, ngModelCtrl) {
            var updateModel = function (dateText) {
                scope.$apply(function () {
                    ngModelCtrl.$setViewValue(dateText);
                });
            };
            var options = {
                dateFormat: "mm/dd/yy",
                onSelect: function (dateText) {
                    updateModel(dateText);
                }
            };
            elem.datepicker(options);
        }
    }
});

Just add this directive in your text box with angular binding property ng-model to set/get the date.
<input type="text" customdatepicker class="form-control pull-left" id="enddatetime" placeholder="mm/dd/yyyy" ng-model="testDate">


Time Control:
Add Angular UI Bootstrap nugget package and reference in script bundle
bundles.Add(new ScriptBundle("~/bundles/angularspa").Include(
                     "~/Scripts/angular-ui/ui-bootstrap-tpls.js""));

Define the ui bootstrap directive in angular module.
var app = angular.module('angularspa', ["ngRoute", "ui.bootstrap"]);

Now, add the time control in html design as below
<uib-timepicker ng-model="endTime" hour-step="hstep" minute-step="mstep" show-meridian="true"></uib-timepicker>

From above, properties
Hour-step -> Number of hours to increase or decrease when using a button (default 1).
Minute-step -> Number of minutes to increase or decrease when using a button (default 1)
Show-meridian -> Whether to display 12H or 24H mode.


Search Control:
Create a function in controller to get the list of users based on the search parameter
    $scope.getUsers = function (val) {
        var webUrl = 'http://localhost:50858/api/test/GetUsersFilterByName?query=' + val;
        return $http.post(webUrl)
          .then(function (response) {
               return response.data.map(function (item) {
                   return item;
              });
          });
    };

From above, posting the search parameter to the API to get the list of users.
Use uib-typeahead to get the auto complete feature in the textbox
<input type="text" ng-model="asyncSelected" typeahead-on-select="onSelectedUser($item, $model, $label)" uib-typeahead="name for name in getUsers($viewValue)">

Here,  uib-typeahead is a result set to display the users based on $viewValue ( value of search input).
Typeahead-on-select is an event to get a selected user from the result set.


Modal:
Add   $uibmodal directive to the angular controller as below.
app.controller('rootController', ["$scope", "$http", "$rootScope", "$uibModal", function ($scope, $http, $rootScope, $uibModal)

use $uibModal.open method to open the modal popup with parameters.
$uibModal.open({
            templateUrl: '/Home/MyModalContent',
            controller: ModalInstanceCtrl,
            backdrop: true,
            keyboard: true,
            backdropClick: true,
            windowClass: 'center-modal',
            resolve: {
                data: function () {
                     return data;
                }
            }
        });

templateUrl: is a html page that has to be opened as a modal popup.
Controller: is a angular controller that has to be associated with modal view
backdrop: to set the backdrop with opacity
windowClass: is to centre align the popup
resolve: pass data to view if required
In this example, I am creating the modal popup to display the message as Alert

<div class="modal-body" style="padding:0px">
    <div class="alert alert-{{data.mode}}" style="margin-bottom:0px">
        <button type="button" class="close" data-ng-click="close()">
            <span class="glyphicon glyphicon-remove-circle"></span>
        </button>
        <strong>{{data.boldTextTitle}}</strong> {{data.textAlert}}
    </div>
</div>
Data object from angular controller to set the message ant Title.
$scope.data = {
            boldTextTitle: "Done",
            textAlert: "Announcement published successfully",
            mode: 'success'
        }

windowClass style to centre the popup
.center-modal {
    position: fixed;
    top: 35%;
    left: 18.5%;
    z-index: 1050;
    width: 80%;
    height: 80%;
    margin-left: -10%;
  }




Download the sample from below location. Removed the packages from project solution due to the size constraint, please refresh the packages before compiling

http://nullskull.com/FileUpload/-407123783_AngularSpa.zip    





                                     
                     

By Siva Jagan Dhulipalla   Popularity  (1354 Views)