Starting Angular 2 for beginners (stable release)
We can start angular 2 by using the quick start provided by angular itself
All you need is A git setup for it. You need node package and node package manager.
you don't need to worry about node package manager because it comes along with the node itself after you have installed node. You can install git from its official website this will give you a utility called git bash. it will help you clone the projects and do all the prerequisite installation for the project
- Create a folder. Name it anything says angular 2
- Right-click on the project and click the option called "git bash here". this will pop up a window in front of you, it is a command line tool.
- Use this command to clone the startup kit- git clone https://github.com/angular/quickstart my app, my app is the name of the folder you can name it anything which is aligned with your project.This command will download all the necessary files
- Now if you open the folder in which you have cloned this you will see a package.JSON file in this all different dependencies are installed and to install them we will use the command Npm install. It will install all the dependencies listed in that package.JSON file, it will download the node modules for us it'll take a minute or so to download the dependencies
- Once done with step 4 we are good to go with running our main application by using the command npm start
Note: While following these steps if you run into some error while performing NPM install
using git bash, use normal cmd to do npm install
Make sure your node and npm both are updates (node > 4 and npm > 2)
- If everything goes well you will see your project running on localhost:3000 with this message
- So when you look into the folder structure of your project you will see an app folder. In that folder, you will see many js and ts files. We don't need to see the file with extension .js. we are concerned with the files ending extension with .ts. The js files are the trains piled files of .ts files
So How does the flow goes in Angular 2
- All the important files are placed in the app folder. there we can see many app.component files, we need not have to worry about other files we as of now have to focus on three main files
- Main.ts file
- App.module.ts file
- App.component.ts.
This is the link you need to look into
- Firstly the app will load index.html >>system.config.js >> app.component.ts >>
- App.component: This is the basic file you will be needing. This is the root component as the project grows you will see many nested components.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
- App.module: It define app module, it tells angular how to assemble the application. Right now it has only app component later on it will include many more component
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
- Main.ts: It compiles the application with git compiler and bootstrap the application to run on the server in this case lite server
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
I'll be updating this angular 2 quick start as there are many updations in the pipeline and I'll make sure to cover all the updates to the quick start and the major and minor differences.
Stay tuned as angular-cli has arrived
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPDATED
Angular 2 in depth in 2017
So as we are starting to learn about angular 2 in 2017 there are some changes which have been made since the stable version is released
So firstly we will quick start our angular 2 apps by using angular- CLI tool
11) Install angular CLI globally using this command
npm install -g angular-CLI
22) Create your new project y using this command
ng new my-app name
33) Go to the project directory, you will see many files there now use cmd in admin privileges and use this command to start/run your angular 2 app
ng serve
Now in your browser, you will see
Your app name works
ANGUlAR2 folder structure and what they hold in brief details
Now let’s dive into the folder structure
There are two main folder
1) Dist.
2) Src.
3) Config.
4) Ete.
5) Node modules
6) Public
7) Src
8) Tmp.
9) Typings.
10) Angular-CLI.json
11) Angular CLI build js
1) Dist folder will keep your Tran spilled files i.e. files converted into JS from transcript
2 2) Src folder will contain files which you will edit and transpile it is the main file where all the coding part is done and because we will be coding our app in transcript and it will convert in JS and store in dist folder
3) Config folder is used for testing
4) E2e folder is for end to ending test
5) Node modules folder is used for loading dependencies and also includes development only for running and all the relevant dependencies will be copied to dist folder’s vendor’s folder
6) Public: if you want to store some images videos you can store it in this folder
7) In src folder, there are few files which are important
a) Main.Ts: It is used to search component tag from app.component.ts this is the file we need to bootstrap our application
b) Index.html: It has imported main.ts file and this is the only file which gets serve by the serve it also imports system.config file this file mainly contains your third party libraries and mainly the files are controlled by angular CLI
c) Tsconfig file: default settings are enough but if you want something to change then you can do it here
d) Typings file this file basically declares a variable called modules which are for compiling and also typing are basically a bridge between your jS libraries and typescript code because there may be times where you want to use js libraries and you will require compiler support to change it to ts.
7 ) Angular CLI.json: it generally change the setup and
8 ) Angular build .js this is used for third party libraries
Typescript
Typescripts are basically made up of types, modules, and much more and since the browser cannot understand typescript we compile typescript into js before rendering it
Why use typescript?
General reasons are as follows
2) Next generation features; We can use classes, imports/ exports,
3) Missing JS features like Interfaces, generics
Reason for Angular2
Reasons stated above should be sufficient but
1) Angular 2 most of the documentation is in typescript
2) Angular 2 makes it default language
INSTALL TYPESCRIPT (OPTIONAL)
Npm install –g typescript
COMPONENT
It is the key part of our angular 2 apps. whatever we build is a component it talks to other component renders files, make HTML how to render files
So coming to the code part
If you open main.ts file you would see something like this
bootstrap(Angular22017AppComponent);
angular put APP in between the name specified by you because this is the root component which would hold all the component
Here we have a class called Angular22017Appcomponent this is the main app component class
We are exporting it so that we can use it outside it by using import statement as we are using above in the first line
@Component is called the decorator of the class it contains metadata and what this metadata does is that it keeps the information related to your class which you cannot keep in the body of the class it tells angular
This @ component contains properties let us discuss these properties in details
1) Selector: this is the selector tag which we use in our HTML tag in HTML tag it will look like
<anagular2-2017 –app > loading .. <angular2 -2017 - app>
2) We can also use it as inline component like as of div
3) By using angular brackets like { [angular2 -2017-app ]}
This can be used as
<div angular2 -2017-app>
This we can use but the correct method to use it in the original form
Template url : this the template url basically what happens is that whenever a compiler finds a tag then in index.html it will search for the template url html and will replace all the code with the html code written with the template
Flow goes like à index.html <my-tag>content <my-tag> à component.app.ts there template url = ‘app.component.html’ à in app.component.html <p> app.component.html works!< /p>
Basically what is happening is that the selector tag is telling angular 2 code that whenever you find any tag named this just replace it completely with the template HTML assigned to it or the inline HTML
Style Urls: these are basically our CSS,scss files. you can write multiple CSS files here but the thing to remember is it will only be available for your current component on which you are using
So now you have your own component and you want to use the selector tag and template URL tag in the main app component in order to do that
Firstly if you want to use inline HTML then
Instead of template URL just write URL and instead of square brackets use backticks ``
Module.id: this is used because at the time of production it will bind all the external HTML and CSS associated with your component and if you are having inline CSS and HTML attached then you don’t need them
A rule of thumb is that if you are having more than three tags then use external tags whenever possible
MAKING OUR OWN COMPONENTS IN ANGULAR 2
For making our own component use this command
ng generate component name of the component
say we take
ng generate component other
so it will make a folder name other in this all our files will be present in the HTML template file and CSS file, testing file app component file
so now we have our own component and now we have to name our selector in that sense so it may not interfere with the default HTML tags and the libraries which we are going to include in our angular app so the best practice is to use the abbreviation of your company name, project name, your name, if that is relevant
so now our new custom component looks like this
And we want to use this app-other tag in our root component i.e. angular2-2017.app.component
No, if we just put the tag app-other I in our template section of angular2-2017 component.ts file and expect to render the component then it will not work that way
This is because angular knows that where to look for if it finds the tag <angular2-2017-app>Loading please wait ...</angular2-2017-app> in main.ts file’s bootstrap section but for the tag app-other it is nowhere defined where to find the tag and render the HTML tag associated with it
So how to tell angular2 that app-other is a component even though while bootstrapping angular 2 will scan all the component defined but we have not yet defined that this tag is a component
Basically, we are not writing this tag in the main.ts file because it is already started. the correct way to do that is
Now our component are basically directives so the way to tell our default component that t how to use this directive or how to use these directives Is shown below, it’s like specifying the component in the directive section of the default component tag ]
So the first step to making it work is
1) Use the property called directive
Directive : [OtherComponent]
2) This will still not work because we need to import the class in order to use that so how to use that
3) Use import statement as
4) Import { OtherComponent } from ‘./other’
5) So the good practice is to have empty white space before and after your import module name
6) Now just have a look we are having the import from the .other file not giving the full path because it will by default to index.ts file and in that file it is already been written to export this class to outer world
7) We could have also had written it like and it would not have hurt at all
8) Import { OtherComponent } from ‘./other/.otherComponent’
9) This method is known as barrels it is like if we have another sibling p component then at the time of importing it to the main component we need not have to import several files related to it instead of that we can only import that one file.
Now our root component looks like this
Till now what we have done is
1) We have created a root component
2) We have Nested components
3) Now we will be using sibling of the component
The structure is like
Root component à nested component (app-other ) + à sibling component (app-another)
How to do that
1) We could have created a new component by using the command ng generate component another
2) This command can be done with abbreviations as well like
Ng g c another
3) But why to make another folder for this sibling component we can use the other folder only to create a new component which is the sibling of the prior component
4) We have to make use of the component.ts file so in order eliminate the extra file like HTML and CSS which comes by default
5) Now since we are making sibling nested component related to another component We can switch our cmd to that other folder and create new component known as another
We use this command to generate the new component in another folder
Ng generate component another –- flat – inline-template – inline-styles
--flat is used when we don’t want a new folder to get created and instead it will make sure that files be made in the same folder where this command is executed
– inline-template – inline-styles : Since we don’t want the default HTML and cs files as of now we can neglect that files by using this command
The Same command can be abbreviated in the form
Ng g c another – flat –it –is
No comments:
Post a Comment