All you need to know before starting with Angular
Learning Angular: What is Angular?
Let me introduce you to Angular
Angular is a JavaScript open-source front-end web application framework. It is primarily sustained by Google together with an extended community of people and companies, to approach many of the challenges faced when developing single page, cross platform, performant applications. It is fully extensible and works well with other libraries. For additional details visit their official documentation pages.
My goal in this Angular real world example tutorial is to provide a complete guide for you to learn Angular step by step. We will start explaining the why’s and basic concepts and then continue exploring more advanced notions.
We began testing and experimenting with the very first release of Angular 2.0.0-beta.0 on December 2015 with hopes of finding a framework that was clearly better than its predecessor (Angular 1.x aka AngularJS).
I’m going to be completely honest with you here, we almost give up with all the inconsistency, breaking changes and a sort of identity crisis that happened in the middle of the Angular 2+ development.
It was a long way until Angular reached a solid milestone with Universal (server-side rendering), ahead-of-time compilation, lazy loading and a solid config working together nicely. You can check our most recent creation with Angular and all these features in Angular Admin Template.
Being working, using and trying things out with this framework from the very beginning made us really understand the way Angular was designed and how it evolved. We were witnesses of the constant improvements and saw how they were all aligned to one simple yet important goal: “Angular should be easy to develop”.
As I mentioned before, for some time during the process, it wasn’t. Now I can tell you, Angular is a super solid and stable framework you would love to work with.
Forget what you heard about Angular some years ago, things looked different than you were used to in Angular 1 and no doubt you may feel confused. Current versions of Angular had evolved to the point where you will be quickly impressed.
Angular is a great tool that will:
- Enable you to create software quicker and with less effort
- Result in a more maintainable software
- Encourage good programming practices and design patterns like MVC
- Allow you to collaborate easier with other people
- Allow you to become proficient in a reasonable time
- Address problems that may arise in your software architecture such as Dependency Injection, DRY (Don’t Repeat Yourself), etc
Angular for beginners: AngularJS vs Angular 2 vs Angular 4 vs Angular 8
Differences between Angular versions
When it all started, this framework was called AngularJS, and alludes to what we now know as Angular 1.x. Then, Angular 2 arrived as a complete rewrite of the framework, improving from lessons learned and promising performance improvements, and a more scalable and more modern framework.
The first version of Angular was named Angular 2. Later on, it was renamed to “Angular”. From now on, every time we use the term Angular we are referring to the latest version of the framework. (currently Angular 8)
More information about the latest versions: https://github.com/angular/angular/blob/master/CHANGELOG.md
What’s new in Angular compared to AngularJS?
Let’s go through the main differences between AngularJS and Angular:
- Angular is a complete rewrite of AngularJS
- An Angular application and its architecture are different from AngularJS. The main building elements for Angular are modules, components, templates, metadata, data binding, directives, services and dependency injection
- Angular does not have a “scope” concept or controllers, instead, it uses a component hierarchy as its main architecture
- Angular follows a modularity concept. Similar functionalities are kept together inside modules. This gives Angular an optimized lighter core
- The controller concept, which was present in AngularJS, was removed from Angular 2 and above which are component based UI. This help developers divide applications in components with desired features. These helped improve the flexibility and reusability compared to AngularJS
- Angular expression syntax is focused on “[ ]” for property binding, and “( )” for event binding
- With AngularJS, building a search engine (SEO) friendly Single Page Application was a major difficulty. But this bottleneck was eliminated with Angular 2 by enabling application rendering in the server. These tasks are possible thanks to the Angular Universal module.
Angular 2 also recommends using the TypeScript language, which introduces these features:
- Static Typing
- Object Oriented Programming based on classes
- Support reactive programming using RxJS
On top of TypeScript features, Angular also includes the benefits taken from ES6:
- For/Of loops
- Improved dependency injection
- Iterators
- Reflection
- Dynamic loading
- Asynchronous template compilation
- Simpler Routing
From Angular 2 to Angular 4
There were some major changes, but mostly on the project structure with lots of refactors that made the framework more stable.
- Smaller and faster. The upgrade from 2.0 to 4.0 has reduced the bundled file size by 60% while also improving the applications speed.
- Angular 4 is compatible with newer versions of TypeScript 2.1 and TypeScript 2.2.
- Angular Universal: The vast majority of the Angular Universal code has been merged into Angular core.
- Animation Package: Animations taken from the Angular core and set within their own package. Meaning that if you don’t use animations, the excess code won’t end up in your app.
From Angular 4 to Angular 8
Angular 8 is full of new features, bug fixes, performance improvements, and some code deprecation as a clean up of the refactors from previous versions.
- Optimizations to the build process that reduces the application size by removing unnecessary code.
- Material Design components with server-side rendering.
- Angular Universal improvements for code allocation between the server and client-side versions of the application.
- Improved compiler that supports incremental compilation meaning faster rebuilds.
- RxJS (reactive programming library) has been updated.
- BREAKING CHANGES: Angular now requires TypeScript 3.5 or later.
Moving ahead in this Angular tutorial, let’s setup the development environment. After the previous introduction about the current state of the Angular Framework, we are now ready to get started working on our angular app. The best way to learn Angular is by following this step by step tutorial for beginners.
In the following section we will go through the setup and requirements needed to start developing Angular apps.
Requirements and setup to start learning Angular
Let’s start building a complete web app sample project with Angular
In this section we will show you how to setup your local development environment so you can start developing Angular apps. A real application development happens in a local development environment that could be your personal machine. Follow our setup instructions to create a new Angular project.
Angular requirements: Install NodeJS and npm
Node.js and npm are fundamental to modern web development using Angular and other platforms. Node empowers client development and build tools. We are gonna use the node package manager (npm) to install all the JavaScript libraries dependencies. Get these right now if they’re not installed on your computer.
Note: Verify that you are running at least node 10.x and npm 6.x by running node -v and npm -v in a terminal/console window. Older versions may produce errors, but newer versions are always recommended.
The Angular CLI
Angular apps are created and developed primarily through the Angular CLI (command line interface tool) that helps project creation, adding files, and performing a variety of ongoing development tasks.
The Angular CLI takes care of configuration and initialization of various libraries. It also helps us adding components, directives, services, etc, to already existing Angular applications. It’s also worth mentioning that the CLI uses Typescript and Webpack for module bundling, Karma for unit testing, and Protractor for an end to end testing. It includes everything you need to start writing your Angular applications right away.
To install the Angular CLI globally, run the following command on your console npm install -g @angular/cli
You may need to add “sudo” in front of these commands to install the utilities globally. If you have an older version of the CLI installed in your computer, make sure you properly update it to the latest Angular CLI.
Now, let’s get started building the Angular app example project
Now that you have Angular and its dependencies installed, we can move on and start building our Angular app. Let’s get started!
Starting a new angular app with the CLI is easy! From your command line, run this command:
ng new “my-new-angular-app”The command above will create a folder named “my-new-angular-app” and will copy all the required dependencies and configuration settings. The Angular CLI does this for you:
- Creates a new directory “my-new-angular-app”
- Downloads and installs Angular libraries and any other dependencies
- Installs and configures TypeScript
- Installs and configures Karma & Protractor (testing libraries)
You can also use the ng init command. The difference between ng initand ng new is that ng new requires you to specify the folder name and it will create a folder copying the files while ng initwill copy the files to the current folder.
Now, you can cd into the created folder. To get a quick preview of your app inside the browser, use the serve command use ng serve.
This command runs the compiler in watch mode (looks for changes in the code and recompiles if needed), starts the server, launches the app in a browser, and keeps the app running while we continue building it.
The Webpack Development server listens on HTTP port 4200. Hence, if you open the url http://localhost:4200/ you will see the app running.
Using the Angular CLI to add new pages
In Angular, there’s some more boilerplate compared to AngularJS (Angular 1), but don’t panic. The new Angular CLI also has more tools to help you out with this.
For example, the new generator functions. They provide an easy way to create angular pages and services for your app. This makes going from a basic app to a full featured navigation web app much easier. I call that an easy learning curve :).
To create a new component you can use the following command:
ng generate component my-new-component
ng g component my-new-component # using the alias√ Create app/pages/my-page/my-page.html
√ Create app/pages/my-page/my-page.ts
√ Create app/pages/my-page/my-page.scss
The angular-CLI will add a reference to components, directives and pipes automatically in the app.module.ts.
Note: Please refer to angular CLI documentation for more information about adding components and other elements to your app.
🎉 CONGRATS! You built your first Angular application.
Follow the next tutorial to build an Angular CRUD example project step by step using Angular Material components. Also we will explain one by one the main building blocks of an Angular application as well as the best practices for building a complete app with Angular.
Hopefully, you didn’t run into any issues with this basic Angular tutorial, but if you did, feel free to leave a comment below.
➡ If you are looking for a complete Angular application with advanced navigation with side menus, tabs, and lots of beautiful and useful components you should definitely check Angular Admin Template and Angular Site Template.
Originally published at angular-templates.io.
