Press ESC to close

We found 0 resources for you...

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.

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

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.

Why I learnt Angularjs?

I started my career by developing Rich Internet Applications using Adobe Flex. Flex is an extremely amazing language in terms of bringing modularity to the code extending the object oriented concepts but unfortunately the popularity of flex got reduced due to a lot of reasons which I don’t want to talk in this blog. So being a UI developer my next best thing was to learn HTML5 ,CSS and JS which sounded really confusing to me as there were no defined approach for writing js variables, methods , accessing and manipulating DOM whenever and wherever sounded little too much for my background but some how I mastered the HTML,CSS and JS as those were the fundamentals of any JS Frameworks. When I heard about Angular, I was really happy that it brings a lot of features, which sounded like a more refined way of developing UI applications.

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

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.