Once your data gets more complex, you need to have ways to control the display of DOM elements that are tied to how data works in AngularJS, as well as the ability to loop through larger information.
- [Narrator] As our data gets more complex,…we'll need to have ways to control the display…of DOM elements that are tied to certain data.…We'll also need to be able to loop through different content…as our data gets larger.…Now in order to do that we're going to use…a few different directives,…and the first two you need to know about…are called ng-show and ng-hide.…They do pretty much the same thing…depending on the value of an expression.…Ng-show will display an element if…the value of the expression is true,…whereas ng-hide will hide that element.…
Now both of these use classes to show or hide…the element which means that the element…will still exist in the DOM.…There is a related directive called ng-if.…It's a bit different but it yields…pretty much the same result.…It will create an element only if…the expression you give it is true.…Now the main difference is that the element…will not exist at all unless the expression is true.…So it doesn't just show or hide and item,…it completely creates or destroys the element.…
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