Skip to main content

Creating a really basic angular directive with typescript

We're going to build a simple search angular directive using typescript. So it is going to look like this. As you type through, your search text changes. When you hit, search it fakes search results.

This is how our typescript look like.  It is not so complicated and extensively documented, in case you have any question. Please spend some time go  through the code. It is as basic as it can get. 

Lets walk through anyway.  

Line #1 - we import all angular's 1 typings. 

Line #5 - we declare an interface ISimpleSearchScope for the scope (this is the $scope - that you would use in angular1), just so we can put some intelli-sense to our code. :)

Line #11 - is where we define our SimpleSearchDirective. It inherits from ng.IDirective. 

Line #12 - binds a controller to our directive. If we do not do this, Search() function will not work but your, filter expression will {{}}. Just so we know the difference. 

Line #14 - controllerAs gives our controller a different name. 

Line #24 - is really a helper method which be used on line #26 to expose our directive. 

Line #32 - Is our controller and noticed we used 'ISearchSimpleScope' in our controller, so we can be sure we are working with the correct properties. In this case, it is called 'SearchResults' and 'SearchText'

Line #46 - We got pretty much all our component up and running, now it is time to load it with Line #49. 

What would our html look like? Well it looks like this..... 

Some development notes 

If you take out line #35 ->  static $inject = ["$scope"]; .you can be sure, you control is not going to work. Please make sure you have your angular1 other external dependencies specified here, like $http, $scope and etc.

Unit testing SimpleSearch controller 

Let's go ahead and create our unit test for SimpleSearchController. We will  use angular-mock for properly creating our. As you can see, we are using rootscope to create our scope instance. Even though this is scope instance, but we do have access to our 'SearchText' and 'SearchResults'.


Popular posts from this blog

Android Programmatically apply style to your view

Applying style to your view (button in this case) dynamically is pretty easy. All you have to do is place the following in your layout folder (res/layout)
Let's call this file : buttonstyle.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=""> <item android:state_pressed="true" > <shape> <solid android:color="#449def" /> <stroke android:width="1dp" android:color="#2f6699" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#449def" a…

DataTable does not have AsEnumerable

I have problem locating my AsEnumerable extension method in my DataTabe (System.Data). Thank god for this post by Angel

I was able to find this method once i have added reference to the following assembly.

C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Data.DataSetExtensions.dll

Try to do a dummy Build and you should be able to get it.

OpenCover code coverage for .Net Core

I know there are many post out there getting code coverage for .dotnetcore. I'm using opencover to address this needs.

In case, you do no want to use opencover and wanted to stick with vs2015 code coverage, you can try to copy Microsoft.VisualStudio.CodeCoverage.Shim.dll from C:\Program Files (x86)\Microsoft Visual Studio 14.0\Team Tools\Dynamic Code Coverage Tools\coreclr\ and drop it into your project "bin\Debug\netcoreapp1.0" folder.  Please note : you need to be on VS2015 Enterprise to do this. 

To get started, I guess we need to add OpenCover and ReportGenerator for our test projects, as shown in diagram below :-

When nuget packge gets restored, we will have some binaries downloaded to our machine and we going to use this to generate some statistics. I think the biggest issue is to getting those command lines work.

In dotnetcore, we run test project using "dotnet test" (assuming you are in the test project folder - if not please go there)  So we add this …