AngularJS 1.x Application Development
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Table of Contents
The Big Picture
IntroductionLukas Ruebbelke begins the Angular course by demonstrating the Noterious application he will be building throughout each lessons. He also provides the audience with links to a guide for testing Angular applications and the other workshop resources.
The Angular Big PictureLukas talks at a high level about how he builds Angular applications. He diagrams the basic anatomy and explains how various components like views, controllers, directives, and services are related.
File StructureStructuring files based on feature rather than type will make Angular applications more organized and easier to manage. Lukas shows how he structured the Noterious application to emphasize this style of organization. He also talks about how to organize common resources.
Modules & RoutesAngular modules are logical containers to organize code. They promote re-usability as well as an a-la-carte development experience. Routes allow you to directly navigate to a specific state within the application.
Noterious RoutesLukas spends a few minutes explaining the the Noterious application. He walks through how the application is instantiated and where the routes are declared.
Basic Routing ExampleLukas walks through the first example: Basic Routing. This example has two simple routes and each route has a sub-route. Controllers are defined inline for simplicity. - examples/01 Basic Routing
TestingBecause state is separate from the DOM, Angular is an extremely easy framework to test. Unit testing can be done with Karma. E2E testing can be done with Protractor.
Challenge 1: ArchitectureLukas introduces the first challenge. In this challenge, you will create the file structure for the boards feature. Then you’ll create a boards route and write a unit test for that route.
Challenge 1 SolutionLukas walks through the solution to challenge 1.
Views & Controllers
ViewsA view represents the DOM after it has been compiled by Angular. The view is primarily responsible for displaying the model state and and conveying user interaction.
ControllersControllers are responsible for constructing and maintaining the model for a view to interact with. Ideally they consume data from a service and delegate the manipulation of that data.
Controller As SyntaxThe “Controller As” syntax was introduced to provide a more explicit syntax for declaring methods and properties. Lukas explains this syntax and talks briefly about properties and methods within a controller.
ngModel & ngSubmitThe ng-model directive can be used to create a two-way data binding to properties in a controller. Lukas uses a simple web form example to demonstrate the two-way data binding. He also uses the ng-submit directive to handle the submission of the form. - examples/02 ngModel & ngSubmit
ngRepeat & ngClickThe ng-repeat directive behaves like a for-in loop. It can be used to output markup for each item in a data-set. Lukas gives a quick demonstration of ng-repeat. Then he answers a few audience questions about filtering results within the repeater. - examples/03 ngRepeat & ngClick
Challenge 2: Views & ControllersIn this challenge, you will use ng-repeat to display all the boards in the collection. You will also add functionality for creating and editing boards.
Challenge 2 SolutionLukas walks through the solution to challenge 2.
ServicesIn Angular, services act as the model. It’s common for service logic to start in a controller and eventually get promoted to a separate service object. Lukas walks through a brief example of creating a service. - examples/04 Promote to Service
Testing ServicesLukas spends a few minutes explaining how he tests services using mock objects. He then answers a few audience questions about using a factory vs. a service.
PromisesPromises allow you to perform asynchronous operations without using callbacks. In Angular, you can use the $q service to manually control promises. Lukas introduces promise and walks through a quick code demonstration of how to use the $q service. - examples/05 Promises
$http ServiceThe Angular $http service can be used to communicate with remote services over http. This service has REST-ful methods which make the API convenient to use. Building off the promises example, Lukas externalizes the list of items and loads them into the application using the $http service. - examples/06 The $http Service
CRUD ExampleLukas spends a few minutes walking through his use of the $http service object in the Noterious application. This shows how easy it is to build a CRUD-style service API with the existing methods.
Challenge 3: ServicesIn this challenge, you will create a BoardsModel service that will retrieve a remote board using the $http service object. You will also write a unit test for the BoardsModel service.
Challenge 3 SolutionLukas demonstrates the solution to challenge 3.
DirectivesDirectives allow developers to encapsulate custom functionality using HTML tags and attributes. The three main elements of a directive are the link method, controller method, and the directive definition object.
Directive Definition ObjectLukas demonstrates the three main elements of a directive. He begins with the directive definition object. This object allows you to configure the directives. For example, you can specify the directive’s template. - examples/07 Directive Definition Object
Link FunctionThe link function provides a location for DOM manipulation. To demonstrate this, Lukas adds a hover event handler that will modify the opacity of the element when it is rolled over. - examples/08 Link Function
Controller FunctionDirective controller functions are very similar to Angular controllers. They contain logic to hand communication between the view and the model. Directive controllers are specified in the definition object. - examples/09 Controller Function
Challenge 4: DirectivesThis challenge requires you to create a board directive and move the board list HTML into a new template. You’ll also bootstrap the board directive with link and controller functions.
Challenge 4: SolutionLukas walks through the solution to challenge 4.
Isolated ScopeLukas takes a few minutes to explain the concept of isolated scope with directives. This technique allows you to call a function specified in the HTML from your directive. After talking about isolated scope, Lukas answers a few audience questions about local data storage and controller usage.
Routes and StatesWhile ngRoute is useful, ui-router has many more capabilities. With ui-router, you can create named views and have them nested. This allows you to turn your application into a ore precise state machine.
The $stateParams ServiceThe $stateParams services is used to send parameters between states. These parameters can be set directly in the navigation URL or by using the ui-sref directive or $state service. - examples/10 $stateParams Service
Challenge 5: RoutingIn this challenge, you will create a new route to show the details of the selected board. You will use $state.go() and ui-sref to navigate between the states.
Challenge 5 SolutionLukas walks through the solution to Challenge 5.
Applying What You’ve LearnedAfter looking talking about a couple ways the Noterious application could be modified or extended, Lukas gives out an assignment with a few additional challenges. These include extending the model to include extra properties, adding animation, creating alternate layouts, or integrating 3rd party components.
ResourcesLukas wraps up the course by answers a number of audience questions and giving out a few resources.