This is an ongoing series on Angular.js where you can learn by following a series of code samples and my own learning curve, before each one I gave myself a little challenge which you can use to learn on your own, so come along
Check the first part if you haven’t already:
Getting started with AngularJS
*Note: Change is coming… Angular 2 is just around the corner, but working with the current stable version of Angular 1 and then learning Angular 2 seems to be the correct path.
Ok, let’s start with Routing in Angular.
Challenge: Import angular-Route and make a navigation bar with routes to different pages with different content.
See the Pen Angular Routes by Eugenio - Keno - Leon (@k3no) on CodePen.
Routing in Angular has a few moving parts:
If this sounds confusing,look at the code example for a minimal route, let us now look into how routes tie in with controllers and scope.
Challenge: Route navigation to different controllers with different scope.
See the Pen Angular Routes With Controllers by Eugenio - Keno - Leon (@k3no) on CodePen.
To bind a route to a controller just define it in and assign it in the $routeProvider, notice that each controller has it’s own scope and methods (functions).
Another common thing with routing, is allowing the page to know its location, so let’s figure that:
Challenge: Add active indicators to the navigation bar with multiple routes.
See the Pen Angular Routes Active Links by Eugenio - Keno - Leon (@k3no) on CodePen.
This one took a little longer and involved exposing the Routes object to the navigation controller, it seems somehow complex,If you are doing a lot f routing, you might want to check AngularUI an angular routing framework that makes active links simpler.
Enough about routes, lets look at fetching data:
Challenge: Fetch some JSON data with angular
See the Pen Angular AJAX Http by Eugenio - Keno - Leon (@k3no) on CodePen.
This one was pretty simple and a great example of where angular shines, data is fetched or sent with the http service that angular includes as part of the core library, while the example is minimal, most of the communication with the server or external data can be made through the $http service, neat.
Before looking into directives, let’s revisit modules in Angular:
Challenge: Create a nested module structure.
See the Pen Angular Modules by Eugenio - Keno - Leon (@k3no) on CodePen.
Most of the action happens in the code (check the JS and HTMl); knowing how to nest and load modules seems handy for scalable applications, theres more about modules on the docs and even a style guide.
Besides Angular’s own directives, you can also build your own, let’s give that a shot.
Challenge: Write a Custom Directive
See the Pen Angular Custom Directives by Eugenio - Keno - Leon (@k3no) on CodePen.
With custom directives Angular provides another way of encapsulating page elements, plus you get to create new tags with whatever name you want like:
<apple-pie-directive></apple-pie-directive>
Another useful thing you can do with directives, is give them their own scope, let’s try that:
Challenge: Write a Custom Directive with it’s own scope.
See the Pen Angular Custom Directive Scope by Eugenio - Keno - Leon (@k3no) on CodePen.
As the complexity of your modules, templates ( partials in angular speak) and general application expands, communication and encapsulation of data through scopes becomes useful, there are more ways to deal with scope inside directives and other details, just check the documentation for more
For now, let’s finish this second round of angular code samples by revisiting forms and how to validate them, check the first part if you need a refresher:
Getting started with AngularJS
Challenge: Create a form and validate an input with angular.
See the Pen Angular Simple Form Validation by Eugenio - Keno - Leon (@k3no) on CodePen.
Validation happens automatically when adding the required value to the input alongside the ng-model and input field name, in this case we are still using bootstrap so the display validation is handled with a conditional, but Angular also provides a host of prebuilt CSS classes for validation
Lastly, let’s check more complex validations:
Challenge: Create multiple input fields and validate them:
See the Pen Angular Multiple Inputs Validation by Eugenio - Keno - Leon (@k3no) on CodePen.
As you can see from theForm object dump, there is a lot more options; you can set validation values for many other form states and input types or send them over to a controller for further processing ( check the docs for custom validation ).
And that’s it for a second round of Angular code samples,I hope they help on your Angular learning voyage :)
Best,
Keno