Tag Archives: AngularJS Tutorials

YouTube V3 API to get single Video Information using Angular JS

By | January 7, 2017

In my recent comment box one of my reader asking me to create a demo for the YouTube single video snippet using AngularJS ui-router. I have already created the tutorial and demo for YouTube single video snippet using core JS and with using jQuery (link). I have created the tutorial again using AngularJS for my reader who requested… Read More »

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 http://127.0.0.1:58586/index.html to http://127.0.0.1:58586/index.html#/ . 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?

Adding Contents to the AngularJs App and making this app looks more like an App

By | November 28, 2016

Great, I am going to make this app more like an usable application and right now what we are displaying is just a list of cars and its names and we have got the whole right side of the application empty. I think of putting that space in to a more usable one. Well what we can do???????????

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.