Introducing AngularJS [Video]

Introducing AngularJS [Video]

Learning
Mathieu Chauvinc

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
$63.75
RRP $74.99
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

+ Collection
Free Sample

Video Details

ISBN 139781783554218
Course Length2 Hours 8 minutes

Video 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.

Style and Approach

The course uses a full fledged application, a movie library app as the leading example throughout the sections, starting from the creation of the code structure and continuously enhancing it while you learn about the various moving parts of an Angular application. This guarantees a step-by-step approach while keeping a good continuity through the course.

Table of Contents

Getting Started with an Angular Project
The Course Overview
"Angularizing" Your Existing Web Page
Bootstrapping an Angular Application
Controllers and Templates
Defining a Controller
Displaying Data Dynamically
Repeating Content for All Items in a List
Area of Influence of a Controller
User Interactions and Data Binding
Adding Interactions to the Template
Creating Corresponding Controller Logic
Reading Data from the Template
Conditionally Showing/Hiding Elements
App Routing
Route Declaration and the ng-view Directive
Creating New Routes
Routing with Parameter
Creating Links
Loading External Data
Making AJAX Calls via $http
Handling Responses via Success and Error Callbacks
Building GET and POST Requests
Making Cross-domain Requests Using JSONP
Introducing Services
Separating the Loading of Data from the Controller
Introducing the "factory" Type of Service
Injecting Your Own Services
Implementing Persistence

What You Will Learn

  • Kick-start your application in minutes by scaffolding it entirely with Yeoman
  • Build a dynamic page and render lists of items in one line of code
  • Program Reactions on user-interactions such as clicks, selection change, blur, and more
  • Easily validate data present in forms, from simple required fields to complex custom form validation
  • Efficiently handle routing between different pages of an application
  • Load data from external sources in the background by using AJAX calls with Angular
  • Master the use of performing actions asynchronously by creating worker threads

Authors

Screenshots

Table of Contents

Getting Started with an Angular Project
The Course Overview
"Angularizing" Your Existing Web Page
Bootstrapping an Angular Application
Controllers and Templates
Defining a Controller
Displaying Data Dynamically
Repeating Content for All Items in a List
Area of Influence of a Controller
User Interactions and Data Binding
Adding Interactions to the Template
Creating Corresponding Controller Logic
Reading Data from the Template
Conditionally Showing/Hiding Elements
App Routing
Route Declaration and the ng-view Directive
Creating New Routes
Routing with Parameter
Creating Links
Loading External Data
Making AJAX Calls via $http
Handling Responses via Success and Error Callbacks
Building GET and POST Requests
Making Cross-domain Requests Using JSONP
Introducing Services
Separating the Loading of Data from the Controller
Introducing the "factory" Type of Service
Injecting Your Own Services
Implementing Persistence

Video Details

ISBN 139781783554218
Course Length2 Hours 8 minutes
Read More