Last Updated on September 27, 2019 by Aram
Angular is the leading comprehensive modern front-end development framework that is regularly updated by the Angular team of Google.
Angular is written in TypeScript not JavaScipt. Why? Because of many features that TypeScript provide including refactoring, navigation, auto-completion, expressive definition of types, explicit definition of abstractions and makes the code much readable than JavaScript.
Nevertheless, TypeScript is a superset of JavaScript, and both inherit the specifications of ECMA 2015, so if you already know JavaScript, it will be
Viktor Savkin explains thoroughly why Angular was written in TypeScript
In this introduction to Angular 7, I’ll show you how to prepare your development environment to start building your amazing modern websites with the cutting-edge framework Angular 7, I will show you how you can install the prerequisites needed to run your first Angular 7 app.
This article will cover the full process starting from installing node.js, to installing Angular CLI using the npm, and then creating our first Angular 7 project using the Angular CLI (Command-Line Interface), and then we will get introduced to the project structure of Angular 7, next we will see how the Angular CLI will significantly boost our productivity by generating the needed files following the Angular Style guide by Jon Papa.
In this article, I will be using the terms web app, application, app, or website interchangeably , all these share the same meaning.
Always get back to the official website of angular for full documentation, Tour of Heroes tutorial, Style Guide and many other resources.
So let’s get started with our introduction in Angular 7.
Preparing Angular 7 Development Environment
Like any other software development framework or SDK, you have to prepare your machine to start coding, It is always important to have your environment properly ready prior writing your first line of code.
Just make sure you have all what you need to run your first Angular 7 app.
Install Visual Studio Code IDE
You don’t have to use VS Code for your Angular 7 development, however, I highly recommend it as the best IDE for Angular and front-end web development in general.
VS Code is super light and easy to setup, it has a great range of built-in code editing, formatting, refactoring and intellisense features and there is a huge number of extensions that will significantly increase your productivity.
Some useful VS Code extensions are: Angular v7 Snippets, TSLint, HTML Snippets, IntelliJ IDEA Keybindings and many more.
You can download VS Code from here Download Visual Studio Code
Install node.js
Angular requires node.js for managing npm dependencies, as well to support some browsers when loading particular Html 5 technologies and hot-reloading (watching changes to source code, and automatically reflecting(refreshing) them on the browser.
So you should install node.js on your local development machine before starting with developing Angular 7, node.js will serve your run-time environment as your localhost.
We use node.js as it provides the best and greatest run-time environment for front-end development.
For more details, you can refer to this StackOverflow Answer for a comprehensive explanation of why you would need node.js to use Angular.
Use npm to install Angular CLI
npm stands for node package manager, it is the world’s largest software registry of JavaScript Libraries, you will use the npm all the way through your development process to install JavaScript libraries and tools.
You just type npm install [libraryName] and the library will be installed into your project’s node_modules folder.
npm gets installed with node.js so you don’t need to install it separately.
You can verify if both node.js and npm are properly installed and know the installed versions by typing the following commands into your command prompt or Visual Studio Code terminal:
> node -v
v10.13.0> npm -v
6.4.1
The latest lts (long term support) version of node.js is v10.13.0 ( 30 OCT 2018 update) , if you already have node.js installed, I’d recommend you upgrade to the latest lts version.
npm latest version is 6.4.1
Using npm, we will install our first great tool, which is the Angular CLI. From your terminal, let’s install Angular CLI:
> npm install @angular/cli -g
The above command will tell npm to install the Angular CLI tool, and the -g option will make the installation global, so you can use the Angular CLI for multiple angular projects.
Once installed, you can find the version of your Angular CLI by typing the command:
ng version
A CLI is a Command-line Interface tool. Angular CLI is a great tool to boost the developer’s productivity when building Angular applications.
It automates and simplifies the creation, modification and structuring of Angular files, provides easy commands for unit and end-to-end (e2e) testing and runs development server with live reload so the developer can see code changes take effect just-in-time.
To learn more about Angular CLI and what great features it include, check its official website.
Create a New Angular 7 Web App
From your terminal, we will create our Angular 7 web app using the following command:
> ng new my-amazing-website
ng is the keyword to access the Angular CLI functionalities.
new means create a new Angular 7 web app with the minimum needed files to setup a basic angular website
This is a new feature in Angular 7, where the Angular CLI will ask you if you would like to add Angular Routing.
Angular Routing is an important module of the Angular framework which enables user to navigate different angular views, it allows you to link your angular components to urls that you define, so once the user types in or pastes a url into the browser navigation bar, angular router will route the url to the specified component to display it.
I will explain this further through a separate tutorial. But for now, choose (no) as we don’t need to use the Angular routing feature in our introductory Angular project.
After that the CLI will ask you to choose which styling format you want to use. (CSS, SCSS, SASS, LESS, Stylus). Let’s go with CSS for now.
This will generate a new folder (my-amazing-website), and all the essential files to easily let you start with Angular development. The installation might take some time depending on your internet connection speed.
Then from the terminal, let’s explore our newly created angular project and run the website:
> cd my-amazing-website
> ng serve –open
ng serve is the command that will compile your Angular application, open the run-time environment (localhost), giving it a port (usually 4200), and then enable the live reload feature.
–open option opens your default browser once the ng serve command finishes its process.
Once the browser is opened, you should see the angular logo, as the following:
Angular 7 App Structure
Now let’s open Visual Studio Code, and dive into the world of Angular 7.
From Visual Studio Code, choose select folder, and locate to my-amazing-website folder. Once loaded, you should see the following project structure on the explorer panel of VSCode.
As you can see above, there are many files that have been auto-generated for you by the Angular CLI tool.
These files provide you with the application shell structure that will allow you to easily get started with developing your website, so you don’t have to worry about preparing the configurations and writing boilerplate code.
Angular 7 App Files Explanation
tslint.json , this file includes configuration for typescript linter which is a static code analysis tool that helps with detecting code issues related to readability, functionality and formatting. Check tslint github page for more details
tsconfig.json , a typescript compiler configuration file. Check this page from typescriptlang.org for more details.
package.json this is npm configuration file. It includes details about your website’s package dependencies along with details about your own website being a package itself.
package-lock.json this is an auto-generated and modified file that gets updated whenever npm does an operation related to node_modules or package.json
angular.json a configuration file related to your angular application, it defines the structure of your app and includes any settings associated with your application. you can specify environments on this file (development, production), where each environment will have its own settings such as optimizations.
.gitignore this is related to the source control git, it includes files that should be excluded from being committed into your git repository
.editorconfig a simple file that helps maintain consistency in code editors to organize some basics such as indentation and whitespaces
src folder this is the folder that holds the main code files related to your angular application
app folder this folder holds the files of the app component
app.component.css the cascading style sheets file related to app component
app.component.html the html file related to app component. This is the template file that will be used by angular to do the data binding
app.component.spec.ts the unit testing file related to app component. this file along with other unit tests can be run from Angular CLI by the command ng test
app.component.ts the typescript file that includes the view logic behind the component.
app.module.ts the typescript file that includes all the dependencies for the website. This defines the needed modules to be imported, the components to be declared and the main component to be bootstrapped.
assets folder this is a placeholder for any resource files to be used in the application such as images, locales, translations …etc.
environments folder , this holds environment configuration constants that help when building the angular application in different settings (development, production), the constants are defined in 2 separate ts files (environment.ts and environment.prod.ts), where these constants will be used within the angular.json file by the Angular CLI. For example, when running the ng build command, it will build the application using the development environment settings, whereas the command ng build –prod will build the project using the production environment settings.
browserlist a small file used by autoprefixer that adjusts the CSS to support a list of defined browsers
favicon.ico this is the small icon that appears next to the browser tab of a website
index.html this is the main entry html 5 file that holds the high level container for the angular application.
karma.config.js the config file for the Karma Test Runner, Karma has been developed by the AngularJS team which can run tests for both AngularJS and Angular 2+
main.ts as defined in angular.json file, this is the main ts file that will first run. This file bootstraps (starts) the AppModule from app.module.ts , and it can be used to define global configurations
polyfills.ts a set of workaround lines of code that can be used to provide compatibility support for older browsers. Angular 7 code is written mainly in ES6+ language specifications which is getting more adopted in front-end development, so since not all browsers support the full ES6+ specifications, pollyfills can be used to cover whatever feature missing from a given browser
styles.css a global css file to be used by the angular application
tests.ts the main test file that the Angular CLI command ng test will use to traverse all the unit tests within the application and run them
tsconfig.app.json overrides the tsconfig.json file with app specific configurations
tsconfig.spec.json overrides the tsconfig.json file with app specific unit test configurations
tslint.json overrides the tslint.json file with app specific configurations
Conclusion
This is only the tip of the iceberg, Angular framework is a huge world in which you can build significantly complex apps that will perform extremely well and is largely cross-compatible across the latest browsers.
This article provides only a introduction to Angular 7. We prepared the development environment by installing the prerequisites including Visual Studio Code IDE, node.js, Angular CLI, and then we initiated our first Angular 7 website using the Angular CLI command ng new , and we run the app on localhost using the command ng serve.
I hope this bit of knowledge was helpful to get you started with Angular 7 and to motivate you to learn more. Stay tuned for my upcoming tutorials that will help you learn Angular and build your amazing websites.
Bonus
Enjoy this glamorous music by Francesco Geminiani
ng -version should be ng version
Fixed. Thanks for noticing 🙂