Subscribe: Jeffry Houser's Blog
http://www.jeffryhouser.com/rss.cfm?mode=full
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
angular component  angular  app  code  component  create  filter  function  highlight  input  searchstring  text  window app  window 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Jeffry Houser's Blog

Jeffry Houser's Blog



Jeffry Houser's Blog



Published: Tue, 21 Feb 2017 20:47:36 -0700

Last Build Date: Tue, 21 Feb 2017 09:00:00 -0700

 



Submit a Form Post to a New Window with AngularJS - Approach 2

Tue, 29 Nov 2016 09:00:00 -0700

I was working on a client project, built with AngularJS, and we wanted to use AngularJS to submit a form into another window. This could be done with a simple target on the form tag; but we wanted to be able to run other functionality at the time of the form post. I decided to write a series about the different ways to make this happen; and this is the second in the series. Check out the first. The Setup First, add Angular to your Application: The official API reference contains detailed information of what each library is, but for the purposes of this article I decided not to go into details. Create Your First Angular 2 Component The first thing we'll do is create an Angular 2 component. The default Angular 2 method is to wrap the component around an Immediately Invoked Function Expression (IIFE) function, like this: (function(app) { })(window.app || (window.app = {})); There is no Angular code in this snippet yet, but I want to point out that a variable is passed into the function. This is window.app, which is an object. Some shorthand trickery is used to define window.app as an empty object. The code could be rewritten like this: window.app = {}; (function(app) { })(window.app); I find the approach of storing a pointer to the main application object curious. Global variable are sometimes considered bad practice and when building Angular 1 applications, I went out of my way to avoid creating new ones. Here we create one for the main Angular component. Now, let's flesh out the component: app.AppComponent = ng.core.Component({ selector: 'my-app', template: 'My First Angular 2 App' }) .Class({ constructor: function() {} }); Inside the empty app object, a property named AppComponent is created. This creates an Angular component using the ng.core.Component() function. In Angular 2 a component seems to be synonymous with a directive in Angular 1. The Component() function accepts an object as its argument. The object has two properties. The first is the selector, which is the component name and how it will be referenced in HTML code. The second is the template, which is the HTML Text. For the purposes of this sample, I defined the template inline. After the Component() function, you'll see the dot notation used to call a second method named Class(). This is where we define the JavaScript behind the component, sort of like a Controller in Angular 1. For the moment this component has no JavaScript. It is an entity that includes some markup and some JavaScript code. Angular 2 purposely separates the JavaScript and markup portions of the template. Create the Angular Module The next step to create a running AngularJS application is to create the Angular module. After the component is defined add another IIFE: (function(app) { })(window.app || (window.app = {})); Then create the module: app.AppModule = ng.core.NgModule({ imports: [ ng.platformBrowser.BrowserModule ], declarations: [ app.AppComponent ], bootstrap: [ app.AppComponent ] }) .Class({ constructor: function() {} }); The NgModule() function is called on the ng.core library. It operates similar to the Component() function; but this time creates an Angular app instead of an Angular component. For the purposes of this article, think of an app as a collection of components. A single array argument is passed into the NgModule() function; which is a list of configuration options. Chaining off the module creation, a class is create with a constructor. We are not putting anything in the class for the purposes of this sample. The argument list in the NgModule() contains imports, declarations, and bootstrap. The imports define the other, external, modules that are required for this app. The declaration and bootstrap both refer to our custom components made for this application. In this case, they reference the app.AppComponent variable. This is a switch from Angular 1 development, where in most cases you would define the module first, and al[...]



Announcing The Learn With Series: Angular Tutorials

Tue, 22 Nov 2016 09:05:00 -0700

I just released Learn With, the first entry in my new series of books and programming tutorials. The first set of books I released focus on building applications with AngularJS and Bootstrap. There are currently three books. One uses mock services so you can focus on learning Angular without having to worry about a backend. Another builds out a fully functional backend with NodeJS. The third builds a fully functional backend with ColdFusion. When creating this series, I spent a lot of time building out the infrastructure, and the plan is to expand the series to include other backend or front end choices. You can buy a PDF direct from us; or get an ebook through Amazon. If you're looking to jump into modern HTML5 development; then Angular is a great choice with lots of community support. Take a look and let me know what you think.
Newsletter Subscribers got a discount on Learn With: sign up here



Modifying the Type Ahead Highlight – Angular uiSelect AutoComplete Directive - Part 4

Tue, 15 Nov 2016 09:00:00 -0700

The previous article I wrote about Angular's uiSelect AutoComplete directive showed you how to modify the drop down filter. This article will show you how to modify the drop down highlight. Review The AutoComplete Highlight When you start typing into the AutoComplete, the uiSelectChoices directive filters the list and the text is highlighted in the drop down: This is the Angular code behind the highlight: A highlight filter is applied to the displayed label. If you look at the code when you start typing, you'll see something like this: Al aska The uiSelect automatically places the span around the text with the style "ui-select-highlight". You can modify the highlight by either modifying the style, or using a new filter. This post will show both approaches. Option 1: Modify the style To modify the style, you just need to add a new style to your page, or style sheet. Here is a style that turns the color of the highlight red: .ui-select-highlight{ color : red; } Reload the app and see it in action: Play with the code here. Option 2: Use a Filter The second option is to write your own highlight filter. The default filter will highlight all text in the word. We can write another one that just highlights the first instance of the text. First, create the filter stub: angular.module('uiSelectTestApp').filter('firstOnlyHighLight', function() { return function(input, searchString) { } }); The filter is named firstOnlyHighlight. It is set up like a standard Angular filter. The real magic is the code inside the filter function. First, do this: if(searchString){ // other stuff here } return input; If a searchString exists, then we'll do some processing and return it. If not; return the input unprocessed. The purpose of this function is to find the first instance of searchString in the input and replace it with modified HTML. First, get the index of the searchString: var index = input.toLowerCase().search(searchString.toLowerCase()); This puts the input and searchString into lowercase, making it a case insensitive search. Next, get the length of the searchString: var length = searchString.length; This will make sure that the function will work even if the user has typed multiple letters. Next, use the length and index to store the original text: var originalText = input.substr(index, length); Finally replace the text: var highlightedLabel = input.replace(originalText, '' + originalText + ''); The replace() method is used on the input. It looks for the originalText, and replaces it with the HTML modified text. Now return the modified value: return highlightedLabel; One final thing is needed; to change the HTML to refer to the new filter: Try this here: Final Thoughts The use of filters make this very powerful. You could create your own approach which uses your own styles. Sign up for DotComIt's Monthly Technical Newsletter First Name Email Address * [...]