Angular 4 - Introduction : Day 1 (Tutorial For Beginners)
If you want to write modern client side applications - you must be well versed with JavaScript. Writing an enterprise level application in vanilla JavaScript is not an easy task.
Why re-invent the wheel, when somebody has already written a full blown framework for you. That is where libraries and frameworks come into the picture. You are here because you must have heard about the benefits and features provided by Angular. Let's discuss few key points and definitions -
Angular is a framework to write client side applications using HTML, CSS, and TypeScript (JavaScript's Superset). It is developed by Google. By framework, it means that it has all the features and code that is needed to write client side apps. For instance, it manages browser history for you, handles routing, can do templating logic, you can write testable code etc etc etc... we will discuss all the features in this Angular 4 Step by Step tutorial series.
There are various benefits of using Angular -
One more point - If you create a project using a well-known framework then it will be easy for future developers to pick up and understand your application - if they are aware of the framework.
In Angular, you write applications using TypeScript. It is a new programming language developed by Microsoft that provides strong typing and various object oriented features that are missing in JavaScript. Browsers do not understand TypeScript so we need to compile (actually transpile) TypeScript code into JavaScript. It is just a syntactic sugar provided over JavaScript. It is somewhat similar to modern programming languages like C# or Java.
NOTE: TypeScript is not ES6 or ES7.
- Angular JS was released in 2010 by Google. It became popular very quickly because of its feature set. Different versions of Angular JS were released like - 1.1, 1.2 and so on.
- Few years later, Google has completely rewritten the framework to match the needs of today's rich client side applications. They created a new version of Angular JS in TypeScript which is not backward compatible and released Angular 2 as a framework in 2016. They named it as Angular 2 removing the .js suffix.
- Few months later after the release of Angular 2, new features were introduced and various bug fixes were done and the new version was released as Angular 4. There is No Angular 3.
- What happened to Angular 3? Angular codebase is broken into parts/libraries such as core, compiler, animations, router etc. Each of them can have their own version. Router library reached version 3 and others were still at 2.3. Next version would be 2.4 but having version 2.4 for the router library is incorrect - so to avoid confusion they skipped version 3 and Angular 4 is released.
- So when we say Angular it means Angular (2+) and when we say Angular JS it means Angular JS(1+).
E.g.
So here we have different components arranged in a hierarchy. We have a header, main, sidebar component. App is the root component containing all other components. The sidebar component also takes data as input (article count). Angular extends HTML and gives us custom tags which are nothing just Components.
Don't worry if you could not understand. We will see each of these topics in detail. Stay tuned for more articles in this series to learn Angular from Scratch. Happy Reading.
Why re-invent the wheel, when somebody has already written a full blown framework for you. That is where libraries and frameworks come into the picture. You are here because you must have heard about the benefits and features provided by Angular. Let's discuss few key points and definitions -
What is Angular?
Angular is a framework to write client side applications using HTML, CSS, and TypeScript (JavaScript's Superset). It is developed by Google. By framework, it means that it has all the features and code that is needed to write client side apps. For instance, it manages browser history for you, handles routing, can do templating logic, you can write testable code etc etc etc... we will discuss all the features in this Angular 4 Step by Step tutorial series.
Why Use Angular?
- Code is more structured and maintainable.
- Testable application.
- Well tested and reusable code for common functionality (routing, browser history, forms etc.)
- Saves time by reusing code and focusing only on what is required.
- Fully opinionated framework - developed by some of the best minds. (Some people like this, some don't. Frameworks dictates how to structure and code your application whereas with libraries you can create applications with the structure you want)
One more point - If you create a project using a well-known framework then it will be easy for future developers to pick up and understand your application - if they are aware of the framework.
What is TypeScript?
In Angular, you write applications using TypeScript. It is a new programming language developed by Microsoft that provides strong typing and various object oriented features that are missing in JavaScript. Browsers do not understand TypeScript so we need to compile (actually transpile) TypeScript code into JavaScript. It is just a syntactic sugar provided over JavaScript. It is somewhat similar to modern programming languages like C# or Java.
NOTE: TypeScript is not ES6 or ES7.
What is Angular JS, Angular 2 and Angular 4?
- Angular JS was released in 2010 by Google. It became popular very quickly because of its feature set. Different versions of Angular JS were released like - 1.1, 1.2 and so on.
- Few years later, Google has completely rewritten the framework to match the needs of today's rich client side applications. They created a new version of Angular JS in TypeScript which is not backward compatible and released Angular 2 as a framework in 2016. They named it as Angular 2 removing the .js suffix.
- Few months later after the release of Angular 2, new features were introduced and various bug fixes were done and the new version was released as Angular 4. There is No Angular 3.
- What happened to Angular 3? Angular codebase is broken into parts/libraries such as core, compiler, animations, router etc. Each of them can have their own version. Router library reached version 3 and others were still at 2.3. Next version would be 2.4 but having version 2.4 for the router library is incorrect - so to avoid confusion they skipped version 3 and Angular 4 is released.
- So when we say Angular it means Angular (2+) and when we say Angular JS it means Angular JS(1+).
View from 30,000 ft (Head First Fan 😊)
- Every Angular app has at least one component and one module.
- A component is a self-contained unit that has data, view, and logic.
- Consider component as a plug n play kind of thing that can be used anywhere.
- For example - Header Component, Footer Component, Main Component etc (Refer below image)
- A component may contain other components i.e. they can be nested. For e.g. Sidebar component may contain a list of Article Component.
- Every component belongs to a Module i.e. Ng-Module.
- Consider module as an area where related components belong. For e.g. User Module contains components like Create User, Edit User etc. and Admin Module contains components like Add Roles, Edit Roles, Manage Users etc and so on.
- For other logic like fetching data, saving data or any other logic is contained inside Services.
- These components actually extend HTML by giving us custom tags similar to other HTML tags.
E.g.
<app> <header></header> <main></main> <sidebar [articleCount]="4"></sidebar> </app>
So here we have different components arranged in a hierarchy. We have a header, main, sidebar component. App is the root component containing all other components. The sidebar component also takes data as input (article count). Angular extends HTML and gives us custom tags which are nothing just Components.
Don't worry if you could not understand. We will see each of these topics in detail. Stay tuned for more articles in this series to learn Angular from Scratch. Happy Reading.
Comments
Post a Comment
Hey there, liked our post. Let us know.
Please don't put promotional links. It doesn't look nice :)