Take this
course

Software Development / Web Development

Introducing AngularJS

A step-by-step guide to build a well-structured single-page Angular application with a focus on a faster and more enjoyable development experience

Description

AngularJS is a Google-backed JavaScript framework that simplifies the development of single-page applications and other web page JavaScript widgets. It is one of several modern frameworks that are revolutionizing web development by bringing a fresh, more professional orientation to application building. Developers will love working with the framework, which allows them to focus their time on actual logic, instead of having to deal with repetitive tasks such as rendering and event binding.


Introducing AngularJS will show you how to build a complete application in a very short time, yet without cutting corners that would be detrimental to code quality. We will take you through a concrete application, a movie library app, one step at a time, in order to introduce the concepts behind all the moving parts of an AngularJS application.


We will start by quickly scaffolding an entire application’s structure using Yeoman. This will lay the foundations of our application in a well-structured manner. Then we'll focus on displaying data and allowing the user to interact with the application, and how can Angular help us handle rendering and events binding, so we can focus more on the app logic itself. We'll peek into templates and controllers, and will see how Angular’s declarative nature makes it obvious which element is in charge of which functionality.


We will then introduce a second view to the application, and show how to handle routing between the two views, including reading parameters from the URL and how we can very quickly create new routes with the companion tool Yeoman.


You will also learn how to load data from an API using AJAX, both from the same server as the app, as well as from an external source. Finally, we will close by introducing services that are Angular data-layer singleton objects as well as building a client-side data persistence using LocalStorage.


Introducing AngularJS will guide you through all the aspects of an Angular application, start-to-finish, view logic to data layer and persistence. You will learn how Angular makes developers lives easier by taking care of rendering and event handling, giving you more time to focus on what you love: the actual logic of the app. With Yeoman, you will also guarantee the quick creation of new views, routes, and controllers, without ever having to create a file manually.

Full details

Curriculum

  • Getting Started with an Angular Project
    The Course Overview
    Introduction to the course and description of sections • Author introduction • Reasons for selecting AngularJS • Overview of course sections
    2:58
    "Angularizing" Your Existing Web Page
    How to make an existing web page into an Angular application • Include the Angular script file • Inform Angular to take charge of the page (Add ng-app to the body) • Declare the application and its components
    2:31
    Bootstrapping an Angular Application
    How to start an Angular application by bootstrapping from a seed project or by scaffolding using Yeoman • Pick a seed project or scaffolding tool • Clone a project or install Yeoman • Get started with a pre-existing structure
    3:37
  • Controllers and Templates
    Defining a Controller
    How to define a controller constructor function • Add the ng-controller directive to the HTML markup to make it in charge of that markup • Defining the controller as an extension of the app • Inject $scope as an argument of the controller function, which will be the variable that will hold accessible data
    4:11
    Displaying Data Dynamically
    How to display data programmatically from JavaScript to the HTML template • Define data in the controller on the $scope variable • Declare data binding in the template using {{ }} • Declare data binding in the template using ng-bind
    3:17
    Repeating Content for All Items in a List
    How to repeat a snippet of HTML for an entire list of items • Define the data and make it available on $scope, and hence in the template • Use an ng-repeat directive to iterate over the list • Define the markup that will be repeated for each item
    3:20
    Area of Influence of a Controller
    Explain the link between the DOM markup and the scope of influence of a controller • Show the relationship between the DOM and the scope of a controller • Show that several controllers can be added to control various parts of the markup • Show an area where the controller will not have any effect
    5:33
  • User Interactions and Data Binding
    Adding Interactions to the Template
    Declare parts of the template that require user input and user interactions to be bound to the programmatic side • Add ng-model to the inputs and select list • Add ng-click to buttons • Add ng-blur and ng-keyup to some inputs
    5:59
    Creating Corresponding Controller Logic
    Declare the corresponding actions and objects on the controller to match what is declared in the template • Create some default values for ng-model defined in the template • Create functions to be called 'on click', 'blur', and 'key up' • Read $scope values
    6:51
    Reading Data from the Template
    Show how every ng-model has its corresponding value available on $scope • Show how Angular expressions are helpful • Read an entire object on $scope • Show how to watch out for mutable object pitfalls
    6:44
    Conditionally Showing/Hiding Elements
    Show how logic can be used to show or hide parts of the template • Add the ng-show and ng-hide statements to the template • Control the logic via the controller • Show that logic expressions can be a value, a call to a function, or even a more complex statement
    7:07
  • App Routing
    Route Declaration and the ng-view Directive
    Although we used Yeoman until now, we deleted the ng-view div to simplify things. We will now use a fully generated Yeoman project, including ng-view, the .config runtime, and $routeProvider. • Ensuring that ng-route is available • Understanding the ng-view directive • The .config, $routeProvider, and route definitions
    7:04
    Creating New Routes
    The files and code required for creating a new route, and how Yeoman can take care of that for us. • Make a call to $routeProvider .when method in app.js • Setting a template and creating it • Setting the corresponding controller and creating it
    5:15
    Routing with Parameter
    Some routes are generic, such as /movies, but some need to include a parameter, such as /movie/3, where 3 is the ID. • Defining a new route with parameter • $routeParams to read parameter value • Use the value to display the corresponding data
    5:17
    Creating Links
    Links are needed to direct to each route. This can be achieved with simple ng-href directives or with the $location service. • Use ng-href • Use ng-click and $location.path • HTML5 mode and Angular UI router
    7:03
  • Loading External Data
    Making AJAX Calls via $http
    Users will learn to make calls in the background to a server side API. • Injecting the $http service • Making a simple $http.get call • Reacting to success and using the data provided to display in the template
    6:00
    Handling Responses via Success and Error Callbacks
    Users will learn what is given to them as arguments on success and error callbacks, and how to use it. • Handling errors via .error • Using status code and headers arguments in .error • Reviewing other arguments passed in .success
    4:53
    Building GET and POST Requests
    Often, requests point to a URL that either requires query parameters, or needs to use a POST method, with or without a body. • Building the options dictionary for use in $http.get • Making POST calls, $http.posts and passing POST data • Setting headers on requests
    7:52
    Making Cross-domain Requests Using JSONP
    Cross-domain requests are common. JSONP is a way to circumvent CORS issues. • A reminder of the cross-domain policy, CORS, and JSONP • Using $http.jsonp to make cross-domain calls when CORS is not enabled • The need for a callback and the JSON_CALLBACK Angular keyword
    8:53
  • Introducing Services
    Separating the Loading of Data from the Controller
    We will separate the loading of data from the display logic and explain why it is important. • Reviewing code and highlighting structure issues • Understanding separation of concerns – what it is and why it is important • The data layer level in Angular: Services
    6:22
    Introducing the "factory" Type of Service
    Video 5.1 gave the reasons/theory behind the need for services. Here, we will create the service object by using a "factory" function. • Presenting the different ways to generate a service: value, service/factory, and provider • Using a factory function and coding the service object itself • Factory functions allow us a "private" area. We'll learn what can it be used for, and implement caching as a practical example
    5:45
    Injecting Your Own Services
    The service has been coded in the previous video. We now need a way to access and time to use it. This will be done via dependency injection. • Dependency-injecting the service using its name • Fixing the existing code to use service abstraction • The dark magic of relying on argument names for service injection, and how the new Angular notation deals with it
    3:58
    Implementing Persistence
    The main missing feature of the app is data persistence; Movies added don’t get saved. We will implement this feature using localStorage. • Synchronous versus asynchronous actions, results, and making the right decision • How we can use a localStorage module as a storage, and how it affects the existing code • Making a localStorage module appear asynchronous by using promises and the $q service
    7:56

Skills

  • AngularJS
  • JavaScript Framework

Similar Courses

More Courses by this Instructor