Web development Part 1: Angular and Git
Angular 1 : Released in October 2010
Angular 2 : Released in 2015 and is build using TypeScript. Features:
- Performance
- Mobile support
- Component based web development
- More language choice like TypeScript, PureScript, EcmaScript5/6 etc
ECMAScript : It is a JavaScript language standard TypeScript : It is a superset of javaScript
Check installed node, npm and angular version on your system :
node -v # Node version npm -v # npm version ng -v # Angular version
Create a Angular project helloWorld :
ng new helloWorld
In cmd, go to project folder helloWorld and type :
code .
To start project :
ng serve
In the browser type : http://localhost:4200/
Angular vs jQuery :
Text editor :
Command Line Shell :
Installing Git on PC :
To check installed git version : (Type in Windows PowerSchell/cmd)
git --version
This will give us below details :
To check default git configuration list type in cmd :
git config --list
Or, to configure name to be used by git :
git config --global user.name "Your Name"
To configure email :
git config --global https://www.garudax.id/redir/general-malware-page?url=user%2eemail <your email address>
To set a folder as a git repository folder :
- Create a folder : demo-git
- Open command prompt type: code
- In the VS code create a file : index.html
<!DOCTYPE html>
<html><head></head>
<body><h1>This is a demo git</h1></body>
</html>
4. Initialise demo-git folder as a git repository, in cmd type :
git init
5. To check git repository status type :
git status
6. To add file to staging area :
git add .
7. To commit changes to git repository :
git commit -m "demo-git added index.html file"
8. To check log of git commit :
git log --oneline
9. Modify index.html :
<!DOCTYPE html>
<html><head></head>
<body><h1>This is a demo git</h1><p>This is MK</p></body>
</html>
10. Add a sub-folder : test
11. Create a file hello-world.html inside test folder :
<!DOCTYPE html>
<html><head></head>
<body><h1>Hello World!</h1></body>
</html>
12. Continue...
Related Tools/articles :
SystemJS is an ES6 module loader :
Lifecycle Hooks in Angular : lifecycle hooks
Angular style guide : styleguide
Learn RxJS and Observable : ReactiveX
Happy Coding...