Basic AngularJS with Routing [Part 3]

In my first blog, Basic AngularJS with Routing [Part 1], I discussed AngularJS Controllers with examples. In the second blog, Basic AngularJS with Routing [Part 2] I delved into Directive and Services. In this blog, I will deep dive into Routing.

What is Routing?

At a high level, here is what Routing is all about. You are building an application and you cannot put all the functionality that you need into a single controller in a single view. You have different features and you need different areas inside the application. That is going to require multiple views, multiple controllers. Each view and controller is responsible for a specific feature or area of functionality, and now that you have functionalities spread around, how do you know where the user is located in your application, how do you know what is supposed to be on the page, what are they seeing? Are they trying to view the details about a user, or are they trying to view the details about a repository for some user? And the first question is; how do I know the location of the user?

While the browser does have the concept of a URL, a Uniform Resource Location that is what appears in the address bar. We usually think of the URL as a way to reach some resource on the server, but when building an application with Angular, you can also start thinking of a URL as being able to locate the resource on the client too.

Routing with Angular

Here is how Routing works with Angular. First, we are going to need another script from the Angular code base; it’s called angular-route.js. This will give us access to a new module, a module that our application module will need to take a dependency on; this new module is called ng-route. Using a component in ng-route, we will configure our routing rules into the routing engine. Remember, this is where you describe the URLs for your application. You have to tell the routing engine how it should respond to a particular URL that appears in the browser. With ng-route, this is done using a component known as $routeProvider. It has an API where you describe what the URL looks like and then what to do for that URL. For each URL you can specify a templateUrl that is the HTML that Angular has to go and find and load up for that route, and then optionally a Controller that should be used to manage that template. And because the routing engine has to take that template and load it into the display, we are going to need to reorganize our application and our default.html file.

Our default.html file will become what some people call a layout view, or a shell view. A layout view is a view that contains the markup you will use on every page of your application. It might include some common features, like a navigation menu at the top that’s going to appear everywhere in your application, and perhaps a foot at the bottom that contains links to contact you and a copyright, but there will be space somewhere in that layout view, where the routing engine can load a template that corresponds to the current URL.

So let’s say we have two templates available; one to display userDetails and one to display repository details. We will tell the routing engine where to place these templates using a new directive, an ng-view directive. We will use that directive on an HTML element and it is that HTML element where Angular will insert the template when we’re at the right URL. And now, as the user clicks and navigates and enters information and saves information, the routing engine will swap out one template with another template inside the shell view, and our application is now scalable; it can support any number of templates and controllers. The routing engine is going to swap them in and out. When it does that, it will also coordinate with the browser history, so that if the user hits the Back button or the Forward button, they will still be navigating just inside of your application. So we have a little bit of work cut out for ourselves, but let’s try this out now.

Step1: provide link to angular-route.js in layout page

Configure routing

The first thing I will do is make sure I go out and add, that angular–route script that I can find if I do a Search for angular-route. Now you notice I get a couple Search results here, angular-route and angular-router. It’s angular-route that I want, it has the most up-to-date version of angular-route. I’ll just click the button, and that will add an additional script file for me in my page. This one going to code.angular.js, and it’s picking up angular-route.js. And now that we have that script included, the next step would be to set ourselves up so that we can configure the routing engine. One place we could do that, is inside of script.js where we create a githubViewer module, but script.js is already a little bit full. It’s really where we have MainController defined. So I would like to remove the creation of this githubViewer module from script.js and move it to the new file where we will create that module and also add the configuration. So, create a new file, this one I’ll call app.js because this is really what’s going to define the application, and it’s inside of here where I can have an IIFE, where I can have a line that will define the module, and what we’re going to find is that we can run and register configuration functions against our application, and inside of this configuration function where we can define our routes. And now that’s cleanly separated out from script.js, which is just going to get a reference to githubViewer.

Step2: Define the user for different controllers and views

Step3: On search of username, route to another controller “UserController”

Step4: In UserController define the logic to get the user details.

Output:

Summary

In the three blogs, we saw how Angular is a framework for building applications with HTML and we took a look at the primary components involved, including Controllers, Models, and Services. In this last blog of the series, we looked at Routing in detail. The primary takeaways for Routing are that Routing allows you to build navigation into your application and it also allows you to build an application from smaller pieces. You can divide responsibility for your features amongst multiple controllers, models, views, and services.

Basic AngularJS with Routing [Part 2]

In my last blog, Basic AngularJS with Routing [Part 1], I discussed AngularJS Controllers with examples. In this blog, I delve into Directive and Services.

Directives – Introduction

We have used some Directives previously with Angular, i.e. Directives such as ng-app and ng-controller. Now, in this blog, I want to show you a few other useful Directives, like the Directive to handle button clicks and the Directive to move user input into my JavaScript model. These Directives allow you to build interactive webpages that not only display data, but also react to the user and become a little more dynamic. We will build something that lets the user search, sort, and browse code repositories.

ng-model, ng-click

Output:

ng-repeat

Output:

ng-show and hide

If user model is not empty then user details will be displayed.

Services

A service in Angular is a component that performs a specific job, like providing a timer, or providing the ability to communicate over HTTP. We have seen that component and used it; it is the $http service. Services are very important concepts where it will be initiated only once for an application.

Basic AngularJS with Routing [Part 1]

AngularJS is a JavaScript framework you can use to build applications, but run in a web browser using HTML. The AngularJS framework started as a project inside of Google, but it’s now an open source project.

An Angular Application

There are only two requirements for adding AngularJS to a web page. Firstly, you need to add a <script> tag pointing to angular.js. Angular.js is the only script file that you need for the core Angular features, because Angular has no other dependencies on other libraries. This is the only script file we need, except for the script files that we might write for ourselves.

The second requirement is that you need to add an ng-app attribute somewhere in your HTML.ng-app. In Angular terminology, this is called a Directive, and it is just one of many Directives that Angular provides. The ng prefix is short for Angular. So whenever you see ng in your code or in documentation, or in a website name, or a bumper sticker, think Angular. ng-app is what we call the Application Directive. It is a special Directive that Angular looks for inside of your HTML, and if it finds it, Angular will bootstrap itself; so it initializes itself and it jumps into action to start managing the page.

Controllers

Controllers are one of the central pieces of the Angular framework, and in working with Angular, Controllers are in charge of an area of the application. With Angular, a Controller is in charge or responsible for building a model. A model contains the data we need to work with and a Controller will do whatever it needs to grab that data. So it might need to make some calculations or call back to a web server that talks to a database, whatever it takes.

In this blog, I will show you how to build a controller that is able to build a model, and then we will be able to use data binding to show that model in a view; the view is the HTML for our webpage.

It is good to use IFFE while writing any java scripts. Controllers take $Scope object and attach model to it.

Calling HTTP

When we’re writing code inside of a Controller, we usually don’t just make up our data, like we are doing with the person object in the last clip. We need to fetch data from our web server, and our web server might need to talk to a SQL database to send us back the data we need, or it might talk to a no-SQL database, or XML files on the server’s disk; we really don’t care. We just need data from that server, so we need a way to communicate with the server, and this is the job of the $http Service in Angular. HTTP is a service that Angular provides, and this service is just an object, an object with methods I can use to make HTTP calls.

Using $http

The API I want to use in my demo is the GitHub.com API, and I do this for three reasons; the GitHub.com API has three characteristics, which very few real APIs with real data have.

  1. the API is available to call from JavaScript in a browser.
  2. the response is in JSON format, which is easy to consume from JavaScript. In fact, Angular’s $http service will automatically convert a JSON response into a JavaScript object for me.
  3. the service does not require you or me to sign up and provide authentication credentials or some sort of client or application key, making it really easy to use.

If this blog was useful, don’t miss my next blog in which I will discuss in depth Directives and Routing in Angular JS.

Want to know the importance of Fluent Interface & Method Chaining in C# ?

Want to simplify your class consumption code by making your code more simple, readable and discoverable ? Want to really please your people who consume a component with interfaces which are more signified than this, what will you do about it ? Let’s start with understanding Fluent Interface and Method Chaining. 

Fluent interface” is a specialized, self-referencing form of method chaining where the context is maintained through the chain.

Method Chaining” is a common technique where each method returns an object and all these methods can be chained together to form a single simple statement.

These concepts are very much related to each other, one is concept and other is an Implementation to that concept.

Oops is a most accepted way of designing and programming in c# and these oop has two aspects, One aspect is where developer goes and creates the class and actually exposes properties and the other aspect is where a consumer actually creates the object of the class and tries to use that class.

Ex: simple student class, these part can be created by some developer using oops principles like abstraction, encapsulation and ensure interfaces are simple.

internal class Student

{

public string FullName { get; set; }

public DateTime Dob { get; set; }

public string Address { get; set; }

}

Most of the time creator and consumer both are the same persons, same developer creates and uses it, but there can be situations where consumer and creator are different people (UI developer and backend), like component selling companies like Telerik, Infragestics etc. creator and consumer are different.

Student student = new Student();
 student.FullName = "Jhon";
 student.Dob = Convert.ToDateTime("1/1/2010");
 student.Address = "Bangalore";

Setting properties like Full Name Last name if you ask any oop C# developer, he will say no this is not complicated this am doing day and night.

Suppose think about if the consumer of this call is unit test developer, a person is doing unit test on your class and he really does not understand c#, or think you are a component seller and you really want to please your consumers or you want to really please your people who consume a component with interfaces which are more signified than this, what will you do about it. That’s where exactly fluent interfaces come into picture

“Fluent interfaces simplify your class consumption code by making your code more simple, readable and discoverable.”

For instance over here where we are creating a student object by using the new keyword and you know doing lot of things if can do something like this say like this customer dot Name()

//Student.NameOfTheStudent(“xyz”).BornOn (“1/1/2010”).StaysAt(“CityName”)

So If I can make or create such kind of Interface where It is like a speaking a sentence that would really make my class consumption code more simplified and more readable.

To achieve this thing we have something called as method chaining.

“Method Chaining” is a common technique where each method returns an object and all these methods can be chained together to form a single simple statement.

Ex: Student.NameOfThePerson ().Borm.Stat etc.

So inorder to implement method chaining what will do is we will create a wrapper class around this customer class and will hide those complicated properties and that wrapper class will emit out fluent interface and the consumer can interact with via the Fluent Interface.

Let me go ahead and create a class the “StudentFluent” and wrap the Student class. Next step is to create a fluent Interface, Let start with first fluent interface method name that is name of the student,

public class StudentFluent

{

private Student obj = new Student();

public StudentrFluent NameOfTheStudent(string Name)

{

obj.FullName = Name;

return this;

}

public StudentFluent Bornon(string Dob)

{

obj.Dob = Convert.ToDateTime(Dob);

return this;

}

//final method should be of type void

public void StaysAt(string Address)

{

obj.Address = Address;

}

}

let’s go and create a method here called NameOfTheStudent and this NameOfTheStudent will take studenName, Now in order to ensure this method actually becomes a part of the method chain we need to ensure that this method actually exposes out StudentFluent class, why because we would like to have a method chain like this NameOfThePerson, Borns, Stays at etc..

When to use this Fluent Interface and method chaining,

  • During Unit testing when the developers are not full fledged programmers,
  • You want your code to be readable by non-programmers so that they can understand if the code is satisfies their domain logic.
  • You are component seller and you want to stand out in the market as compared to the others by making your interfaces simpler.
  • You are creating a DSL language is mapped with fluent interfaces statements.

Overall, we have an effective pipelining in C#. Pipelining is a powerful technique that lets data flow through the system in a declarative manner. By leveraging higher-order extension methods we can improve upon existing fluent interfaces or provide chaining capabilities throughout C#. We can even use higher-order static methods to convert some of the language’s statements into expressions thus extending the chaining capabilities even further. This approach doesn’t get us to the capabilities of what “true” functional languages like F# provide but it certainly makes working in the often imperative world of C# a bit more bearable to those of us used to having those tools at our disposal.