Development Env.
Install nodejs(javascript engine) and npm(catalog of development pkgs)
<body>
<todo-app>Angular placeholder</todo-app>
</body>
</html>
a way to display the data values in the model to the user. In Angular, this is done using a template, which is a fragment of HTML that contains instructions that are performed by Angular.
import keyword is the counterpart to the export keyword.
decorator - which provides metadata about a class.
@Component decorator,it tells Angular that this is a component. The decorator provides configuration information through its properties, which in the case of @Component includes properties called selector and templateUrl.
selector property specifies a CSS selector that matches the HTML element to which the component will be applied.
templateUrl property is used to tell Angular how to find the component’s template.
class called AppComponent which provide the functionality required to support the data binding in the template. When a new instance of the AppComponent class is created, the model property will be set to a new instance of the Model class and getName function returns the value of the user property defined by the Model object.
5. Creating a Module / Putting the Application Together
app.module.ts
Every application has a root module, which provides Angular with the information that it needs to start the application.
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
6. Entry point into the application
main.ts
Angular applications also need a bootstrap file, which contains the code required to start the application and load the Angular module.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule); // browser-based applications
code statements in the bootstrap file select the platform that will be used and load the root module, which is the entry point into the application.
Install nodejs(javascript engine) and npm(catalog of development pkgs)
$node -v
$npm -v
Install Angular-CLI
$npm i -g
@angular/cli
$ng version
Anglar CLI 7.0.1
.
.
.
Install Visual Studio Code(editor) → View →
Terminal
Once you have Node.js, NPM, an editor, and a browser, you have enough of a foundation to start the development process.
$mkdir ng7Demo
$cd ng7Demoo
$ng new ng7App
1) would you like to
add Angular routing? Y
2) which stylesheet
format would you like to use ? Sass
$code .
This will open code
file of application
package.json - list of the software packages that are required for a project.
tsconfig.json - TypeScript compiler requires a configuration file to control the kind of JavaScript files that it generates.
index.html -
Starting Server
$ng serve
OR
$npm start
This command tells npm to run the start script, which starts the TypeScript compiler and the light-weight development HTTP server
________________________________________________________________________
Entry point into the world of Angular :-
1. Preparing the HTML File
index.html<body>
<todo-app>Angular placeholder</todo-app>
</body>
</html>
2. Creating a Data Model
model.ts
- ES5
var model = {
user: "Adam",
items: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
When you save the changes to the file, the TypeScript compiler will detect the change and generate a file called model.js
- ES6
export class Model {
user;
items;
constructor() {
this.user = "Adam";
this.items = [new TodoItem("Buy Flowers", false),
new TodoItem("Get Shoes", false),
new TodoItem("Collect Tickets", false),
new TodoItem("Call Joe", false)]
}
}
export class TodoItem {
action;
done;
constructor(action, done) {
this.action = action;
this.done = done;
}
}
class keyword is used to define types that can be instantiated with the new keyword to create objects that have well-defined data and behavior.
export keyword is used to identity data or types that you want to use elsewhere in the application.
==> TypeScript compiler produced JavaScript code that will work in browsers that don’t implement that feature
"use strict";
var Model = (function () {
function Model() {
this.user = "Adam";
this.items = [new TodoItem("Buy Flowers", false),
new TodoItem("Get Shoes", false),
new TodoItem("Collect Tickets", false),
new TodoItem("Call Joe", false)];
}
return Model;
}());
exports.Model = Model;
var TodoItem = (function () {
function TodoItem(action, done) {
this.action = action;
this.done = done;
}
return TodoItem;
}());
exports.TodoItem = TodoItem;
3. Creating a Template
app.component.html
a way to display the data values in the model to the user. In Angular, this is done using a template, which is a fragment of HTML that contains instructions that are performed by Angular.
<h3 class="bg-primary p-a-1">{{getName()}}'s To Do List</h3>
Including a data value in a template is done using double braces—{{ and }}—and Angular evaluates whatever you put between the double braces to get the value to display.
The {{ and }} characters are an example of a data binding, which means that they create a relationship between the template and a data value.
In this case, the data binding tells Angular to invoke a function called getName and use the result as the contents of the h3 element.
4. Creating a Component
app.component.ts
An Angular component is responsible for managing a template and providing it with the data and logic it needs. At the moment, I have a data model that contains a user property with the name to display, and I have a template that displays the name by invoking a getName property. What I need is a component to act as the bridge between them.
import { Component } from "@angular/core";
import { Model } from "./model";
@Component({
selector: "todo-app",
templateUrl: "app/app.component.html"
})
export class AppComponent {
model = new Model();
getName() {
return this.model.user;
}
}
app.component.ts
An Angular component is responsible for managing a template and providing it with the data and logic it needs. At the moment, I have a data model that contains a user property with the name to display, and I have a template that displays the name by invoking a getName property. What I need is a component to act as the bridge between them.
import { Component } from "@angular/core";
import { Model } from "./model";
@Component({
selector: "todo-app",
templateUrl: "app/app.component.html"
})
export class AppComponent {
model = new Model();
getName() {
return this.model.user;
}
}
import keyword is the counterpart to the export keyword.
decorator - which provides metadata about a class.
@Component decorator,it tells Angular that this is a component. The decorator provides configuration information through its properties, which in the case of @Component includes properties called selector and templateUrl.
selector property specifies a CSS selector that matches the HTML element to which the component will be applied.
templateUrl property is used to tell Angular how to find the component’s template.
class called AppComponent which provide the functionality required to support the data binding in the template. When a new instance of the AppComponent class is created, the model property will be set to a new instance of the Model class and getName function returns the value of the user property defined by the Model object.
5. Creating a Module / Putting the Application Together
app.module.ts
Every application has a root module, which provides Angular with the information that it needs to start the application.
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
6. Entry point into the application
main.ts
Angular applications also need a bootstrap file, which contains the code required to start the application and load the Angular module.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule); // browser-based applications
code statements in the bootstrap file select the platform that will be used and load the root module, which is the entry point into the application.
7. Running the Application
The browser executed the code in the bootstrap file, which fired up Angular, which in turn processed the HTML document and discovered the todo-app element.
The selector property used to define the component matches the todo-app element, which allowed Angular to remove the placeholder content and replace it with the component’s template, which was loaded automatically from the app.component.html file. The template was parsed; the {{ and }} data binding was discovered, and the expression it contains was evaluated, calling the getName and displaying the result.
No comments:
Post a Comment