Angular Material Auto - Complete

1

 Angular Material is the reference implementation of Google's Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design.

To use Angular- Material, required Angular files are :

• angular-material.min.css
• angular-material.min.js
• angular.min.js
• angular-animate.min.js
• angular-aria.min.js
• angular-messages.min.js

CDN :-

• https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js
• https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js
• https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js
• https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js
• https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc1/angular-material.js

Angular material provide us with its own tags that help us to perform DOM Operation in an easy fashion. One of such tag is md-autocomplete.

md-complete tag

md-complete tag has its child tag 

<md-item-template> : In this the search items results are shown.

<md-not-found> : Here text is provided when search does not match.

Our HTML Page :

<div ng-controller="AutoCompleteController as ctrl" layout="column" ng-cloak="" ng-app="MyApp">

<md-content class="md-padding">

<form ng-submit="$event.preventDefault()">

<p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>

<md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText"

md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="0" placeholder="What is your favorite US state?">

<md-item-template>

<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>

</md-item-template>

<md-not-found>

No states matching "{{ctrl.searchText}}" were found.

<a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>

</md-not-found>

</md-autocomplete>

<br/>

<p>By default, <code>md-autocomplete</code> will cache results when performing a query. After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p>

</form>

</md-content>

</div>

Our JS Page:

'use strict';

angular

.module('MyApp', ['ngMaterial', 'ngMessages'])

.controller('AutoCompleteController', AutoCompleteController);

function AutoCompleteController() {

var self = this;

self.states = loadAll();

self.querySearch = querySearch;

function querySearch(query) {

var results = query ? self.states.filter(createFilterFor(query)) : self.states;

return results;

}

function loadAll() {

var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\

Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\

Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\

Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\

North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\

South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\

Wisconsin, Wyoming';

return allStates.split(/, +/g).map(function (state) {

return {

value: state.toLowerCase(),

display: state

};

});

}

function createFilterFor(query) {

var lowercaseQuery = angular.lowercase(query);

return function filterFn(state) {

return (state.value.indexOf(lowercaseQuery) === 0);

};

}

}

Code Explanation:

angular

.module('MyApp', ['ngMaterial', 'ngMessages'])

.controller('AutoCompleteController', AutoCompleteController);

Angular module named MyApp is made with ngMaterial and ngMessages dependency.

Our Controller name is AutoCompleteController

function AutoCompleteController() {

var self = this;

self.states = loadAll();

self.querySearch = querySearch;

On controller load we are calling loadAll function, and querySearch and stored them to states and querySearch.

function createFilterFor(query) {

var lowercaseQuery = angular.lowercase(query);

return function filterFn(state) {

return (state.value.indexOf(lowercaseQuery) === 0);

};

}

This filter is used so that our search works for lower and upper case both and in our return function we are finding those states which has that search term at index 0. Means the first character.

Our End Result Will be Like :

Read More »

Starting with SignalR Part 1 (Overview)

0

SignalR, a framework that facilitate asynchronous data transfer between the server and the clients in real time.

Basically, SignalR isolates us from low-level details, giving us the impression of working on a permanently open persistent connection. To achieve this, SignalR includes components specific to both ends of communication, which will facilitate message delivery and reception in real time between the two.

In a way that is transparent to the developer, SignalR is in charge of determining which is the best technique available both at the client and at the server( Long Polling, Forever Frame, Websockets...) and uses it to create a underlying connection and keep it continuously managing disconnections and reconnections when necessary. We will only see and use permanently open connection, and SignalR will make sure that everything works correctly in the backstage. Thus, with this framework, we say that we work on a virtual persistent connection.

SignalR also includes a messaging bus capable of managing data transmission and reception between the server and the clients connected to the service. That is, server is able to keep track of its clients and detect their connections and disconnections, and it will also have mechanisms to easily send messages to all clients connected or part of them, automatically managing all issues concerning communications (different speeds, latency, errors … ) and ensuring the delivery of messages.

Read More »

ng-change

0

ng-change can be used to capture any action performed by the user with input type tag, select tag.

Using ng-change with input type :

<input type="number" class="form-control" ng-change="calculate()" />

Here ng-change modal will go to calculate() in the controller of this page at the time of change text in the textbox. This is same as writing a onTextChange() action on the textbox.

On Controller:

$scope.calculate = function () {

//Do the required operation here.

}

Using ng-change with select tag :

<select ng-options="size as size.name for size in sizes" 
   ng-model="item" ng-change="update()"></select>

Here the ng-change will be called when user will select an option. 

Read More »

Beginning-with-database-approach-Part 3

0

In Part 2 of beginning with entity framework we did CRUD operation using entity framework. Now, there are few tips for using entity:

How to update your Entity Data Model (.edmx)?

Open your .edmx file >Right click >Select update from database

You will get this window:

If you have added new table, views, stored procedure in database.. Select those and select Finish.

Same to update and delete from model.

Providing Default values?

In SQL we can provide default value, to a column, this default value is not automatically updated to our entity model. So we have to manual add the default value in our entity model also.

Select the table column from entity designer for which default value is to be provided.

Right click on the column>Properties >Default value :- Provide your value

#Stored procedure of SQL behave as function in Entity framework.

Read More »