How to use filters within controllers in AngularJs (mini-challenge 12)

filters within controllers

Filters within controllers (mini-challenges 12)

AngularJs Mini-Challenges is a growing collection of “Challenges” about the most quirky parts of the AngularJs framework. It encourage you to find and fix common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert AngularJs programmers may encounter on their endeavours into the depths of the framework.

AngularJs Mini-Challenges does not aim to teach you AngularJs. Former knowledge of the Framework is strongly recommended in order to understand the topics covered in this Challenges. In order to learn the basics of the Framework, please head over to this excellent book:

 

book

Book Tip

ng-book – The Complete Book on AngularJS
Ready to master AngularJS? What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall?


Amazon

 

The Challenge:

How would you use filters within controllers like “filter” in JavaScript? And how to create a custom filter?
For example in the html you can use filter’s filter to do a search in a list of elements:

 <tr ng-repeat="friend in friends | filter:searchText">

<table id="searchTextResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>

<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>

 
 

Solution:

In AngularJs you can inject the $filter service within the controller, and use it with the following syntax for “filter”:

$filter('filter')(array, expression, comparator, anyPropertyKey)

 

function myController($scope, $filter)
{
   $scope.result = $filter('filter')($scope.arrayOfObjects, $scope.searchCriteria);
}

You can also use other AngularJs filters Build-in like:

 $scope.formatedDate = $filter('date')($scope.date, "yyyy-MM-dd");
 $scope.result = $filter('lowercase')($scope.name);

You can find here a list of build-in AngularJs filters:
https://docs.angularjs.org/api/ng/filter

 
 
Filter Example with pipe in the HTML:

 
 
Filter example within the controller using Javascript:

 
 

How to create custom filters in AngularJs

AngulrJs have a build-in method to register custom filters, using the same approach you can use when you register a controller, a service and factories. See following example:

var myApp = angular.module('myApp', []);
app.filter('myFilter', function() {
  return function(input, option1, option2) {
    var output;
    // Logic to make your filter works.
    return output;
  }
});

 
for more reference about how to create a custom filter you can refer to https://scotch.io/tutorials/building-custom-angularjs-filters
 

CSS Tooltip, without JavaScript or Jquery

In this article I’m going to explore how to Create css tooltip, without using JavaScript or JQuery plugins.

css tooltip

Tooltips

Tooltips are great artifact to complement/enrich the user experience providing hint and more information to the user. There are a lots of JavaScript plugins that provides this functionality, but if you don’t feel like adding that weight to your site, adding more files and more JavaScript code, we can take care of it just using plain CSS.
As an alternative we can use the HTML title attribute to effectively accomplish the same solution, but you can’t style the tooltip to your liking.
Sometimes I prefer to use CSS alternatives to common JavaScript interactions when I’m developing specially when I’m developing prototypes. There are some projects where downloading a plugin or creating a new file for a few lines of code seems like overkill.

Here is a working example:

Hover over this

 

Creating a Css Tooltip

To create our tooltip just using css, we are going to take advantage of the ::before and ::after selector, we are going to use the ::before for the tooltip body and the ::after for the littler arrow. We are going to set the Tooltip content with data-tooltip parameter of the html element.

 <span class="tooltip-toggle" data-tooltip="Sample text for your tooltip!">
     Hover over this
 </span>

 

book

Book Tip

CSS Mastery
Fully updated to the latest CSS modules, make the journey to CSS mastery as simple and painless as possible. This book dives into advanced aspects of CSS-based design, such as responsive design, modular CSS, and CSS typography.

Amazon

 

 

Definition and Usage.

::after selector inserts something after the content of each selected element(s).
You can use the content property to specify the content to insert. This property can be combined with the attr() attribute to get the text from an html atribute.
::before selector inserts something before the content.
Example:

.tooltip-toggle::before {
  position: absolute;
  top: -80px;
  left: -80px;
  background-color: green;
  border-radius: 5px;
  color: #fff;
  content: attr(data-tooltip);
  padding: 1rem;
  text-transform: none;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 160px;

.tooltip-toggle::after {
  position: absolute;
  top: -12px;
  left: 9px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid green;
  content: " ";
  font-size: 0;
  line-height: 0;
  margin-left: -5px;
  width: 0;
}
}

With the :hover we can show/hide the tooltip as a transition:

.tooltip-toggle:hover::before,
.tooltip-toggle:hover::after {
  opacity: 1;
  -webkit-transition: all 0.75s ease;
  transition: all 0.75s ease;
}

.tooltip-toggle::before,
.tooltip-toggle::after {
  color: #efefef;
  font-family: monospace;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}

Here is the full code example of the css tooltip:

Interview Question

You can also use this article as reference to create css interview questions for a seasoned front-end developer, to validate the deep experience on using, formating the ::before and ::after elements.

State Management in ASP.Net

In this article I’ll try to cover the different techniques session state management in ASP.Net applications. With this we are going to be able to determine the best approach for our solution when we manage the session states in ASP.Net applications.
session state management

These are the session state management options in Asp.net

  • Off
  • StateServer
  • InProc
  • SQLServer
  • Cookies
  • Query String
  • Custom

Fot Off|StateServer|InProc|SQLServer, we will need to specify the session state tag in the web.config. This is a template code:

<sessionState mode="Off|StateServer|InProc|SQLServer"
              cookieless="true|false"
              timeout="number of minutes"
              stateConnectionString="tcpip=server:port"
              sqlConnectionString="sql connection string"
              stateNetworkTimeout="number of seconds"/>

Off Mode

Off mode, which disables session state.


StateServer Session State mode

StateServer Session State mode, which stores session state in a separate process called the ASP.NET state service. This ensures that session state is preserved if the Web application is restarted and also makes session state available to multiple Web servers in a Web farm. StateServer session runs as a Windows service and would help to minimize database traffic.
Example:

<configuration>
  <system.web>
    <sessionState mode="StateServer"
      stateConnectionString="tcpip=SampleStateServer:42424"
      cookieless="false"
      timeout="20"/>
  </system.web>
</configuration>

InProc Session State

InProc Session State, this mode stores session state with the ASP.NET worker process (in memory on the Web server). It is not valid in a web farm configuration.
Example

<configuration>
   <system.web>
      <sessionState mode="InProc"
                    cookieless="true"
                    timeout="20"/>
      </sessionState>
   </system.web>
</configuration>

SqlServer Session State

SqlServer Session State. stores session state in a SQL Server database. This ensures that session state is preserved if the Web application is restarted and also makes session state available to multiple Web servers in a Web farm. Although, It does support a web farm configuration, you should not use this if you want to minimize database traffic.
Example:

<configuration>
  <system.web>
    <sessionState mode="SQLServer"
      sqlConnectionString="Integrated Security=SSPI;data 
        source=SampleSqlServer;" />
  </system.web>
</configuration>

Cookie State mode

Cookie State mode. Cookies are stored on the client, so the application would not be able to keep the state if they switched to a different device or a different browser. Also the user needs to have the cookies enabled in their browser


Query String

Query String It can be used for passing limited state information across request boundaries, this solution would not be able to keep the state if they switched to a different device. This solution will work even if the user have disabled the cookies in the browser.


Custom mode

Custom mode, which enables you to specify a custom storage provider.
Example:

<configuration>
  <connectionStrings>
    <add name="OdbcSessionServices" 
      connectionString="DSN=SessionState;" />
  </connectionStrings>

  <system.web>
    <sessionState 
      mode="Custom"
      customProvider="OdbcSessionProvider">
      <providers>
        <add name="OdbcSessionProvider"
          type="Samples.AspNet.Session.OdbcSessionStateStore"
          connectionStringName="OdbcSessionServices" 
          writeExceptionsToEventLog="false" />
      </providers>
    </sessionState>
  </system.web>
</configuration>

These are the options we have in Asp.net to manage the session state in an application. Hope this was helpful.