2/8/20

Angular Project Setup and First APP - Part-1



Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.
Best way to create angular project using Angular CLI. Angular project are actually a bit more eleborate regarding there. There are a couple of files that need to be coverted before they can run in the browser and which has highly optimized the codes to the browser.

Angular CLI , We need to download.

--------------------------------------------

Node JS is a server side languge.
We need to download Node js leatest version.

----------------------------------------------

After open cmd run as administrator and type command.

install angular:
npm install -g @angular/cli
npm i -g @angular/cli
npm install -g @angular/cli@latest

create project (you may go first your prefer file location, then type the command):
ng new ny-dream-app

ng is angular cli. how to find the version of ng.
type command:
ng -v

locate the app:
cd my-dream-app

run app:
ng serve


still get any error when angular installation:
type command: npm config set strict-ssl false


Project structure
------------------------------------------
all files and directory are created by Angular CLI.

package.json   file-  here you create all the dependcies of your project like angular.

src folder - that is where your code is.

e2e folder - end to end testing

node_modules- this folder has all the depentencies

src/app/app.components.html -  this file has front page.

Note: Angular allows us to mix static html code and dynamic things we want to output in that code and actually this is one of the components angular works with. the app component. a components always has complete the html posibilly has some styling in the css file. it also typescript file.

typesript file will be converted to normal javascript by the build workflow.

data binding : perfect example for app.components.ts AppComponenet class that title. this senario called data binding.

app-root: this is app.component type script file

app.module.ts : for add some packges.

No comments:

Post a Comment

About

Hi, I'm Najathi.
I've started entrepreneurial company, Twin Brothers.Inc.
One is self-funded & the other is venture backed. I also send a weekly. where I share relevent, curated links.

Every Week I Publish a short post on writing, publishing, or content of IT Related

Contact Form

Name

Email *

Message *