MENU
Featured

    Featured Posts

Angular Turorail 2:Angular Development Project Setup

on
  

v Angular Development Project Setup


Prerequisites For Angular

§  HTML
§  CSS
§  JAVASCRIPT
§  Basic of TypeScript

§  Get started with angular you need to know the basics of HTML CSS and JavaScript.
§  Angular however make use of typescript a very basic knowledge of typescript makes a lot of difference.

v Angular Development project setup
§   Installing the tools required
§   Node: Install the latest version of node. Here is the link to download and install the latest version
https://nodejs.org/en/download/

§   Once we have installed the NodeJS. if we want to check NodeJS is installed in our machine or not then Run windows command prompt as an administrator and execute the following command to verify the version of node installed on your machine.
node -v

Angular CLI : 
§  Install the latest version of Angular CLI by executing the following command from the windows command prompt. 
      npm install -g @angular/cli
§  I have installed on my machine. To verify the version of Angular CLI installed on your machine execute the following command.
ng -v
§  After you have the latest version of Node and Angular CLI installed, launch windows command prompt as an administrator and execute the following command.
ng new AngularDemo
§  This creates a new AngularProject with name AngularDemo.

§  If we would like to add angular routing then press y otherwise press N here  we don’t required Angular routing so we press N.


§  This command creates a new Angular Project with name AngularDemo. In windows command prompt change to the directory that contains your angular project using the following command.
cd AngularDemo
§  Once you are in the project directory, execute the following command to open the project with Visual Studio Code, by executing the following command from the windows command prompt 
code .
§  If we required Bootstrap for styles in our application then install Bootstrap by executing the following command from the command prompt.
npm install bootstrap@3 –save
§  Once Bootstrap is installed, open. angular-cli.json file and specify the path to the Bootstrap stylesheet (bootstrap.min.css) in the styles property as shown below.
"node_modules/bootstrap/dist/css/bootstrap.min.css"

§  At this point, save all the changes and run the angular project using the following command. This command not only compiles the angular application
                        ng serve -o
Configure your Angular Project to use Angular Material

§  To get started using an Angular Material, of course the first thing that you need to do is to install the Angular Material module. So, at the prompt type
 npm install --save @angular/material

§  In addition, the material module requires the installation of CDK. So, we'll also install that by doing 
npm install @angular/cdk@6.4.7 –save

§  Angular Material makes use of the Angular cdk for its components. In addition, when you are using Angular Material, you also need to import the Angular animations module into your Angular application.So, let's go ahead and install that too. 
npm install @angular/animations@6.1.7 --save 

§  Another module that I will install together is called HammerJS. The HammerJS module is used by Angular for supporting some gestures within your Angular application. So, that's the reason why we install HammerJS also within our application.
npm install hammerjs@2.0.8 --save

v To configure your project to use Angular material, type the following at the prompt to install Angular Material, Angular Animations and HammerJS:
npm install @angular/material@6.4.7 --save
npm install @angular/cdk@6.4.7 --save
npm install --save @angular/animations@6.1.7
npm install --save hammerjs@2.0.8

Configure to use Material Design Icons
§  Next, include the following into the <head> of index.html to make use of Material Design icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Configure your Angular Project to use Angular Flex Layout
§  I'm going to move on to install the Angular Flex-Layout within my Angular application.
npm install --save @angular/ flex-layout
npm install --save @angular/flex-layout@6.0.0-beta.18
Updating AppModule
§  Then, you need to import the Angular Animations Module, Angular Material Toolbar Module, Flex Layout Module and hammerjs into your root module (src/app/app.module.ts) as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//importing BrowserAnimationsModule,MatToolbarModule,FlexLayoutModule
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar'; 
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Adding a Material Toolbar
§  Open app.component.html and replace its contents with the following code:
<mat-toolbar color="primary"> <span>Gravity4Tech.blogspot.com</span> </mat-toolbar>
Adding Styles
§  Add the following styles to styles.scss file:
/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

body { 
    padding: 0; 
    margin: 0; 
    font-family: Roboto, sans-serif;    
  }
§  At this point, save all the changes and run the angular project using the following command. This command not only compiles the angular application
ng serve -o
Read more

Angular Tutorials 2:Angular Components

on

Angular  components
What is a component in Angular 

 §  A component in Angular is made up of these 3 things.

1.     Template

2.     Class

3.     Metadata

 §  A component is made up of three parts the first is a template which represents the view this is created using HTML in will be the user interface for your application.

 §  we have a class which is nothing but code that supports the view this is created using typescript class like any other programming language contains data properties and methods that can be used to control the logic of the view example we can have a method to show or hide an element based on the value of a property.

 §  Finally a component also had the metadata attached to it and this is the information that angular need to decide if the particular class is in fact in angular component just a regular class data is defined using a decorator which is a feature in typescript decorator is just a function that provide information about the class attached to it and for component.

 §   We use the Component decorator provided by Angular to add metadata to  

  the class.

 §  If you put together a template class and some metadata, we get an angular component.

 §  A class becomes an Angular component, when it is decorated with the Component decorator.

 §  let me go back to Visual Studio code and open the file app.component.ts

 §  We have a class with the name of the class is AppComponent this class currently contains one property which is the title and does not contain any methods keeping it simple to do this class.



 §  We have the meta data attached in the form of a decorator and to be more specific the component decorated.



 §  Component decorated is basically a function that attaches to the class right below and in our case, it is attached to the AppComponent class and it is this decorated the tells angular hey this is not a plane class this is a component.



 §  Component decorator contains both the metadata and the template which represent the view so as the part of the metadata we have a selector, template URL and style URL and selector is basically a custom HTML tag that can be used to represent this component. We can use this selector as a directive where we want to use this component.



 §  When you specify a selector in your Html angular renders  the component template in its place for example you can see the selected for AppComponent is app root and in  index.html  file it is used as a custom HTML tag so app-root in the opening and closing tag so angular renders the AppComponent template when it comes across this app root selector but what exactly is the template for this component is defined using the template URL Template URL points to an HTML file that represents the view for this component and if it take a look app.component.html template we have welcome to followed by the title in double curly braces in the title is nothing but the property in our class which is Gravity4Tech.



 §  So when you run application this HTML which is in app.component.html with replace in the index HTML file specified this component selector so that is how the HTML template gets rendered in the browser and finally we can have styles that apply only to this component and that is specified using the style URLs property.



 §  To CSS files right now this file is empty but you can style your component using this file that is basically the structure of a component.



 §  How you included new Component in your application but let's try to improve our understanding of components

 §  Let's create a new component by making use of angular CLI command.

     ng g c test
G for generate c for component followed by name the component is called as TestComponet

 §  after complete execution of this command a couple of things happen when we can see them in the integrated terminal itself you can see that four new files were created and also there was an update to the app module let's a look and see what happens in the folder itself.

 §   In the app folder a new folder test is created specifically for this component with this folder the typescript file the HTML and CSS are created a spect file is also created don’t really use now


Component Example : -

// Component decorator is provided by the Angular core library, so we
// have to import it before using it.
import { Component } from '@angular/core';

// The class is decorated with Component decorator which adds metadata
// to the class. We use the @ symbol to apply a decorator to the class
@Component({
    // component has several properties. Here we are using just 2. For
    // the full list of properties refer to the following URL
    // https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html
    // To use this component on any HTML page we specify the selector
    // This selector becomes the directive <my-app> on the HTML page
    // At run time, the directive <my-app> is replaced by the template
    // HTML specified below
    selector: 'app-root',
    // The template contains the HTML to render.
     templateUrl: './app.component.html',
   // you can style your component using this file
    styleUrls: ['./app.component.css']

})
// export keyword allows this class to be exported, so other components 
// in the application can import and use it if required
export class AppComponent {
    // name is a property and the data type is string and
    // has a default value "angular"
    name: string = 'Angular';
}

app.component.html
Notice in the HTML
  // we have a data-binding expression specified by double curly
  // braces. We have a defualt value "Angular" assigned to "name"
  // property in the AppComponent class. This will be used at runtime
  // inplace of the data-binding expression
hello{{name}}


Notice in the index.html page, we have used the AppComponent using the directive <my-app>. At runtime <my-app> directive is replaced with the HTML we specified using the selector property in the component decorator.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ComponentDemo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>





Read more

www.CodeNirvana.in

Powered by Blogger.

About

Site Links

Popular Posts

Translate

Total Pageviews