Angular 2 is the next version of Google’s massively popular MV* framework for building complex applications in the browser (and beyond).
Angular 2 comes with almost everything you need to build a complicated frontend web or mobile apps, from powerful templates to fast rendering, data management, HTTP services, form handling.
Angular 2 is the next version of Google’s massively popular MV* framework for building complex applications in the browser (and beyond).
When Angular 2 was announced in October 2014 at the ngEurope conference, the ngCommunity was up in arms: what did this mean for their favorite framework they invested so much time into learning and building real things with? A lot of Angular developers were worried that Angular 2 would spell the end for Angular.
URL Link : http://learnangular2.com/templates/
After that, we start dissecting how Angular 2 apps function at their most fundamental level. We dive right into the heart of Angular 2 which includes understanding:
1-Components
2-Templating
3-Routing & Navigation
4-Services
5-Property, Event, Class & Style binding
6-Animation
1-1-Components :
he component is a controller class with a template which mainly deals with a view of the application and logic on the page,Components are at the heart of Angular 2 apps,
A component in Angular 2 is used to represent a View along with the associated logic (encapsulated as a Class),
Eg: components are following example is best,
Student marksheet is component are divided into two types ,
1-search student marksheet entering text box field,
2-search student marksheet show search result
Component are associated with :
1-view,
2-class
Example :
@Component({
selector: 'hello-world'
})
@View({
template: '<div>Hello {{name}}</div>' })
class HelloComponent({
name: 'Calvin Hobbes'
})
bootstrap(HelloComponent);
2- INPUTS :
Inputs is important in angular 2 because most developer you know how to pass data into components to dynamics configure them,
Define inputs :
@input
Eg :
@Component({
selector: 'user-profile',
template: '<div>{{user.name}}</div>'
})
export class UserProfile {
@Input() user;
constructor() {}
}
3-Output :
If you want to bind to particular event, you can use the new Event syntax in Angular 2, but what if you need your own custom event?
To create a custom event, we can use the new
Syntax:
@Output
Eg:
@Component({
selector: 'user-profile',
template: '<div>Hi, my name is {{user.name}}</div>'
})
export class UserProfile {
@Output() userUpdated = new EventEmitter();
constructor() {
// Update user
// ...
this.userUpdated.emit(this.user);
}
}
4-APP LIFECYCLE :
Angular apps go through a multi-stage bootstrap and lifecycle process, and we can respond to various events as our app starts, runs, and creates/destroys components.
5-Templates :
Templates are very similar to templates in Angular 1, though there are many small syntactical changes that make it more clear what is happening.
Eg:
<div>
Hello my name is {{name}} and I like {{thing}} quite a lot.
</div>
Following ways to data binding process :
1-{}RENDERING,
2-[]BINDING PROPERTIES,
3-(): HANDLING EVENTS
4-[()]: TWO-WAY DATA BINDING
6-EVENTS :
Events in Angular 2 use the parentheses notation in templates, and trigger methods in a component’s class
Syntax :
<button (click)="clicked()">Click</button>
EVENT OBJECT
To capture the event object, pass $event as a parameter in the event callback from the template:
Syntax:
<button (click)="clicked($event)"></button>
@Component(...)
class MyComponent {
clicked(event) {
event.preventDefault();
}
}
7-FORMS
Forms are the cornerstone of any real app. In Angular 2
Where we used to use ngModel and map to our internal data model, in Angular 2 we more explicitly build forms and form controls.
While it feels like more code to write, in practice it’s easier to reason about than with v1, easier to unit test, and we no longer have to deal with frustrating ngModel and scope data problems.
8-VIEWCHILD
Child components in our view can be accessed from our parent component easily with @ViewChild.
@ViewChild
To get access to a component and its methods, we can use the @ViewChild decorator.
For example, our <user-profile> component can have a method called sendData().
CHILD.COMPONENT.TS
@Component({
selector: 'user-profile'
})
export class UserProfile {
constructor() {}
sendData() {
//send data
}
}
Comments