<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>A brief Angular 4 History So far, three major Angular versions have been released – Angular v1.x (a.k.a AngularJS), Angular 2 and the newly released Angular 4 (also known as Angular). AngularJS has had a few major releases of its own with v1.1, v1.2 and so on, but let us stick with v1.x for all purposes of discussion. Angular v1.x and v2 are quite different in terms of architecture. While Angular v1.x (also known as AngularJS) was based on an MVC architecture, Angular 2 is based on a component/services architecture. Considering Angular was moving from MV* (Model View Whatever) pattern to components focused approach, the framework features were very different from each other and caused many application developers to rewrite a major portion of their code base. However, Angular v2 to v4 is a very different story. It is a rather progressive enhancement. A majority of changes are non-breaking. Angular 4 was released on 23rd March ’17. What happened to Angular v3? MonoRepo: Angular 2 has been a single repository, with individual packages downloadable through npm with the @angular/package-name convention. For example @angular/core, @angular/http, @angular/router so on. Considering this approach, it was important to have a consistent version numbering among various packages. Hence, the Angular team skipped a major version 3. It was to keep up the framework with Angular Router’s version. Doing so will help avoid confusions with certain parts of the framework on version 4, while the others on version 3. Angular 4 Enhancements Consider the following enhancements in Angular v4, - This release has considerable improvements in bundle size. Some have reported up to 60% reduction in Angular bundles’ file size - The ngc, AOT compiler for Angular and TypeScript is much faster - Angular 4 is compatible with TypeScript’s newer versions 2.1 and 2.2. TypeScript release helps with better type checking and enhanced IDE features for Visual Studio Code. The changes helped the IDE detect missing imports, removing unused declarations, unintentionally missing “this” operator etc. This article and the code sample demonstrates an Angular 4 application using TypeScript and Bootstrap 4. Please note that Bootstrap 4 is an alpha release at the time of writing this article. Editorial Note: This article assumes you are familiar with developing applications using Angular. If you are new to Angular, check some of our Angular tutorials. If you are new to TypeScript, read our TypeScript Tutorial Getting Started with Angular 4 project - SetUp Angular CLI Angular CLI is a preferred way to get started with an Angular project (v2.x and above). It not only saves time, but also makes it easy to maintain the code base during the course of the project, with features to add additional components, services, routing etc. Refer to the appendix at the end of this article for an introduction to Angular CLI. Get Angular CLI at https://cli.angular.io/ . Angular CLI latest version Since the CLI project is available as an NPM package, so you can install angular-cli globally on your system by running the following command: npm install -g angular-cli@latest However if you already have Angular CLI installed and want to upgrade to the latest version of Angular CLI, run the following commands: npm uninstall -g angular-cli npm cache clean npm install -g angular-cli@latest To create a new project with Angular CLI, run the following command ng new DinoExplorer DinoExplorer is the name of the new project. You may optionally use --routing parameter to add routing to the Angular project. However, if you prefer to configure and install Angular and Webpack manually, refer to the Get started with Angular 4 (manual way) section in the appendix. Free Interview questions here! https://mindmajix.com/bootstrap-interview-questions</h2> </div> </div>