Home / Tag Archives: learn

Tag Archives: learn

Bootstrapping AngularJs 1.5: Step by step tutorials

The Complete AngularJs tutorial

Here you can learn angularJs 1.5 step by step. This tutorial will cover how to create Bootstrapping AngularJs project and learn to write custome directive, services, controller, ui-router concepts, Data Binding and ngEvents and Two way binding using ng-model. Demo is available for Each steps and download the tutorial for each demo.

Read More »

Passing State Parameters

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.

Read More »

Creating the page navigation using states

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.

Read More »

Removing # Tag in the AngularJs Project url

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.

Read More »

Setting up Navigation to Angular Js Project

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?

Read More »

Using ng-repeat and doing things dynamic

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

Read More »

Improvising our Simple Directive

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.

Read More »

Car Gallery – AngularJs simple Project

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.

Read More »

Two way data binding using ng-model

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.

Read More »