Angular: step up and Set up your Environment

By -
Lets get started with the angular development environment setup.
Note: I have npm (3.8.6 version), node (6.0.0 version) installed on my machine. Install npm on your machine

I have downloaded the sample application from the official angular site:
Setup

Downloaded and unzipped the app in the setup folder.
Run npm install from command promt.

You can ignore the warning, your final project structure will look like this:

Now run npm start from command promt.




Let us check the importance of each file in this project:

Filename Description
package.json
It contains the metadata for the npm project. This helps npm to identify the project as well as provide the project dependencies.
src/app/app.component.ts
Defines the AppComponent along with an HTML template, CSS stylesheet, and a unit test. It is the root component of what will become a tree of nested components as the application evolves.
src/app/app.module.ts
Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare.
src/index.html
The main HTML page that is served when someone visits your site. Most of the time you'll never need to edit it.
src/main.ts
The main entry point for your app. Compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser.
src/styles.css
Your global styles go here. Most of the time you'll want to have local styles in your components for easier maintenance, but styles that affect all of your app need to be in a central place.
src/tsconfig.json
TypeScript compiler configuration for the Angular app


Useful link: Angular Index

Comments

Post a Comment

Popular posts from this blog

Writing your own ejabberd Module

By -
Coming soon: What is ejabberd? What is erlang? Installation details. I will start with writing the ejabberd module first. Once you have done all the installations: sudo make sudo make install sudo ejabberdctl start sudo ejabberdctl stop You can check the status using: sudo ejabberdctl status You can locate logs at: (With default installation) /var/log/ejabberd All config related changes will be mainly done at: /etc/ejabberd/ejabberd.yml You will need a basic understanding of erlang. You can take a short crash course at: http://www.erlang.org/course/course.html This is a good reference. Go to your ejabberd-15.07/src directory. This is where you will write the hook for your ejabberd server. Create a file, say mod_changeBody.erl. Your module name and file name should be same. Add the following basic contents into your erl file: -module(mod_changeBody). -behavior(gen_mod). -include("ejabberd.hrl"). -include("logger.hrl"). -expo
Read more

npm ECONNREFUSED error

By -
If you face error which says ECONNREFUSED while doing npm install <<package name>>, you are probably behind a proxy which is not allowing you to connect to the server and download the packages required. Just follow the below steps: npm config set proxy  http://your_proxy_name:port npm config set https-proxy https://your_proxy_name:port And then try npm install How to get npm config? npm get proxy will do the work :)
Read more

Conditional Flow - Spring Batch Part 6

By -
Jump to Conditional Flow using Custom Status There can be muliple scenario where you want your jobs to proceed depending on the outcome of your steps. For example, in case of our Corporate gifts shop, in case the automatic packaging of the gifts fails, we want some manual intervention to be done i.e. somebody should manually package the item.  IF-ELSE IF loop for packaging:     if packageStep fails                              then manualPackageStep                         else if packageStep executes successfully                              then sendOutForDelivery Entire code available at git repo:   https://github.com/ricsr/spring-batch-demo/tree/exercise_06 Using SpringBatch you can achieve it as follows: Create you manualPackageStep, which is very similar to your packageStep, except that it does the packaging manually. @Bean public Step manualPackageStep () { return this . stepBuilderFactory .get( "manualPackageStep" ).tasklet( new Tasklet() { @Override pu
Read more