In order to get images to work properly with AngularJS, you have to use a directive called ngSrc.. This video takes a look at how to implement that, as well as looking at how debugging looks in AngularJS.
- So, there's an error in our application,…and I wanted to show you how errors are displayed…in AngularJS, and then something…that you'll need to do whenever you're working…with images specifically.…So, if we take a look at the console…for our application.…I'm going to right click, and I'm using Google Chrome here,…so I'm going to say "Inspect".…You'll notice that there is an error right here,…and to show the error, I'm going to go here…into the console, and let's go ahead and expand this…to see what it's saying.…
So you could see that it says,…"Failed to load resource: the server responded…with a status of 404 (Not Found)".…So, usually when you see a 404 Error,…it means that it can't find a file name.…Now, the way that Angular displays errors…is a little bit odd.…It shows you sort of a URL, and then it doesn't sort of…encode some of these characters properly.…But if you look at this error,…you can see that it says something about the images,…and then artist.shortname,…and these %7B's are actually curly braces.…
In this short, practical course, Ray Villalobos uses AngularJS to build a searchable directory—a project you can use as the basis for your own employee or user directory. He explains the MVC architecture underlying AngularJS, and the differences you can expect to encounter in Angular 2. Then he shows how to control the display of DOM elements and data; use services like $http and $routeProvider; modify content with filters; add two-way data binding; and work with routes and templates. Start watching, and learn the simple way to build your own complex web application with AngularJS.
- What is AngularJS?
- Binding data
- Defining modules and controllers
- Using the $http service to read a JSON file
- Controlling app logic with conditionals and loops
- Filtering content and lists
- Deep linking