w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home AngularJS Tutorials

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

Veerappan Vairavan by Veerappan Vairavan
December 17, 2020
in AngularJS Tutorials

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???????????

Ok lets try to put some contents related to the cars. In this section I am going to display some description of the car when clicked on a car.

You might also like

Passing State Parameters

December 17, 2020

Creating the page navigation using states

December 17, 2020

First thing I would do is to set up the data part in the scope. In the last tutorial itself we have cars in the scope of mainController and I am going to add one attribute to car object called desc [which I have copied from Wikipedia].

$scope.cars = [                {url:"https://static.pexels.com/photos/24353/pexels-photo.jpg",                 name:"SHELBY",                 desc:"The Shelby Mustang is a high performance variant of the Ford Mustang which was built by Shelby from 1965 to 1968, and from 1969 to 1970 by Ford. Following the introduction of the fifth generation Ford Mustang in 2005, the Shelby nameplate was revived as a new high-performance model, this time designed and built by Ford.[1]"},                {url:"https://static.pexels.com/photos/28993/pexels-photo.jpg",                 name:"BMW",                 desc:"BMW was established as a business entity following a restructuring of the Rapp Motorenwerke aircraft manufacturing firm in 1917. After the end of World War I in 1918, BMW was forced to cease aircraft-engine production by the terms of the Versailles Armistice Treaty.[5] The company consequently shifted to motorcycle production as the restrictions of the treaty started to be lifted in 1923,[6] followed by automobiles in 1928â29"},                {url:"https://static.pexels.com/photos/116675/pexels-photo-116675.jpeg",                 name:"LANDROVER",                desc:"Land Rover is a car brand that specialises in four-wheel-drive vehicles, owned by British multinational car manufacturer Jaguar Land Rover, which is in turn owned by India's Tata Motors since 2008.[4] The Land Rover is regarded as a British icon, and was granted a Royal Warrant by King George VI in 1951"}               ];

Cool, we got the data part ready and we need to wire our ng-click event from the mark up to the controller. Let’s write our ng-click event in our index.html like the below

<div  style="float:left;margin-right:10px">   	<car-details ng-repeat="car in cars" src="{{car.url}}"  title="{{car.name}}" ng-click="onSelect($index)"></car-details> </div>

Well I am not surprised if you know the ng-click and its behavior, since we have tied the ng-click with whole car-details directive any click both on the image or the title text will fire ng-click. So you may be asking what’s the $index ?

$index is an inbuilt angular service which is used along with the ng-repeat directive to find the current looping index so that the developer need not find a way to get the current index. So on every click we are passing the $index as a parameter to click handler. So how its handled in the controller.

mainController.js

$scope.onSelect = function(index){        $scope.desc= $scope.cars[index].desc; }

Very simple create a function and attach it to $scope’s onSelect which you have created just in the above code. Inside the function create one more variable in $scope called desc which is equated to the selected index of the cars array. This will fetch you the desc of the current selected car. Great now you have selected car’s description from car’s array but no effect on the display. You are right you need to bind the desc in the html like below

Index.html

<body ng-app="appViewer" ng-controller="mainController">         <div  style="float:left;margin-right:10px">              <car-details ng-repeat="car in cars" src="{{car.url}}"  title="{{car.name}}" ng-click="onSelect($index)"></car-details>         </div>         <div>             {{desc}}         </div> </body>

Now you will be seeing the user interface like below since I have selected the second car it shows the desc of BMW below

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

But there is one problem here, which is first time when we refresh the browser there wont be any description this is because we are creating a $scope.desc only on click handler so to have a default description of the first car lets do some thing like the below.

mainController.js

$scope.desc = $scope.cars[0].desc;

Add this one line in the mainController, this will get the 0th car’s desc to desc variable in scope which will get automatically reflected because of our {{desc}} in the index.html.

All right now in this tutorial, you have learnt how to add the content navigation. This is a basic way in angular we deal mostly with data and not with DOM manipulation. Any DOM Manipulation has to be done inside the directive’s link function which we will discuss in a different tutorial.

Download Demo

Tags: angular jsAngularjsAngularJS Tutorialstutorialtutorials
Previous Post

Using ng-repeat and doing things dynamic

Next Post

Using AngularJs Service to fetch data

Veerappan Vairavan

Veerappan Vairavan

Related Stories

Passing State Parameters

by Veerappan Vairavan
December 17, 2020

In the last tutorial we have seen a new State but it just navigated us to a new Page with...

Creating the page navigation using states

by Veerappan Vairavan
December 17, 2020

After all the work done in the last two tutorials we are about to do the real stuff which we...

Removing # Tag in the AngularJs Project url

by Veerappan Vairavan
December 17, 2020

In the last tutorial we have seen there happened to be a change in the url. The url changed from...

Setting up Navigation to Angular Js Project

by Veerappan Vairavan
December 17, 2020

Angular is mostly used for SPA (Single Page Application) but still every app requires some kind of navigation from one...

Next Post

Using AngularJs Service to fetch data

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools