IPT – Intellectual Products & Technologies Trayan Iliev, http://www.iproduct.org/ AngularJS and TypeScript SPA Development Slide 1 Sources: AngularJS [ https://docs.angularjs.org ], AngularJS Hub [ http://www.angularjshub.com/ ] Licensed under the Creative Commons Attribution-ShareAlike 3.0 License AngularJS Projects, Forms and Services Trayan Iliev IPT – Intellectual Products & Technologies e-mail: [email protected]web: http://www.iproduct.org Oracle®, Java™ and JavaScript™ are trademarks or registered trademarks of Oracle and/or its affiliates. Microsoft .NET, Visual Studio and Visual Studio Code are trademarks of Microsoft Corporation. Other names may be trademarks of their respective owners.
27
Embed
AngularJS Projects, Forms and Servicesiproduct.org/wp-content/uploads/2016/07/AngularJS... · AngularJS and TypeScript SPA Development Sources: AngularJS [ ], ... Designing front-end
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Oracle®, Java™ and JavaScript™ are trademarks or registered trademarks of Oracle and/or its affiliates.Microsoft .NET, Visual Studio and Visual Studio Code are trademarks of Microsoft Corporation.
Other names may be trademarks of their respective owners.
Licensed under the Creative Commons Attribution-ShareAlike 3.0 License
Agenda
1. Seed project2. Proposed project structure3. Proposed module structure4. AngularJS form support5. Form directives and styles6. Form validation and building custom validators7. AngularJS built-in services – $log, $q, $http, $resource8. Custom services – using factory and service methods9. Using promises10.Filters11.Creating custom filters
Licensed under the Creative Commons Attribution-ShareAlike 3.0 License
Sinagle Page Apps (SPA) in 3 steps
1) Setting up a build system – npm, webpack, gulp are common choices, babel, typescript, JSX, CSS preprocessors (SASS, SCSS, LESS), jasmine, karma, protractor, Yeoman/ Slush, live servers
Licensed under the Creative Commons Attribution-ShareAlike 3.0 License
Recommended Module Structure (1)
<module_name> - folder for the module<module_name>.ts - AngularJS module definitioncomponents - containins all the components of that module
<component_name> - component folder in the module
<component_name>.controller.ts - controller (*)<component_name>.controller.spec.ts - unit tests (*)<component_name>.template.html - template/partial view of the component (*) _<component_name>.scss - styles (starts with `_` )<component_name>.model.ts - model
Licensed under the Creative Commons Attribution-ShareAlike 3.0 License
Form State CSS Classes
CSS classes dynamically added to components and the form to reflect their state (added by ngModel.NgModelController and form.FormController):
ng-valid - the model is validng-invalid - the model is invalidng-valid-[key] - for each valid key added by $setValidityng-invalid-[key] - for each invalid key added by $setValidityng-pristine - the control hasn't been interacted with yetng-dirty - the control has been interacted withng-touched - the control has been blurredng-untouched - the control hasn't been blurredng-pending - any $asyncValidators are unfulfilled
getItemState(item: ng.INgModelController): string { let state = ''; if (item.$pristine) state += 'pristine, '; if (item.$touched) state += 'touched, '; if (item.$dirty) state += 'dirty, '; if (item.$valid) state += 'valid'; if (item.$invalid) state += 'invalid'; return state;}
Licensed under the Creative Commons Attribution-ShareAlike 3.0 License
Binding to Form and Control State
Form (form, ngForm) is instance of FormController - can be published into the scope using the name form attribute
Input control that has the ngModel directive holds an instance of NgModelController - can be published as a property of the form instance using the name attribute on the input control
Binding to FormController and NgModelController allows to show custom error message after user interacted with control and upon submitting the form ($submitted is set):
Licensed under the Creative Commons Attribution-ShareAlike 3.0 License
AngularJS Services
Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
Angular services are:Lazily instantiated – Angular only instantiates a service when an application component depends on itSingletons – Each component dependent on service gets reference to the single instance generated by the factory
They can be provided using:module.factory(name, providerFunction) ORmodule.service(name, constructor) - (ES6 & TS classes)
Licensed under the Creative Commons Attribution-ShareAlike 3.0 License
AngularJS AJAX Services
$http – provides communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.
$httpBackend – mock service used mainly for unit testing applications that use $http service
$resource – REST API client that provides higher level of abstraction
$q - deferred/promise API (basis for $http API) - two fashions: ES6 (ES2015) promises using $q constructorKris Kowal's Q or jQuery's Deferred implementations
$q is integrated with $rootScope.Scope model observation mechanism => faster propagation of resolution or rejection