Learning Path: Production Angular

Introducing AngularJS 23 lectures 02:08:13 Getting Started with an Angular Project - The Course Overview preview This video will give users a good overview of what they will learn throughout the course. Viewers will be presented with some concept keywords that they should learn to master the course

• Author introduction
• Reasons for selecting AngularJS
• Overview of course sections

"Angularizing" Your Existing Web Page Viewers need to make a basic Angular application. If they have an existing web page on which they wish to extend, we will guide them to making that 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

Bootstrapping an Angular Application Viewers need to create a basic Angular application. We will assist them in building a well-structured project from scratch.

• Pick a seed project or scaffolding tool
• Clone a project or install Yeoman
• Get started with a pre-existing structure

Defining a Controller Viewers need to be able to display data in the template. This is done via a controller, which they will learn to define here.

• 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

Displaying Data Dynamically For dynamic web pages, the data comes in the form of objects available in JavaScript, which can be modified, filtered, and so on. Viewers will want to see that data displayed on various parts of the page.

• 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

Repeating Content for All Items in a List Displaying the same markup for each item of a list is a very common task, for example, the DVD cover and the title of a list of movies. This can be done by defining a repeater to iterate over the data.

• 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

Area of Influence of a Controller A controller allows to display data and read data from user input, but is limited to a given area, which viewers need to be aware of.

• 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

Adding Interactions to the Template Angular needs to know which part of the template will receive user interactions and where to read input from. Adding interactions takes care of it.

• Add ng-model to the inputs and select list
• Add ng-click to buttons
• Add ng-blur and ng-keyup to some inputs

Creating Corresponding Controller Logic User actions need to trigger actual JavaScript functions, so we need to define them in the controller.

• 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

Reading Data from the Template When users interact and the corresponding actions get triggered (on click, blur, and so on), we often need to read what the current values are for inputs, selects, and so on. This is done by reading from $scope.

• Show how Angular expressions are helpful
• Read an entire object on $scope
• Show how to watch out for mutable object pitfalls

Conditionally Showing/Hiding Elements Developers will often want to easily show or hide some parts of a view, depending on certain logic (for example, validation error messages). Using ng-show and ng-hide makes this possible.

• 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

Route Declaration and the ng-view Directive The content part of the application needs to be routed to various views. You will learn about the components that take care of this routing, namely ng-view, .config, and $routeProvider.

• Ensuring that ng-route is available
• Understanding the ng-view directive
• The .config, $routeProvider, and route definitions

Creating New Routes Developers need to create new routes. We'll learn all the information required to create new routes.

• Make a call to $routeProvider .when method in app.js
• Setting a template and creating it
• Setting the corresponding controller and creating it

Routing with Parameter Be able to recognize URLs even though one value changes, for example, /movie/3 and /movie/5, without having to declare all. Also, read the value in the controller for processing.

• Defining a new route with parameter
• $routeParams to read parameter value
• Use the value to display the corresponding data

Creating Links Create links to either redirect directly or perform some JavaScript test first and then redirect programmatically. Use ng-href or $location.path.

• Use ng-href
• Use ng-click and $location.path
• HTML5 mode and Angular UI router

Making AJAX Calls via $http Data mostly can’t be hardcoded into applications. Instead, it is usually loaded from a server database. You will learn how to make simple calls to an API.

• Injecting the $http service
• Making a simple $http.get call
• Reacting to success and using the data provided to display in the template

Handling Responses via Success and Error Callbacks Things do not always go as planned when making AJAX calls. That is why success and error callbacks receive more than just the output data.

• Handling errors via .error
• Using status code and headers arguments in .error
• Reviewing other arguments passed in .success

Building GET and POST Requests We need to handle GET requests with queries and other methods, $http.get’s second argument, and $http.post

• Building the options dictionary for use in $http.get
• Making POST calls, $http.posts and passing POST data
• Setting headers on requests

Making Cross-domain Requests Using JSONP Browsers have strict security policies when it comes to cross-domain AJAX calls. JSONP allows us to circumvent those if the API supports it.

• 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

Separating the Loading of Data from the Controller As applications grow, they become more difficult to handle, with risks of repetitions, difficulty to debug code, and so on. Principles such as DRY and separation of concerns help avoid these pitfalls.

• 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

Introducing the "factory" Type of Service Loading of data needs to be handled by a service, not in each controller. We will set a factory service to do that.

• 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

Injecting Your Own Services The service has been created in a file different from the controllers. How will we be able to access its features? The solution is a built-in system of dependency injection that allows to request services simply by name.

• 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

Implementing Persistence Although we add movies, they were immediately discarded upon page change. And although this would be more of backend kind of responsibility, we can implement a local version of persistence using a localStorage module.

• 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

Introducing AngularJS. 23 lectures 02:08:13 Getting Started with an Angular Project - The Course Overview preview This video will give users a good overview of what they will learn throughout the course. Viewers will be presented with some concept keywords that they should learn to master the course

• Author introduction
• Reasons for selecting AngularJS
• Overview of course sections

"Angularizing" Your Existing Web Page Viewers need to make a basic Angular application. If they have an existing web page on which they wish to extend, we will guide them to making that 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

Bootstrapping an Angular Application Viewers need to create a basic Angular application. We will assist them in building a well-structured project from scratch.

• Pick a seed project or scaffolding tool
• Clone a project or install Yeoman
• Get started with a pre-existing structure

Defining a Controller Viewers need to be able to display data in the template. This is done via a controller, which they will learn to define here.

• 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

Displaying Data Dynamically For dynamic web pages, the data comes in the form of objects available in JavaScript, which can be modified, filtered, and so on. Viewers will want to see that data displayed on various parts of the page.

• 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

Repeating Content for All Items in a List Displaying the same markup for each item of a list is a very common task, for example, the DVD cover and the title of a list of movies. This can be done by defining a repeater to iterate over the data.

• 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

Area of Influence of a Controller A controller allows to display data and read data from user input, but is limited to a given area, which viewers need to be aware of.

• 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

Adding Interactions to the Template Angular needs to know which part of the template will receive user interactions and where to read input from. Adding interactions takes care of it.

• Add ng-model to the inputs and select list
• Add ng-click to buttons
• Add ng-blur and ng-keyup to some inputs

Creating Corresponding Controller Logic User actions need to trigger actual JavaScript functions, so we need to define them in the controller.

• 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

Reading Data from the Template When users interact and the corresponding actions get triggered (on click, blur, and so on), we often need to read what the current values are for inputs, selects, and so on. This is done by reading from $scope.

• Show how Angular expressions are helpful
• Read an entire object on $scope
• Show how to watch out for mutable object pitfalls

Conditionally Showing/Hiding Elements Developers will often want to easily show or hide some parts of a view, depending on certain logic (for example, validation error messages). Using ng-show and ng-hide makes this possible.

• 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

Route Declaration and the ng-view Directive The content part of the application needs to be routed to various views. You will learn about the components that take care of this routing, namely ng-view, .config, and $routeProvider.

• Ensuring that ng-route is available
• Understanding the ng-view directive
• The .config, $routeProvider, and route definitions

Creating New Routes Developers need to create new routes. We'll learn all the information required to create new routes.

• Make a call to $routeProvider .when method in app.js
• Setting a template and creating it
• Setting the corresponding controller and creating it

Routing with Parameter Be able to recognize URLs even though one value changes, for example, /movie/3 and /movie/5, without having to declare all. Also, read the value in the controller for processing.

• Defining a new route with parameter
• $routeParams to read parameter value
• Use the value to display the corresponding data

Creating Links Create links to either redirect directly or perform some JavaScript test first and then redirect programmatically. Use ng-href or $location.path.

• Use ng-href
• Use ng-click and $location.path
• HTML5 mode and Angular UI router

Making AJAX Calls via $http Data mostly can’t be hardcoded into applications. Instead, it is usually loaded from a server database. You will learn how to make simple calls to an API.

• Injecting the $http service
• Making a simple $http 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...