AngularJs #02 How To Use The Directive ' ng-src and ng-repeat ' ( Tutorial )

Image Source

What Will I Learn?

I will learn how to use the ng-src to fix the 404 error of sources and how to use the ng-repeat.

• How to use the ng-src
• How to fix the error .
• How to use the ng-repeat

Requirements

• Basic Knowledge of HTML language .
• Basic Knowledge of JavaScript language .
• Has an editor text support HTML and JavaScript .
• Must has the angular files from the official site .

Difficulty

• Basic

Tutorial Contents

In this video we will discuss how to use the ng-src and why we use it ?

• Using a binding expression with the image src attribute , result is an 404 error .

Here I added the source correct which is the direct directory of the picture , in the folder images , the name of the image point extension , and this is the result ..

The picture appear successfully , the browser will go to the server which is my device and choose the image from the folder , but if we want to generate the image with the angularJS to be dynamically , what we will do ?

I have created a complex object which contains the language name , the language image and the width of the image , I did it to be dynamically and to import all these informations by the binding expression by this proprieties .

In the HTML file , the ' src ' is equal to the binding expression {{ nameOfObject.nameOfPropriety }} to get the value firstly of the directory of the image and the name and the width , this is the result :

Great the picture appear successfully , so the source of image was imported from the angular page , is it correct ? No sure !

The problem is 404 the file not found , how ? but the image display what's the problem ?
The problem is the source it's not a valid source , when we create the src attribute the value it must be a directory a valid source of file that the browser can import from the server with a request but now it will find a binding expression so the file doesn't exist for this reason it gives us this error .
The question is , if the browser can't find the image because of the wrong source , how it displays ?
Great , when the browser find the binding expression {{source }} it will execute the source inside the braces , when it executes the expression it will import the value of the propriety of the object that I have created , so it will do two requests , the first is the src normal it will find the binding expression , it must import the value so this is the second request , after two request the image will display ..
How to fix this Error ?

By the directive ' ng-src ' , this directive will go directly to the angular application and execute the binding expression in just one request , so it will fix the error and minimize the number of requests and skip the valid source from the HTML and this is the result :

As you see now error on the console , so our problem fixed and you can import sources dynamically without any problem .
Now I will talk about ng-repeat directive which is similar to foreach in other languages like PHP , C# ..etc .
I will give you an example how to use it , firstly I will create a complex object for example for students

I have created an array inside this array I have some objects each one has these informations ' First Name , Last Name , Gender ' , I will to display them in a table HTML by the ng-repeat

I have created a table has two table rows in the HTML file , the first is the title of our cases , the second table row has an attribute ng-repeat and the value is ' studen in students ' what means student in students , When I created my array in angular if you remember I named it ' students ' , each element in this array named student without ' s ' means it's an element of this array when we write student in students the angular will execute this expression and display all elements as the form that you created in HTML file , and this is the result .

I will now give you another example to display countries from the angular by just one line as I created before ..

I have created an array named countries , each country has name and array of cities , each city has a name , I want to import them in list ..

I have created list in the list item I put the ng-repeat which is country in array of countries this is the repeat also in each country I have cities so the second list in list item I have city in each country and I imported them by the binding expression

This is the result of this array .
To find the index of an item in the collection use $index propriety , and to get the index of the parent of our element you can use $parent.index

and this is the result of these codes ..

Curriculum

AngularJs #01 Installation of Module , Create and Use Controller , Use Directive ' ng-model ' ( Tutorial )

---

Posted on Utopian.io - Rewarding Open Source Contributors

---