Suggested Videos
Part 1 - What is AngularJS
Part 2 - Angular modules and controllers
Part 3 - Controllers in AngularJS
(追記) (追記ここまで)
In this video we will discuss the use of ng-src directive in AngularJS
(追記) (追記ここまで)
Let us understand this with an example : We want to display the name of the country, capital and it's flag.
angular ng-src vs src
AngularJS Code : The controller builds the country model. The flag property of the country object has the path of the image.
HTML Code : In the view we are binding country.flag property with the src attribute of the image element.
When you view the page in the browser, the country details and the flag are displayed as expected. The problem with the img src attribute is that we get a 404 error. To see the error, launch the developer tools.
Let's now understand the reason for the 404 error
As soon as the DOM is parsed, an attempt is made is to fetch the image from the server. At this point, AngularJS binding expression that is specified with the src attribute is not evaluated. Hence 404 (not found) error.
To fix the 404 error use the ng-src directive : ng-src attribute ensures that a request is issued only after AngularJS has evaluated the binding expression
AngularJS tutorial for beginners
Part 1 - What is AngularJS
Part 2 - Angular modules and controllers
Part 3 - Controllers in AngularJS
(追記) (追記ここまで)
In this video we will discuss the use of ng-src directive in AngularJS
(追記) (追記ここまで)
Let us understand this with an example : We want to display the name of the country, capital and it's flag.
angular ng-src vs src
AngularJS Code : The controller builds the country model. The flag property of the country object has the path of the image.
var myApp = angular
.module("myModule", [])
.controller("myController",
function
($scope) {
var country = {
name: "United States of America",
capital: "Washington, D.C.",
flag: "/Images/usa-flag.png"
};
$scope.country = country;
});
HTML Code : In the view we are binding country.flag property with the src attribute of the image element.
<!doctypehtml>
<htmlng-app="myModule">
<head>
<scriptsrc="Scripts/angular.js"></script>
<scriptsrc="Scripts/Script.js"></script>
</head>
<body>
<divng-controller="myController">
<div>
Country : {{ country.name }}
</div>
<div>
Capital : {{ country.capital }}
</div>
<div>
<imgsrc="{{country.flag}}"
alt="{{country.name+'Flag' }}"
style="height:100px; width:200px"/>
</div>
</div>
</body>
</html>
When you view the page in the browser, the country details and the flag are displayed as expected. The problem with the img src attribute is that we get a 404 error. To see the error, launch the developer tools.
Let's now understand the reason for the 404 error
As soon as the DOM is parsed, an attempt is made is to fetch the image from the server. At this point, AngularJS binding expression that is specified with the src attribute is not evaluated. Hence 404 (not found) error.
To fix the 404 error use the ng-src directive : ng-src attribute ensures that a request is issued only after AngularJS has evaluated the binding expression
AngularJS tutorial for beginners
7 comments:
Hi Venkat,
Reply DeleteFirst, thank you for sharing your knowledge. Great tutorials
Second, I am an Asp.net c# developer. should I move to AspNet MVC to be able to use angularjs
Great tutorials, I'm learning a lot with them! Really thank you!
Reply DeleteSir please tell me how intellisense work in angular js?
Reply DeleteNo ,I do not think to use AngularJS ,we should move to ASP NET MVC. We can use angularJS without using MVC. This is my perception
Reply DeleteVenkat will clarify on this.
Thanks,
Pallab Panda
For getting intellsence just add the angular.js in the file that u are using.
Reply DeleteTo get intellisense just drag and drop the angular.js file to the page where code need to be entered.
DeleteAt that time it will add following statement which is rerenceing to angular
///
after that intellisense will be available automatically
Hi venka can u make videos on machine learning from beginners to advanced so that it will be helpful for us.
Reply DeleteIt would be great if you can help share these free resources
[フレーム]