Learn Building a Simple Website with Angular 2



This tutorial is a piece of our unique ‘Learn Angular 2 Development By Building 10 Apps’ course. In this blog, you will learn how to setup, install and use Angular 2 components to create a complete website.

Before we get started, let’s look at Angular 2 first.

Angular 2 is the newest version that is not exactly an upgrade but instead a rewrite of the original AngularJS framework. The developers bring about significant changes to the latest iteration including new syntax, language and a whole lot of features. Within a sea of changes, the objective of Angular remains the same. The framework maintains its speed, performance and expressiveness, adding simplicity and flexibility to the mix.

Angular 2 comes with significant changes including: focus on mobile development, TypeScript with ECMAScript functions, shift to modules, improved dependency injection, dynamic loading, diary logging and introduction of components and directives (which replace controllers and $scope).

Now that you know, how Angular 2 differs from the first version. Let’s see how you can build a simple Hello, World! website using the Angular 2 framework.

An initial video to help you get acquainted with the project and help you understand basic concepts of using Angular 2. You will learn how to setup quick start, how to build the website using Bootstrap, CSS, and Framework.

The idea is to separate the different elements of this website into Angular 2 components and then bring them all together. It includes a NAV bar component in the top, a jumbotron component, a home and an about component. We will also be implementing the Angular 2 router, which will allow us to navigate between home and about components. We will also add things like properties, for instance the logo or the project name will be a property of the NAV bar component.

[c5ab_button text=”Next Video” link=”https://blog.eduonix.com/video-tutorials/web-development-tutorials/learn-building-simple-website-angular-2-part-2/” target=”_self” icon=”fa fa-arrow-right” font_size=”14″ button_class=”Next Video” float=”right” button_color=”#1e73be” button_hover_color=”#0323c1″ ]


Please enter your comment!
Please enter your name here