3

Click here to load reader

Building Web Apps with AngularJS - s.bellevuecollege.edus.bellevuecollege.edu/wp/sites/221/2016/10/AngularJS-1.pdf · Building Web Apps with AngularJS Create web applications with

  • Upload
    phamque

  • View
    213

  • Download
    1

Embed Size (px)

Citation preview

Page 1: Building Web Apps with AngularJS - s.bellevuecollege.edus.bellevuecollege.edu/wp/sites/221/2016/10/AngularJS-1.pdf · Building Web Apps with AngularJS Create web applications with

Building Web Apps with AngularJSCreate web applications with the AngularJS JavaScript framework. In this course, you will learn how to build exciting, effective web applications by extending conventional HTML with the powerful declarative techniques provided by the AngularJS framework to connect to RESTful services. You will apply these skills in hands-on exercises that will guide you through creating a JavaScript web app.

Who should take this course? This course is for anyone who wants to build professional-strength web applications using an exciting new JavaScript framework. You will build on your web designer skills in HTML, CSS, and basic JavaScript to move to the web developer level.

Course Objectives• Use AngularJS data-binding Directives to display dynamic data in a simple AngularJS app.• Link individual HTML pages into a Single Page App (SPA) using AngularJS $route Service.• Create an AngularJS Controller that modifies the application $scope to implement a ViewModel.• Create an AngularJS Service that encapsulates data storage and retrieval using the $http Service.• Create a custom AngularJS Directive to implement a new HTML View element.• Implement data entry validation using AngularJS client-side Forms.

Course Details• Length: 12 hours• Format: Classroom• Prerequisites: HTML and CSS: Level 2, JavaScript

The above prerequisites are considered to be the basic skills and knowledge needed prior to taking this class. Instructors will assume your readiness for the class materials and will NOT use class time to discuss prerequisite materials.

COMPUTER & TECHNOLOGY PROGRAMS

Building Web Apps with AngularJS | Pg. 1

Page 2: Building Web Apps with AngularJS - s.bellevuecollege.edus.bellevuecollege.edu/wp/sites/221/2016/10/AngularJS-1.pdf · Building Web Apps with AngularJS Create web applications with

Course Contents [Subheading style]

Use AngularJS data-binding Directives to display dynamic data in a simple AngularJS app.

• Explain how to use the Model-View-ViewModel (MVVM) software design pattern.• Develop an interactive web page using built-in AngularJS Directives such as ng-app, ng-model, and ng-repeat to bind View elements to Model objects.• Use AngularJS Filters for View-specific formatting of data on a web page.

Link individual HTML pages into a Single Page App (SPA) using AngularJS $route Service.

• Design web app URLs to specify complex apps with links between pages and deep-links to locations within a page.• Develop JavaScript using the AngularJS $route Service to combine several HTML pages into an SPA with deep-linking and browsing history.

Create an AngularJS Controller that modifies the application $scope to implement a ViewModel.

• Code an AngularJS Controller which binds Model objects to $scope.• Explain the use of JavaScript prototype inheritance in AngularJS $scope.• Embed JavaScript expressions in HTML templates that invoke functions in $scope when the element is clicked.

Create an AngularJS Service that encapsulates data storage and retrieval using the $http Service.

• Explain how a custom AngularJS Service can implement the Model element of a MVVM application.• Use Data Injection to reference an AngularJS Service from a Controller.• Explain how the Promise software design pattern simplifies asynchronous request coding.• Explain how to use JavaScript Object Notation (JSON) for data transfer to REST Services.• Implement a Service which uses the AngularJS $http Service to load data from a RESTful backend.

Building Web Apps with AngularJS | Pg. 2

COMPUTER & TECHNOLOGY PROGRAMS

Page 3: Building Web Apps with AngularJS - s.bellevuecollege.edus.bellevuecollege.edu/wp/sites/221/2016/10/AngularJS-1.pdf · Building Web Apps with AngularJS Create web applications with

Course Contents, continued

Create a custom AngularJS Directive to implement a new HTML View element.

• Explain the three parts of an AngularJS Directive Definition Object (DDO).• Describe the two different ways of providing an HTML template for a Directive.• Distinguish between the link, compile, and controller functions in a Directive.• Write a custom Directive that creates a new HTML element for a specialized purpose. • Debug problems in a custom Directive using the AngularJS Batarang debugger.

Implement data entry validation using AngularJS client-side Forms.

• Create a web page containing a FORM with an INPUT field and SUBMIT button that interacts with a data storage Service.• Use field validation attributes like ng-maxlength and ng-required and custom error messages to display an error message when invalid data is entered.• Use AngularJS Directives ng-disable and $dirty to disable the Submit button until all fields have valid contents.

Building Web Apps with AngularJS | Pg. 3

COMPUTER & TECHNOLOGY PROGRAMS