XML FeedsIntroduction
It's superbowl Sunday and between the snacks it is time to learn something new. Today my eye fell on Angularjs. Angularjs is an MVC framework for javascript. It kinda puts the controllers and model on the clientside and not on the serverside like ASP.Net MVC does. I will use Nancy as our service to provide us with json data.
Server
Our server is pretty simple.
Just make an empty asp.net application and add a Models folder.
Here is my model.
- using System;
- namespace NancyJTable.Models
- {
- public class PlantModel
- {
- public int Id { get; set; }
- public string Name { get; set; }
- public string Genus { get; set; }
- public string Species { get; set; }
- public DateTime DateAdded { get; set; }
- }
- }
And here is my module, which I put in the Modules folder.
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using Nancy;
- using NancyJTable.Models;
- namespace NancyJTable.Modules
- {
- public class PlantsModule:NancyModule
- {
- public PlantsModule()
- {
- Get["/plants/{Id}"] = parameters => Response.AsJson(GetPlantModels().SingleOrDefault(x => x.Id == parameters.Id));
- Get["/plants"] = parameters =>
- {
- return Response.AsJson(GetPlantModels());
- };
- }
- private IList<PlantModel> GetPlantModels()
- {
- var plantModels = new List<PlantModel>();
- for (var i = 1; i <= 25; i++)
- {
- var j = i.ToString("000");
- plantModels.Add(new PlantModel()
- {
- Id = i,
- Name = "name" + j,
- Genus = "genus" + j,
- Species = "Species" + j,
- DateAdded = DateTime.Now
- });
- }
- return plantModels;
- }
- }
- }
Client
First I added another empty ASP.Net web application project to our solution.
I added angularjs to my project. It is on nuget so no problems there.
I want to add a list of plants and I want a details page.
First I need to start with adding my app.j in the js folder. This will take care of the routes.
- angular.module('plantsapp', []).
- config(['$routeProvider', function ($routeProvider) {
- $routeProvider.
- when('/plants', { templateUrl: 'partials/plants.html', controller: PlantsController }).
- when('/plants/:Id', { templateUrl: 'partials/plant.html', controller: PlantController }).
- otherwise({ redirectTo: '/plants' });
- }]);
You already see that I have two partial views and 2 controllers.
The controllers are in my controllers.js file.
- function PlantsController($scope, $http) {
- $http.get('http://localhost:59025/plants').success(function (data) {
- $scope.plants = data;
- });
- }
- function PlantController($scope, $routeParams, $http) {
- $http.get('http://localhost:59025/plants/' + $routeParams.Id).success(function (data) {
- $scope.plant = data;
- });
- }
So I have a Plantscontroller that uses a get to get my json from my nancy service. And I have a PlantController that uses the routeparameter to tell which plant to get from my service.
See how I inject http and how it magically gets injected for me.
The next thing is to create an index.html which is the base of our views.
In the html tag I added an ng-app with the name I provided in my app.js.
I import angular.js, controller.js and app.js.
And I added a div with an ng-view attribute.
Now I need the partials which I put in the partials folder.
This is my plants.html file and it uses the plants object which I have added to the scope in my controller.
See how I add the link (the # is important).
The next file is the detail view, plant.html.
Here I use plant because that is what I used to add the the scope in my controller.
And that is it.
Here are the screenshots. Look also at the url in the addressbarr.
The plants.
And here the detail view.
Conclusion
Yeah, uhm. Not sure. Not saying this is bad, but how will this scale ;-). One thing is for sure, the documentation was very good to get my started. Not that I read it before beginning but once I did, it helped.
Chris is awesome.
Framework fatigue didn't kick in yet? 
Oh yeah. I wish someone had a monopoly and take over this damn mess we call programming. 
Nice work. I've been reviewing Angular myself. One thing you could do is make a separate service or repository if you will and that can get injected into your controllers! 
IF you use $resource instead of $http, you get a higher-level abstraction and you don't have to deal with any of the HTTP calls. 
One feature worth elaborating on is Angular's HTML5 mode. That allows any browser supporting the history API to ditch the hashbang and use standard URL paths with the option to gracefully fall back. 
Ive googled this all day and haven't been able to get around this error. Closest Ive gotten was using jsonp instead of $http. Is there something I need to configure or set up to get this to work in local development and on a server.
LTD Social Sitings
Note: Watch for social icons on posts by your favorite authors to follow their postings on these and other social sites.