Angular2 lambadas dashboard.
Angular1 to 2 Helper !!!
if (el.hidden && backTo){ // the next line is required to work around a bug in WebKit (Chrome / Safari) location.href = "#"; location.href = "#" + backTo; } }</script><script>function verbose(isVerbose) { isVerbose = !! isVerbose; var el = document.querySelector('button.verbose.off'); el.style.display = isVerbose ? 'block' : 'none'; var el = document.querySelector('button.verbose.on'); el.style.display = isVerbose ? 'none' : 'block';
CCSStylesheetRuleStyle('main','.l-verbose-section', 'display', isVerbose ? 'block' : 'none'); } </script><script>function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){ /* returns the value of the element style of the rule in the stylesheet
- If no value is given, reads the value
- If value is given, the value is changed and returned
- If '' (empty string) is given, erases the value.
- The browser will apply the default one
- string stylesheet: part of the .css name to be recognized, e.g. 'default'
- string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
- string style: camelCase element style, e.g. 'fontSize'
- string value optional : the new value
*/
var CCSstyle = undefined, rules, sheet;
for(var m in document.styleSheets){
sheet = document.styleSheets[m];
if(sheet.href && sheet.href.indexOf(stylesheet) != -1){
rules = sheet[document.all ? 'rules' : 'cssRules'];
for(var n in rules){
console.log(rules[n].selectorText);
if(rules[n].selectorText == selectorText){
CCSstyle = rules[n].style;
break;
}
}
break;
}
}
if(value == undefined)
return CCSstyle[style]
else
return CCSstyle[style] = value
}</script>
There are many conceptual and syntactical differences between Angular 1 and Angular 2. This chapter provides a quick reference guide to some of the common Angular 1 syntax and its equivalent in Angular 2.
See the Angular 2 syntax in this live example.
This chapter covers
Template Basics - binding and local variables
Template Directives - built-in directives
ngIfandngClassFilters/Pipes - built-in filters, known as pipes in Angular 2
Controllers/Components - controllers are components in Angular 2. Also covers modules.
Style Sheets - more options for CSS in Angular 2.
String date pipe - a tip for displaying string date values.
Templates are the user-facing part of an Angular application and are written in HTML. The following are some of the key Angular 1 template features with the equivalent template syntax in Angular 2.
| Angular 1 | Angular 2 |
|---|---|
In Angular 1, an expression in curly braces denotes one-way binding. This binds the value of the element to a property in the controller associated with this template. When using the |
In Angular 2, a template expression in curly braces still denotes one-way binding. This binds the value of the element to a property of the component. The context of the binding is implied and is always the associated component, so it needs no reference variable. For more information see Template Syntax. |
To filter output in our templates in Angular 1, we use the pipe character (|) and one or more filters. In this example, we filter the |
In Angular 2, we use similar syntax with the pipe (|) character to filter output, but now we call them pipes. Many (but not all) of the built-in filters from Angular 1 are built-in pipes in Angular 2. See the heading Filters / Pipes below for more information. |
Here, |
In Angular 2, we have true template input variables that are explicitly defined using the For more information see ngFor micro-syntax. |
Angular 1 provides over seventy built-in directives for use in our templates. Many of them are no longer needed in Angular 2 because of its more capable and expressive binding system. The following are some of the key Angular 1 built-in directives and the equivalent feature in Angular 2.
| Angular 1 | Angular 2 |
|---|---|
The application startup process is called bootstrapping. Although we can bootstrap an Angular 1 app in code,
many applications bootstrap declaratively with the |
Angular 2 does not have a bootstrap directive.
We always launch the app in code by explicitly calling a bootstrap function
and passing it the name of the application's module ( For more information see Quick Start. |
In Angular 1, the In the first example, the We can specify multiple classes as shown in the second example. |
In Angular 2, the In the first example, the We can specify multiple classes as shown in the second example. Angular 2 also has class binding, which is a good way to add or remove a single class as shown in the third example. For more information see Template Syntax. |
In Angular 1, the In the first example, when the button is clicked, the The second example demonstrates passing in the |
The Angular 1 event-based directives do not exist in Angular 2. Rather, we define one-way binding from the template view to the component using event binding. For event binding, we define the name of the target event within parenthesis and specify a template statement in quotes to the right of the equals. Angular 2 then sets up an event handler for the target event. When the event is raised, the handler executes the template statement. In the first example, when the button is clicked, the The second example demonstrates passing in the For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events. For more information see Template Syntax. |
In Angular 1, the |
In Angular 2, the template no longer specifies its associated controller. Rather, the component specifies its associated template as part of the component class decorator. For more information see Architecture Overview. |
|
In Angular 1, the | bind to the |
The In Angular 1, the Routing is handled differently in Angular 2. |
In Angular 2, we use property binding; there is no built-in href directive.
We place the element's For more information on property binding see Template Syntax. In Angular 2, For more information on routing see Routing & Navigation. |
In Angular 1, the In this example, the |
The In this example, the The (*) before |
In Angular 1, the |
In Angular 2, two-way binding is denoted with [()], descriptively referred to as a "banana in a box". This syntax is a short-cut for defining both property binding (from the component to the view) and event binding (from the view to the component), thereby giving us two-way binding. For more information on two-way binding with ngModel see Template Syntax. |
In Angular 1, the In this example, the table row ( |
The Notice the other syntax differences:
The (*) before For more information see Structural Directives. |
In Angular 1, the In this example, the | bind to the |
The |
In Angular 2, we use property binding; there is no built-in src directive.
We place the For more information on property binding see Template Syntax. |
In Angular 1, the In the example, the |
In Angular 2, the In the first example, the Angular 2 also has style binding, which is good way to set a single style. This is shown in the second example. For more information on style binding see Template Syntax. For more information on the ngStyle directive see Template Syntax. |
In Angular 1, the In this example, if |
In Angular 2, the In this example, if The (*) before For more information on the ngSwitch directive see Template Syntax. |
Angular 2 pipes provide formatting and transformation for data in our template, similar to Angular 1 filters. Many of the built-in filters in Angular 1 have corresponding pipes in Angular 2. For more information on pipes see Pipes.
| Angular 1 | Angular 2 |
|---|---|
Formats a number as a currency. |
The Angular 2 |
Formats a date to a string based on the requested format. |
The Angular 2 |
Selects a subset of items from the defined collection based on the filter criteria. |
There is no comparable pipe in Angular 2 for performance reasons. Filtering should be coded in the component. Consider building a custom pipe if the same filtering code will be reused in several templates. |
Converts a JavaScript object into a JSON string. This is useful for debugging. |
The Angular 2 |
Selects up to the first parameter (2) number of items from the collection starting (optionally) at the beginning index (0). |
The |
Converts the string to lowercase. |
The Angular 2 |
Formats a number as text. |
The Angular 2 Angular 2 also has a |
Orders the collection as specified by the expression. In this example, the movieList is ordered by the movie title. |
There is no comparable pipe in Angular 2 for performance reasons. Ordering/sorting the results should be coded in the component. Consider building a custom pipe if the same ordering/sorting code will be reused in several templates. |
In Angular 1, we write the code that provides the model and the methods for the view in a controller. In Angular 2, we build a component.
Because much of our Angular 1 code is in JavaScript, JavaScript code is shown in the Angular 1 column. The Angular 2 code is shown using TypeScript.
| Angular 1 | Angular 2 |
|---|---|
In Angular 1, we often defined an immediately invoked function expression (or IIFE) around our controller code. This kept our controller code out of the global namespace. |
We don't need to worry about this in Angular 2 because we use ES 2015 modules and modules handle the namespacing for us. For more information on modules see Architecture Overview. |
In Angular 1, we define an Angular module, which keeps track of our controllers, services, and other code. The second argument defines the list of other modules that this module depends upon. |
Angular 2 does not have its own module system. Instead we use ES 2015 modules. ES 2015 modules are file based, so each code file is its own module. We For more information on modules see Architecture Overview. |
In Angular 1, we have code in each controller that looks up an appropriate Angular module and registers the controller with that module. The first argument is the controller name. The second argument defines the string names of all dependencies injected into this controller, and a reference to the controller function. |
In Angular 2, we add a decorator to the component class to provide any required metadata. The Component decorator declares that the class is a component and provides metadata about that component, such as its selector (or tag) and its template. This is how we associate a template with code, which is defined in the component class. For more information on components see Architecture Overview. |
In Angular 1, we write the code for the model and methods in a controller function. |
In Angular 2, we create a component class. NOTE: If you are using TypeScript with Angular 1 then the only difference here is
that the component class must be exported using the For more information on components see Architecture Overview. |
In Angular 1, we pass in any dependencies as controller function arguments.
In this example, we inject a We also guard against minification problems by telling Angular explicitly
that it should inject an instance of the |
In Angular 2, we pass in dependencies as arguments to the component class constructor.
In this example, we inject a For more information on dependency injection see Architecture Overview. |
Style sheets give our application a nice look. In Angular 1, we specify the style sheets for our entire application. As the application grows over time, the styles for the many parts of the application are merged, which can cause unexpected results. In Angular 2, we can still define style sheets for our entire application. But now we can also encapculate a style sheet within a specific component.
| Angular 1 | Angular 2 |
|---|---|
In Angular 1, we use a |
In Angular 2, we can continue to use the link tag to define the styles for our application in the In Angular 2, we can use the This allows us to set appropriate styles for individual components that won’t leak into other parts of the application. |
Currently the Angular 2 date pipe does not process string dates such as
"2015-12-19T00:00:00".
As a work around, subclass the Angular DatePipe with a version that can convert strings
and substitute that pipe in the HTML:
@Pipe({name: 'date', pure: true})
export class StringSafeDatePipe extends DatePipe implements PipeTransform {
transform(value: any, format: string): string {
value = typeof value === 'string' ?
Date.parse(value) : value;
return super.transform(value, format);
}
}Then import and declare that pipe in the @Component metadata pipes array:
pipes: [StringSafeDatePipe]