Welcome to Part 3 of this review of the Pluralsight course
Angular JS: Get Started by Scott Allen.
Scott has over 25 years of commercial software development experience across a wide range of technologies. He has successfully delivered software products for embedded, Windows, and web platforms.
To learn more about him, see my career strategies interview with him and other successful developers on Outlier Developer.
Angular JS: Get Started is the first course in the Angular JS Learning Path.
Also in this series:
Part 1: Introduction
Part 2: Controllers
Part 3: Views and Directives
Part 4: Services
Part 5: Routing
Angular JS Views and Directives
Philosophy
Scott recaps some of the lessons we’ve learned in this course so far. Data binding expressions are a type of directive called the data binding directive.
What we haven’t yet seen is move data from the view (e.g. an HTML form) back into our model.
ng-model
Our aim for the Github viewer app is to let the user enter the Github username of interest and have the program fetch all of the relevant data for us and display it onscreen.
Scott adds an HTML form, and then adds ng-model as an HTML attribute of our search input.
He says ng-model can be applied to inputs, selects and text-areas, and it will keep our data in sync.
ng-click
Scott adds the ng-click directive as an HTML attribute on our submit button.
The HTML is updated to display a Gravatar image of the GitHub user.
We see this works for Angular, K. Scott Allen and Rob Conery. We see “could not find this user” when we enter gibberish.
It does not work well if the user searches without entering a username. We can fix this by removing ng-click and instead using ng-submit.
Scott introduces the GitHub API repos_url which gets the repositories associated with a user, for example see https://api.github.com/users/angular/repos
ng-repeat
The repos URL returns an array of JavaScript objects.
In this lesson we output a table with a row for each of these objects. Specifically, we display the name, number of stars, and the programming language of each repository.
One issue is that the numbers lack thousands comma separators. We can fix this by adding a numbers filter. This is an HTML only change – no additional JavaScript is required.
Filters
The basic expression for using a filter is the pipe symbol followed by the pipe name e.g.
| number
Some example of filters are:
See the filter page of the official documentation for the index, or click on a specify link above.
In this lesson Scott shows us how to use the orderBy filter to sort by the number of GitHub stars. We see that we can change this to descending sort order by adding the – character before stargazers_count.
Scott builds a dropdown list so that the user can select how they want to sort the GitHub table data. This is easy to do, we just bind the model property to the selected dropdown value with ng-model
ng-show and hide
We have a generic gravatar image appearing in our GitHub viewer when no username is entered. We want to hide this as well as our table until we have the relevant data available.
The two directives for this are ng-show and ng-hide
They take a value and determine whether it is truthy. In this lesson Scott uses the value “user”. If there is no value for user it will be undefined which is falsey, and if it is populated then it is truthy.
See ngShow and ngHide for full details.
ng-include
Scott says ng-include is useful for a number of scenarios.
He shows us how to move out the table and dropdown list into its own HTML file called userdetails.html and ng-include them in index.html.
This makes our HTML much more readable. We also see that we can eliminate duplication by moving the ng-show expressions into a single attribute in the div containing our ng-include
Directives!
We have seen only a fraction of the number of directives available in Angular 1.x. For the full list see Directive components in ng.
Scott says there are also many custom directives available as open source projects.
Zombie Code Kill 