Tag Archives: learn

Passing State Parameters

By | November 28, 2016

In the last tutorial we have seen a new State but it just navigated us to a new Page with text “More”. So in this tutorial we are going to see how we are going to display the “More” page with bigger image of the car and the description of the car and as well a “Back Button” for going back to home page. Well, I am going to break the above work in three steps.

Creating the page navigation using states

By | November 28, 2016

After all the work done in the last two tutorials we are about to do the real stuff which we need to do. In our app on the right side we always see the description of the car and now we are going to include a button labeled “More” and on click of the “More” we are to navigate to a new page. Let’s do that one by one.

Removing # Tag in the AngularJs Project url

By | November 28, 2016

In the last tutorial we have seen there happened to be a change in the url. The url changed from to . This change is because of the introduction of the ui-router and its default state mechanisms. By default ui-router uses # tag for navigation and this behavior needs to be overridden. To bring back to the normal url without # tag we need to implement the following steps.

Setting up Navigation to Angular Js Project

By | November 28, 2016

Angular is mostly used for SPA (Single Page Application) but still every app requires some kind of navigation from one view to other view. Take our very own application here we navigate now on click of click of the images we populate the description on the right hand side. What if I need a button in the right hand side labeled “More” and on click of the “More” I need to go to a different view/page completely without hiding or showing something. Does Angular has any tricks up in the sleeves?

Using ng-repeat and doing things dynamic

By | November 28, 2016

In this tutorial we are going to see how to use ng-repeat in our newly created directive and create a dynamic list of <car-details> directive. Great, in our previous blog we just created one <vide0-details/> and provided it with one image source and a title. What if we need to show many images with title more like a car thumbnails with caption in car galleries. We could go ahead and create many instances of <car-details/> like below

Improvising our Simple Directive

By | November 28, 2016

In this tutorial, I am going to improvise the directive which we have written in the previous tutorial.

app.directive('carDetails',function(){     return{         template:'<div>My Car</div>'     } });

If you see the above code, we have an attribute template which is responsible for rendering the My Car string inside the div over the browser. Great, what will happen if our html content becomes bigger? Well Angular provides an unique way of downloading a template during the directive rendering using a feature called “templateUrl”. If we pass a html template file url in the place of the templateUrl this will get magically loaded when the DOM gets loaded and the directive gets initialized. To do that first we need to create an html template. Lets create an html file called cardetails.html under templates folder and add the code below.

Car Gallery – AngularJs simple Project

By | November 28, 2016

Well so far we have brushed the basics of Angular and its very minimal basics and now I want to create a Sample project to illustrate the rest of the features of Angular to get a better perspective of the framework. Great, I am thinking of creating a Small Application, which will display some cars and its description. This application basically creates a list of cars with titles below and its description on the right hand side with a “More” button. By end of this tutorial you will get a clear understanding of Angular Services, Custom Directives, routing and of course how to use and mix various components of angular in to one application.

Two way data binding using ng-model

By | November 28, 2016

Great, so far we have seen binding data with views using double braces {{}}, ng-model and onClick assigning it to $scope variable which is binded in the html. This example is going to illustrate the two way binding. To better illustrate that how about we just have a text input and any value entered in the text input should be auto populated on top of the text input.

Data Binding and ngEvents

By | November 28, 2016

So as per our last blog, we have bootstrapped Angular and now we will start writing some code for beginners. If you take any UI there will always be user actions. So we will start wiring some of the user actions. Before getting in to code its important to understand there are several inbuilt ng events bundled with angular. So in this example we will how we handle a click event in angular and update some data on click of a button.

Chapter 3: List all HTML common file extensions of web pages

By | November 9, 2016

We have learned how a simple web page can build. Now in this section we will learn what files extensions in a web page are. Most of the web pages runs on UNIX web server like Marcs, which do not require file extension, only filenames are enough for disguising between the files. File extension is key to recognize which of file and format running in that file. How will the server uses and access it.