DEV Community: Zelimir Stefanovic

How ANGULAR Trigger index.html And Start Working

Zelimir Stefanovic — Mon, 03 Dec 2018 21:44:58 +0000

When we use CLI tool, we can easily create and building angular application and start with developing after a few commands on the CLI.

But how angular start working and how trigger index.html?

This is generally how the angular starts with work.

main.ts

The main.ts file, that is the first code which gets executed. The job of main.ts is to bootstrap the application. It loads everything and controls the startup of the application.

Most importantly here is the line where bootstraps start our angular app by passing app module to the method. AppModule refers to the app.module.ts file.

app.module.ts

The most important part from a file, when angular starts, is bootstrap array in @NgModule.

It basically there is a list of all components which should be known to Angular at the point of time it analyzes our index.html file and here the circle closes.

It's closed because here, we reference our app component.

By default, angular does not scan all of our files. So, if we don't tell it that the new component exists, angular doesn't know it.

index.html

SUMMARY

Angular started with main.ts.
Then we bootstrap an angular application and we pass app.module.ts as an argument. In app.module.ts we tell angular: "There is the app component which you should know when you try to start yourself".
And angular now analyze this app component, reading the set up we pass there and there is SELECTOR app-root.
Now, angular is enable to handle app-root in the index.html and knows rules for the SELECTOR.
SELECTOR should insert the app components and have some HTML code - a template attached to him - html component.
This is how Angular application starts.

Useful Keyboard Shortcuts Eclipse, IntelliJ, Win, Browser

Zelimir Stefanovic — Tue, 27 Nov 2018 13:24:09 +0000

The very powerful weapon for improving productivity and speed of work during any work on the computer.

This is some of keyboard shortcuts which I'm using. Many of these are common in different programs.

Also, there are probably many other useful shortcuts which I haven't met with. Be free and write out what your favorite keyboard shortcuts are.

Keyboard shortcuts for:

Eclipse
IntelliJ - Eclipse compared with IntelliJ
- Debugging keyboard shortcuts
- Work with Version control - IntelliJ
Windows 10
Browser
Command Line

Eclipsee

Shortcuts	Description
F3	Jumps to include file or variable declaration/definition.
ALT + LEFT, ALT+Right	Navigate through my source to back and forward.
ALT + Up/Down	Active row up/down
CTRL + Shift + /	Show or hide methods body
CTRL + Shift + T	Open a class
CTRL + SHIFT + G	Open call hierarchy by packets (CTRL+ALT+H)
CTRL + SHIFT + O	Import files
CTRL + SHIFT + L	Search word in project
CTRL + SHIFT + Up/Down	Switch between methods in a class
CTRL + 1	Show possible actions on line where is error
CTRL + 3	Search options and component in eclipse
CTRL + F7	Change view in Eclipse
CTRL + F8	Change View - debug, resource, spring..
CTRL + F11	Run active test class or active module of active class
CTRL + E	Show open tabs
CTRL + O	Show methods in activ class
CTRL + D	Delete active row
CTRL + J	Nice search
Ctrl + M	Max or normal active view
CTRL + Space	Give possible solutions

Eclipse compared with IntelliJ

Eclipse	IntelliJ	Description
F3	CTRL + B	Jumps to include file or variable declaration
ALT + LEFT, ALT+Right	SAME	Navigate through my source to back and forward
ALT + Up/Down	CTRL + SHIFT + UP/DOWN	Active row up/down
CTRL + Shift + T	CTRL + N	Open an class
CTRL + Shift + R	CTRL + SHIFT + B	Open an document
CTRL + SHIFT + G	ALT + F7	Open call hierarchy by packets
	Ctrl + Shift + F7	select same methods in file
	Ctrl + Alt + F7	show all calls for that method
	CTRL + I	Implemented methods
	CTRL + O	Show methods whick we can override ....
CTRL + SHIFT + Up/Down	ALT + UP/DOWN	Switch between methods in a class
CTRL + 1	ALT + ENTER	Show possible actions on line where is error
	Shift + ESC	Close view
CTRL + 3	CTRL + SHIFT + A	Search options and component
CTRL + F7	CTRL + TAB	Change view
	Ctrl + Shift + C	Copy Path of file
CTRL + F11	SHIFT + F10	Run activ test class or active modul
	SHIFT + F9	Run Debug
CTRL + E	SAME	Show open tabs
	Ctrl + Shift + E	Recent edited files popup
CTRL + O	CTRL + F12	Show methods in activ class
	Ctrl + H	Type hierarchy
	Ctrl + ALT + M	Method from existing code
	Ctrl + G	Go to line
	Ctrl + Shift + H	Method hierarchy
CTRL + D	CTRL + Y	delete active row
Ctrl + M	CTRL + SHIFT + F12	Max or normal active view
	ALT + SHIFT + I	Inspect code from file
	Ctrl + Alt + S	Open Settings dialog
	Ctrl + Alt + Shift + S	Open Project Structure dialog
	Alt + Shift + F	Add to Favorites
	ALT + 2	Open favorites location
	CTRL + J	Show shortcuts for code
	ALT + N	Activate Navigate Tab
	ALT + INSERT	Generate base methods
	Typing '/**'	then pressing Enter , Java Doc
	CTRL + N	right click
CTRL + Space	CTRL + Space	Show posible actions
	double presing SHIFT	Search everything

Eclipse and IntelliJ debugging keyboard shortcuts

Eclipse	IntelliJ	Description
F6	F8	Step over
F5	F7	Step into
	Shift + F7	Smart step into
F7	Shift + F8	Step out
Ctrl + R	Alt + F9	Run to cursor
Ctrl + U	Alt + F8	Evaluate expression
F8	F9	Resume program
	Ctrl + F8	Toggle breakpoint
	Ctrl + Shift + F8	View breakpoints

Work with Version control - IntelliJ

Shortcuts IntelliJ	Description
Ctrl + K	Commit
Ctrl + Shift + K	Push
Ctrl + T	Update project
Ctrl + Alt + Z	Revert changes
Ctrl + Alt + Shift + Down	Next Change
Ctrl + Alt + Shift + Up	Previous Change

Windows 10

Shortcuts	Description
F6	activate another part of program
F3	search in explorer
F4	adress line in explorer
F10	activate meni if program has it
WIN + E	open File explorer
WIN + L	lock PC
WIN + R	open Run dialog
WIN + Number	open pinned shortcut
CTRL + W(ALT + F4)	close windows
ALT + TAB	toggle between programs
WIN + TAB	toggle between programs
CTRL + SHIFT + down arrow	select until end of line
CTRL + SHIFT + up arrow	select until beginning of line
CTRL + Home	move cursor to top/start of document
CTRL + End	move cursor to bottom/end of document
CTRL + F	find on screen

Some usefull keyboard shortcuts for a browser

Browser Shortcuts	Description
CTRL + TAB	go to the next tab
CTRL + Page up/ Page down	go to next or previous tab
CTRL + T	Open new tab
CTRL + SHIFT + T	reopens the tab you last closed, works multiple times
F5	reload page
CTRL + L	activate url address line

Command Line commands:

MKDIR folder_name - Create a new folder
MD folder_name1 folder_name2 - create multiple folders
copy NULL fileName.txt - create an empty file
dir - show files and folders
F7 - Displays a selectable list of previously executed commands
systeminfo > c:\mycomputerinfo.txt - save in file command line text
tree - view directory structure
title new_title text - change title of Command propmt
CLS - clear screen

There are also many tools and ways to add your own keyboard shortcuts.

Start, Development and Basic Features of Angular

Zelimir Stefanovic — Thu, 22 Nov 2018 23:25:23 +0000

This is about the start, development and basic features of Angular without too much details.

2009 - Angular was originally developed by Misko Hevery in 2009.
Somewhere at the end of 2009, a company where he worked, decided to put the code on Git and become opensource.

2010 - The initial rebase was in 2010 and the most maintained by Google.
AngularJS is JavaScript-based framework, work like Single page application with MVC architectural pattern.

2013 - In 2013-14 appeared other web frameworks and tools, the most famous is React, developed by Facebook developers.

2016 - Right at the start, React show good results and better performance. The angular team needed to change something and they decided not to upgrade angularjs.
Instead, they decided to develop a new framework from the start. The just keep first part of name, cut off 'JS', add version 2, and in September 2016 Angular 2 was created. The same team develops AngularJS and Angular 2.

2018 November - Current version: Angular 7

AngularJS	Angular 2
Javascript	Typescript(a superset of JavaScript)
MVC	Component-MVC
	Tooling support, CLI, IDEs, plugins...

Support for AngularJS stopped with the latest version 1.7

The rule for Angular 2 is: every 6 months new version.

Angular 2 Basic Features

Component-MVC pattern
Each component class is an independent unit, it is highly reusable.
Each component required logic, view, and data as one unit. That means component use MVC pater and Angular framework use components -> Components-MVC pattern.
It's easy adding more components to your existing application.
Building an SPA using Angular 2 components is like building a house using lego blocks. Just add more lego blocks to make your building bigger.

Angular 2 framework consists of several libraries, some core and other optional.
Many of those libraries are modules (i.e. FormModule, HttpModule, and RouterModule).

Angular CLI stands for Angular Command Line Interface.
It is recommended to use angular CLI for creating angular apps as you don't need to spend time installing and configuring all the required dependencies and wiring everything together.

Using Typescript we can use data models and type safety.

The Angular team also did a great job in the documentation, have the strong community and backed by Google.