Upload
vankien
View
214
Download
0
Embed Size (px)
Citation preview
www.PeakLearningLLC.com
S103
Comprehensive AngularJS Programming (5 Days)
The AngularJS framework augments applications with the "model-view-controller" pattern which makes applications easier to develop and test because there is a separation of responsibilities within the code. Although there are many benefits to using the AngularJS framework it is fairly different than the way "typical" web applications involving JavaScript have been designed.
The Comprehensive AngularJS Programming Training course will provide an introduction to AngularJS and commonly related topics including the Bootstrap responsive framework and popular build tools. Once they've completing the course participants can begin developing AngularJS applications with responsive features quickly and easily.
Course Objectives: In this training, attendees will learn how to:
Create single page web applications using the MVC pattern of AngularJS Understand the programming model provided by the AngularJS framework Define Angular controllers and directives Control Angular data bindings Implement Responsive Web Applications with AngularJS Use popular build tools to speed development.
Prerequisites: Attendees should have some prior understanding of web development, HTML, AJAX,
and JavaScript.
Course Outline
Chapter 1. Advanced Objects and Functionality
in JavaScript
Basic Objects Constructor Function More on the Constructor Function Object Properties Deleting a Property The instanceof Operator Object Properties Constructor and Instance Objects Constructor Level Properties Namespace Functions are First-Class Objects
Closures Private Variables with Closures Immediately Invoked Function
Expression (IIFE) Prototype Inheritance in JavaScript The Prototype Chain Traversing Prototype Property
Hierarchy Prototype Chain Inheritance Using Prototype Extending Inherited Behavior Enhancing Constructors
Peak Learning LLC www.PeakLearningLLC.com 717-541-1357
Improving Constructor Performance Inheritance with Object.create The hasOwnProperty Method
Chapter 2. Introduction to AngularJS
What is AngularJS? Why AngularJS? Scope and Goal of AngularJS Using AngularJS A Very Simple AngularJS Application Building Blocks of an AngularJS Application Use of Model View Controller (MVC)
Pattern A Simple MVC Application The View The Controller Data Binding Basics of Dependency Injection (DI) Other Client Side MVC Frameworks
Chapter 3. AngularJS Module
What is a Module? Benefits of Having Modules Life Cycle of a Module The Configuration Phase The Run Phase Module Wide Data Using Value Module Wide Data Using Constant Module Dependency Using Multiple Modules in a Page
Chapter 4. AngularJS Controllers
Controller Main Responsibilities About Constructor and Factory Functions Defining a Controller Using the Controller Controller Constructor Function More About Scope Example Scope Hierarchy Using Scope Hierarchy Modifying Objects in Parent Scope Modified Parent Scope in DOM Handling Events Another Example for Event Handling Storing Model in Instance Property
Chapter 5. AngularJS Expressions
Expressions Operations Supported in Expressions AngularJS Expressions vs JavaScript
Expressions AngularJS Expressions are Safe to Use! What is Missing in Expressions Considerations for Using src and href
Attributes in Angular Examples of ng-src and ng-href Directives
Chapter 6. Basic View Directives
Introduction to AngularJS Directives Controlling Element Visibility Adding and Removing an Element Dynamically Changing Style Class The ng-class Directive Example Use of ng-class Setting Image Source Setting Hyperlink Dynamically Preventing Initial Flash
Chapter 7. Advanced View Directives
The ng-repeat Directive Example Use of ng-repeat Dynamically Adding Items Special Properties Example: Using the $index Property Scope and Iteration Event Handling in Iterated Elements The ng-switch Directive Example Use of ng-switch Inserting External Template using ng-
include
Chapter 8. Working with Forms
Forms and AngularJS Scope and Data Binding Role of a Form Using Input Text Box Using Radio Buttons Using Checkbox Using Checkbox - Advanced Using Select Using Select – Advanced Disabling an Input
Peak Learning LLC www.PeakLearningLLC.com 717-541-1357
Reacting to Model Changes in a Declarative Way
Example of Using the ng-change Directive
Chapter 9. Formatting Data with Filters in
AngularJS
What are AngularJS Filters? The Filter Syntax Angular Filters More Angular Filters Using Filters in JavaScript Using Filters A More Complex Example The date Filter The date's format Parameter Examples of Using the date Filter The limitTo Filter Using limitTo Filter Filter Performance Considerations
Chapter 10. AngularJS $watch Scope Function
The $watch Function The $watch Function Signature The $watch Function Details Canceling the Watch Action Example of Using $watch More Things to Be Aware Of Performance Considerations Speeding Things Up
Chapter 11. Communicating with Web Servers
The $http AngularJS Service The Promise Interface The $http Service $http Function Invocation Callback Parameters Request Configuration Properties Complete List of Shortcut Methods Using $http.get() Working with JSON Response Using $http.post() Combining $http POST Request Data
with URL Parameters The then() Method of the Promise
Object The Response Object Making Parallel Web Service Calls
Combining Multiple Promises into One Wait for the Combined Promise Setting Up HTTP Request Headers Caching Responses Disabling Caching in IE9 Setting the Request Timeout Unit Testing with ngMock Writing Unit Tests
Chapter 12. Custom Directives
What are Directives? Directive Usage Types Directive Naming Convention Defining a Custom Directive Using the Directive Scope of a Directive Isolating Scope Example Scope Isolation Using External Template File Manipulating a DOM Element The Link Function Event Handling from a Link Function Wrapping Other Elements Accepting a Callback Function Supplying Callback Function
Chapter 13. AngularJS Services
Introduction to Services Defining a Service The factory() Method Approach The service() Method Approach The provider() Method Approach Using a Service Configuring a Service using its Provider
Chapter 14. Introduction to Single Page Application
What is a Single Page Application (SPA)? It's Not All or Nothing Challenges to SPA Implementing SPA Using AngularJS Simple SPA Using Visibility Control Dynamic Templates Using ng-include Example of Dynamic Template SPA Using the $route Service
Peak Learning LLC www.PeakLearningLLC.com 717-541-1357
Chapter 15. The Route Service Introduction to the Route Service Downloading the Route Service Code Using the Route Service Setting up the Route Table URL Fragment Identifier Showing the Views Navigation The $location Service Programmatic Navigation Controllers for the Views Example Controllers for Views Passing URL Parameters Accessing Query Parameters Configuring Route Parameters Accessing Route Parameters HTML5 Mode Using the HTML5 Mode Bookmarking HTML5 Mode URL
Chapter 16. Advanced Form Handling Introduction to Form Validation Validation and Model Binding Input Type Validation Validation Directives A Note About "required" Detecting Validation State Showing Error Message Other Status Variables Styling Input Fields Styling Other Areas
Chapter 17. The Promise API Introduction The Core API Waiting for Multiple Ajax Calls Changing Result Data Promise Chaining Caching Ajax Calls in Memory Cache Ajax Calls on Disk Caveat
Chapter 18. Advanced Custom Directive Controller for a Directive Example Controller Using the Controller As Syntax Using an Existing Standalone Controller Controller and the Link Function
Compile and Link Phases Example Source and Instance Trees Manipulating the DOM Trees Defining Compile and Link Functions Wrapping a jQuery Component from a
Directive Setting Options of jQuery Components Setup One Way Data Binding Setup Two Way Data Binding
Chapter 19. Introduction to Node.js What is Node.js? Application of Node.js Installing Node.js and NPM "Hello, Node World!" How it Works Built on JavaScript – benefits Traditional Server-Side I/O Model Disadvantages of the traditional
Approach Event-Driven, Non-Blocking I/O Concurrency Using Node Package Manager (NPM) Express
Chapter 20. Module and Dependency Management
Nature of a Node.js Project Introduction to Modules A Simple Module Using the Module Directory Based Modules Example Directory Based Module Using the Module Making a Module Executable Core Modules Loading Module from node_modules
Folders Dependency Management Using NPM Installing a Package About Global Installation Setting Up Dependency Package Version Numbering Syntax Updating Packages Uninstalling Packages Alternate Dependency Management
Peak Learning LLC www.PeakLearningLLC.com 717-541-1357
Chapter 21. Testing JavaScript with Jasmine What is Jasmine Supported Integrations Jasmine in Standalone Mode Jasmine Folder Structure The Spec Runner Page Viewing Test Results Test Suites Specs (Unit Tests) Expectations (Assertions) Matchers More on Matchers Examples of Using Matchers Using the not Property Test Failures Setup and Teardown in Unit Test Suites Example of beforeEach and afterEach
Functions Disabling Test Suites and Specs Method Stubbing and Call Tracking with
Spies A Spy Example spyOn Setup Variations Simulating Exceptions Asynchronous Calls
Chapter 22. Unit Testing AngularJS Code Introduction The ngMock Module Creating the Spec Runner HTML Testing a Service Unit Test Specification for a Service Better Injected Variable Names Testing a Controller Unit Test Specification for a Controller Testing a "this" Based Controller End-to-End Testing with Protractor Installing Protractor Testing a Web Page How the Page Works Write a Simple Test Specification Create a Configuration File Run the Test Locating Elements by AngularJS Model Locating Elements by Binding Sending User Input
Chapter 23. Testing Using Karma What is Karma? Installing Karma Configuration File Run the Test
Chapter 24. Build and Dependency Management
Introduction Bower Package Manager Managing Packages Using Bower Using Bower Packages Describing Dependency Grunt Build Manager Installing Grunt Components Writing a Grunt Build Script Running Grunt Running JSHint Task Compiling Less Files Compressing CSS Files Gulp Build Manager Gulp vs. Grunt Installing Gulp Components Writing a Build Script Running Gulp Compiling Less Files
Chapter 25. Best Practices and Style Guides About a Project Structure Project Directory Structure Component Files Example Component Files Concatenating Component Files Named vs. Anonymous Functions Make Dependency Injection Safe Use the Newer Controller As Syntax Controller Code Layout Service Best Practices
Chapter 26. Bootstrap Overview What is Bootstrap Keywords from bower.js Bootstrap History Responsive Web Development Responsive Grid Layout Reusable GUI Components JavaScript The Mobile First Philosophy
Peak Learning LLC www.PeakLearningLLC.com 717-541-1357
Why RWD Matters Responsive Page Views Less Getting Bootstrap Bootstrap Content Development
Network Other Setup Options The Bootstrap Core Files To Min or Not to Min
Chapter 27. Getting Started with Bootstrap Bootstrap Basic Page Template The Viewport Meta Tag The user-scalable Property Including Bootstrap JavaScript Files Plugin Dependencies Checking the Needed Version of jQuery Resetting Styles Customizing the CSS Global Settings A Fragment of the scaffolding.less File Bootstrap Components Containers Using Containers Device Sizes The Grid System The Column Arithmetic A Grid Example CSS Media Queries (1 / 2) CSS Media Queries (2 / 2) Customizing Breakpoints Responsive Grid Layout Combining Column Styles Other Column Operations Navigation Navigation (Desktop) Navigation (Mobile) Navigation Source Navigation Explained Navigation Elements and Styles Glyphicons Using Glyphicons Responsive Images Styles for Image Shapes
Chapter 28. Bootstrap Miscellaneous Topics Integrating Bootstrap Components with
jQuery Identifying the Required Version of
jQuery Minimizing Bootstrap's Download Size Using the Customizer Customizer Page Fragment Compiling and Downloading
Customized Bootstrap Customizing Bootstrap Components Light Customization Steps
Chapter 29. UI Bootstrap Overview What is UI Bootstrap? UI Bootstrap Directives Project Philosophy The Angular UI Bootstrap Modules Getting UI Bootstrap The Direct Download What are the -tpls- Files? Understanding Templates Picking and Choosing Your Modules
(1/2) Picking and Choosing Your Modules
(2/2) Basic UI Bootstrap HTML Page Referencing Angular UI Bootstrap
Modules Adding Component Prefixes in Release
0.14.0
Chapter 30. UI Bootstrap Directives UI Bootstrap Directives Directive Inter-dependencies Where to Get Help Plunker The Alert Directive Carousel Datepicker Dropdown Pagination The Pagination Code Progress Bar Tabs