Difference between revisions of "AngularJS"
Karl Jones (Talk | contribs) (→Services) |
Karl Jones (Talk | contribs) |
||
Line 68: | Line 68: | ||
See [[AngularJS dependency injection]]. | See [[AngularJS dependency injection]]. | ||
+ | |||
+ | == Data sharing == | ||
+ | |||
+ | Four different ways to share data in Angular: | ||
+ | |||
+ | * Parent to Child: Input decorator. | ||
+ | * Child to Parent via Output and eventEmitter - button clicks, form entries, etc. | ||
+ | * Child to Parent via Viewchild - inject one component into another. | ||
+ | * Shared service: rxJs behavior subject - create a private behavior subject that holds current value, then create ... then create function call. | ||
+ | |||
+ | https://www.youtube.com/watch?v=I317BhehZKM | ||
+ | |||
+ | https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/ | ||
== Class definitions == | == Class definitions == |
Latest revision as of 09:38, 3 June 2019
In software development, AngularJS (commonly referred to as "Angular") is an open source web application JavaScript framework for developing single-page applications.
This article focuses on Angular 2.
Contents
- 1 Description
- 2 Why Angular 2
- 3 Directive
- 4 Component
- 5 Metadata
- 6 Templates
- 7 Data binding
- 8 Services
- 9 Modules
- 10 Dependency injection
- 11 Data sharing
- 12 Class definitions
- 13 Components
- 14 Forms
- 15 Transclusion
- 16 Promises
- 17 Tooling
- 18 AngularJS Material
- 19 PrimeNG
- 20 TreeView
- 21 See also
- 22 External links
Description
AngularJS simplifies both the development and the testing of web applications by providing a framework for client-side Model–view–controller (MVC) architecture, along with components commonly used in rich Internet applications.
AngularJS works by first reading the HTML page, which has embedded into it additional custom tag attributes.
Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables.
The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.
Why Angular 2
- Keep and enhance best practices from Angular 2
- Standards: new syntax for templates binding to native DOM
- Improved change detection for speed/performance
- Reactive mechanism handling
- Immutable data objects
Directive
A directive is a class decorated with @Directive
.
See AngularJS directive.
Component
A component is a directive with added template features.
See AngularJS component.
Metadata
Metadata allows Angular to process (decorate) a class.
See AngularJS metadata.
Templates
Template is HTML which tells Angular how to render a component.
See AngularJS template.
Data binding
Enables data to flow from component to template and vice-versa.
Services
A service is a class.
Handles business logic (so components don't have to).
Decorate with @Injectable
to inject dependencies into service.
See also Event Handling Services.
Modules
See AngularJS module.
Dependency injection
See AngularJS dependency injection.
Data sharing
Four different ways to share data in Angular:
- Parent to Child: Input decorator.
- Child to Parent via Output and eventEmitter - button clicks, form entries, etc.
- Child to Parent via Viewchild - inject one component into another.
- Shared service: rxJs behavior subject - create a private behavior subject that holds current value, then create ... then create function call.
https://www.youtube.com/watch?v=I317BhehZKM
https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/
Class definitions
.Class({ constructor: function() {} });
Components
See AngularJS component.
Forms
See AngularJS form.
Transclusion
In Angular 2, the concept of transclusion is simply no longer necessary. Because component directives are built on top of web components, we can simply take advantage of the built-in web component functionality instead -- content tags.
If we use content tags with select attributes to filter the user-provided template, our directive already has all that it needs natively to handle multiple insertion points.
See:
- Angular 2 Transclusion using ng-content.
- Transclusion in Angular 2
- Creating Container Components, Part 3: Angular 2 Component Directives
Promises
Promises in AngularJS are provided by the built-in $q
service. They provide a way to execute asynchronous functions in series by registering them with a promise object.
Promises have made their way into native JavaScript as part of the ES6 specification. The angular $q service provides an interface that closely resembles this new API so porting code to ES6 should be easy.
See Promise object (JavaScript).
Tooling
See AngularJS tooling.
AngularJS Material
- What is AngularJS Material
- Basic expansion paneld - Stackblitz example
PrimeNG
PrimeNG is a collection of rich UI components for Angular 2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces.
All widgets are open source and free to use under MIT License.
See PrimeNG.
TreeView
See:
- Angular Treeview @ ngmodules.org
- AngularJS UI Tree @ github.io
- Is it possible to make a Tree View with Angular?
See also
- AngularJS change detection
- AngularJS pagination
- Client-side
- Framework (computing)
- JavaScript library
- Web application
External links
- Official website
- Quickstart
- Developer guide
- Introduction
- Conceptual overview
- Tutorial
- Angular code examples @ code.karljones.com
- http://onehungrymind.com/build-a-simple-website-with-angular-2/ Building a simple website with Angular]
- Learning Angular2
- The Real Angular2 quick start
- 5 Rookie Mistakes to Avoid with Angular 2
- Angular Change Detection Explained @ thoughtram.io
- Zones in Angular @ thoughtram.io
- AngularJS @ Wikipedia
- How to debug Angular 2 with WebStorm
- Angular Bad Practices
- Why Angular 2/4 Is Too Little, Too Late
- All the Ways to Add CSS to Angular 2 Components