Skip to main content

Angular start 2

 Module in Angular:

Modules are logical boundaries in your application and the application is divided into separate modules to separate the functionality of your application. Let's take an example of app.module.ts root module declared with @NgModule decorator as below,


import { NgModule }      from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';


@NgModule ({

   imports:      [ BrowserModule ],

   declarations: [ AppComponent ],

   bootstrap:    [ AppComponent ],

   providers: []

})

export class AppModule { }

The NgModule decorator has five important(among all) options


The imports option is used to import other dependent modules. The BrowserModule is required by default for any web-based angular application

The declarations option is used to define components in the respective module

The bootstrap option tells Angular which Component to bootstrap in the application

The providers option is used to configure set of injectable objects that are available in the injector of this module.

The entryComponents option is a set of components dynamically loaded into the view.



What are decorators in angular?


A class decorator is a decorator that appears immediately before a class definition, which declares the class to be of the given type and provides metadata suitable to the type


A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where the expression must evaluate to a function that will be called at runtime with information about the decorated declaration.

The following list of decorators comes under class decorators,


@Component()


@Directive()


@Pipe()


@Injectable()


@NgModule()


What are selectores in Angular?

If we say in simple term selector is name which is used in our view like html tag. as we all know angular2 is component based. so selector is just provide the name of the component which is being called by its className in the directives list and called by selector name in the view of the another component like this:-


Selectors are like CSS selectors. They can be attribute selectors, tag selectors, class selectors, id selectors and combinations of these. 

If we say in simple term selector is name which is used in our view like html tag. as we all know angular2 is component based. so selector is just provide the name of the component which is being called by its className in the directives list and called by selector name in the view of the another component like this:-

Selectors are like CSS selectors. They can be attribute selectors, tag selectors, class selectors, id selectors and combinations of these. 
name: Use element name as selector. 'app-root' use as <app-root></app-root>

.class: Use a class name as a selector.'.app-root' use as <div class="app-root">

[attribute]: Use the name of the attribute as a selector.
'[app-root]' use as   <div app-root></div>


What happens in aot?

Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time. For AOT compilation, include the --aot option with the ng build or ng serve command as below,

ng build --aot
ng serve --aot
Note: The ng build command with the --prod meta-flag (ng build --prod) compiles with AOT by default.

Below are the list of AOT benefits,

  1. Faster rendering: The browser downloads a pre-compiled version of the application. So it can render the application immediately without compiling the app.
  2. Fewer asynchronous requests: It inlines external HTML templates and CSS style sheets within the application javascript which eliminates separate ajax requests.
  3. Smaller Angular framework download size: Browser doesn't require downloading the Angular compiler. Hence it dramatically reduces the application payload.
  4. Detect template errors earlier: Detects and reports template binding errors during the build step itself
  5. Better security: It compiles HTML templates and components into JavaScript. So there won't be any injection attacks


Commonds:
1)Generate new component:
ng g c componentname->componentname-component.ts

2)Generate new directive
ng g d directivename->directivename-directive.ts

3)Generate new service
ng g s common->common-service.ts

4)Generate new module
ng g m shared->shared-module.ts

5)Generate new pipe
ng g p trans-> trans-pipe.ts


Comments

Post a Comment

Popular posts from this blog

Node.js: Extract text from image using Tesseract.

In this article, we will see how to extract text from images using Tesseract . So let's start with this use-case, Suppose you have 300 screenshot images in your mobile which has an email attribute that you need for some reason like growing your network or for email marketing. To get an email from all these images manually into CSV or excel will take a lot of time. So now we will check how to automate this thing. First, you need to install Tesseract OCR( An optical character recognition engine ) pre-built binary package for a particular OS. I have tested it for Windows 10. For Windows 10, you can install  it from here. For other OS you make check  this link. So once you install Tesseract from windows setup, you also need to set path variable probably, 'C:\Program Files\Tesseract-OCR' to access it from any location. Then you need to install textract library from npm. To read the path of these 300 images we can select all images and can rename it to som...
1 comment
Read more

Node.js: Bundling your Node.js application to single executable for Windows.

In this article, we will see how to bundle Node.js application to a single executable for Windows. What's the need? Well recently, I had taken a work where I needed to convert pdf's(Of similar format) to excel sheet. So I was reading the pdf's from a folder in desktop and I was storing the output excel sheet into a separate folder on the desktop. I used Node.js for the program. Now the client wanted it to install the program on 25 windows machine and his budget was really low. So it was also not possible for me to install node.js for 25 machines and then install the required dependency for each one. One of the solution: While I was searching for an easy solution I found this amazing npm module pkg . This module can make your node.js app work like plug and play type. No need to install Node.js on the client machine or any other dependency.  It helps to make a commercial or trial version of your node.js application without exposing the source code. I found ...
Post a Comment
Read more

Globant part 1

 1)call,apply,bind example? Ans: a. call Method: The call method is used to call a function with a given this value and arguments provided individually. Javascript code: function greet(name) {   console.log(`Hello, ${name}! I am ${this.role}.`); } const person = {   role: 'developer' }; greet.call(person, 'Alice'); // Output: Hello, Alice! I am developer. In this example, call invokes the greet function with person as the this value and passes 'Alice' as an argument. b. apply Method: The apply method is similar to call, but it accepts arguments as an array. Javascript code: function introduce(language1, language2) {   console.log(`I can code in ${language1} and ${language2}. I am ${this.name}.`); } const coder = {   name: 'Bob' }; introduce.apply(coder, ['JavaScript', 'Python']); // Output: I can code in JavaScript and Python. I am Bob. Here, apply is used to invoke introduce with coder as this and an array ['JavaScript', 'Pyt...
Post a Comment
Read more