Recently, I came to know that the free and open-source distribution of Kendo UI news also ships AngularJS with it.
FYI : Kendo UI core now ships with Apache 2 license and not GPL.
We all know that Kendo UI is a full front-end framework. That means that it has all of the UI widgets. And I had been using Kendo with MVC in the past. The trend has been changed a bit fellas ! Since few months, I had been working on Web API, MVC, bootstrap and AngularJS — pretty popular stack now a days. Anywhere you need a page, use a MVC controller and views, whereas for CRUD operations basically one may use Web API controllers ( async calls ) with HTTP verbs.
Now, the marriage b/w AngularJS and bootstrap seem to be seamless for the client-side / GUI design point of view. But
- since Q3 2013, Kendo UI had started integrating with bootstrap.
- Kendo UI announced ‘Angular Kendo UI’ ( Monday, June 24, 2013 ) !
I’ve gone ahead of the time created a public GitHub repository and also wanted to spin it up to web-app
- You can follow along and/or refer to my code on GitHub for your reference or feel free to clone it !
- I’m spinning this app on AppHarbor : http://ngkendo.apphb.com
So, what are you waiting for now ? Let’s get our feet wet in the water.
- Fire up your Visual Studio IDE, and meanwhile …
- Alright, now File — > New Project — > ASP.NET web Application — > Call it “ ” — > Select MVC + Check Web API.
- We also need to add two more class libraries to the solution. Let’s call them “ ” and “ “.I used to generate POCO classes from Northwind using EF 6’s code first approach in ~/ /DB folder.I also went ahead and created few data-contracts in /DataContracts. All these data contracts implement IDataContract interface that I created in the root of this project. ( You can put them in Model directory too, you want ! )Next, I created IDbContext interface and renamed Northwind.cs to NorthwindContext.cs in NorthwindEntities/DB folder. I also implemented IDbContext interface on this class.Cool !
- (You sure can stream line this using Nuget package manager but I’m personally li’le savvy on what and how much dead code lives on my server like all those css theme files that I’m not gonna use etc)Now go to ‘content’ directory of your application, and create a folder ‘kendo’ (~/
/content/kendo). Then go to the extracted kendo ui core folder and go to ‘styles’ folder. Copy following and stick them in ~/ /content/kendo :
- Default folder ( Theme )
- Textures folder
- Kendo.default.min.css ( Theme )
- Now, the scripts. Create ~/
/Scrtipts/KendoUI and copy following from extracted folder’s js directory :
- Almost there. Go to View/Shared/_Layout.cshtml and now add these css and js files:
- Are we there yet ? Well nope. There is one sneaky thing that might surprise you. Though ~/ /App.config has the right connection string that NorthwindContext.cs is expecting, remember that the is the main project. You’ll need to copy the connection string to the main project config file. Otherwise you might get an error : No connection string named ‘MyEntities’ could be found in the application config file. stack overflow question
All set ! The project is now ready to be worked on.
There may already be some templates for visual studio which should do all/most of Kendo UI configuration for you but I haven’t tried any, yet.
Now, we’ll start codin’. We’ve KendoUI, AngularJS backed in with MVC, Web API, SQL Server, and EF 6.0 (Still on 4.0? run PM> Update-Package EntityFramework in package manager console if you wish to upgrade).
So you can potentially drive from here, but wait ! At this point you’ve 2 main options :: [ read more on telerik ]
- Traditional approach — self explanatory
- Using the data-bind syntax with MVVM
- Using data- syntax with declarative approach
- AngularJS approach — add kendo to AngularJS rather AngularJS to kendo
1) Traditional Approach
I’d brief this one but, more could be found here on official demo page.
Now let’s go to MVC view folder for /Home/Index.cshtml and replace the code with following:
Let’s run the app & … Voila ! You see a date-picker
2) AngularJS approach
I can assume you’ve some intermediate / at-least basic knowledge of AngularJS, right?
I prefer to create a separate folder in ~/LearnKendo/Scripts called App, as I like to have all my scripts at one spot. You can probably tell that I’ve gone ahead a little & created couple sample files.
First things first, bootstrapping AngularJS. App.js would be our module, I called it ‘app’
If you’re working on a large application this might be basic and raw, very raw version of your AngularJS module
Next, home controller js …
Next, we’d these files’ references to MVC view file /View/Shared/_Layout.cshtml as following. And yea, don’t forget to bootstrap Angular with “ngApp” attribute of the body tag … and un-comment the AngualrJS reference script tag!
Finally, we need to update our view as following:
You see a date picker & also you see a date value above it. But wait, what happens if you change the date ?
As you might expect … the dates above change instantly all to-gather. AngularJS’s 2-way binding babes, … forget the observables !
fruit of our labor :
Awe right… back in the business layer. Finally, the customerService.js calls the following Web API endpoint ( or like I lately changed it in my code, you can also use another OData Service or whatever in your service. In my case I am using a query from http://filltext.com )
( I also like to keep MVC and Web API controller in separate namespaces … “Separation of concerns” you see! 😉 )
At the time of reading this you mostly would have a source code available ( githhub ) so you might download it from my git repository. So you can always investigate if something is teasing your buds. I’d go ahead and give you some quick explanations.
Thanks to _ApiBaseController.
This class is in turn being derived from ApiController. It sits in ~/LearnKendo/Controllers/API. It also has a public member “IDbContext repository;” (IDbContext is an interface I added at ~/NorthwindEntities/DB/ directory) … if you’re still finding a clue about the existence of class _ApiBaseController ? Short answer : for removing the dependency for unit testing. But you can do the way you like / prefer.
So to test the query above in Customer Web API Controller, you can either run the project and navigate to http://localhost/LearnKendo/api/Customer or if you’re not using the Local IIS, just append /api/Customer.
In the later the case, your URL might look like http://localhost:49267/api/customer
Start building your web app, after all “the web is what you make of it” !