未加星标

Jump start your Angular project with Angular CLI

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Jump start your Angular project with Angular CLI

Solar eclipse image via Shutterstock

While Angular CLI is still in beta, most of the developers like the ease of getting started with new projects. In this article, Java Champion Yakov Fain shows you how to create, bundle, and deploy a simple project with Angular CLI.

Angular 2 , the complete re-write of the popular AngularJS framework was released in September of 2016. In March 2017 Angular 2 will be renamed to Angular, so I’ll be using the new name in this article.

Initially, the entry barrier into the world of Angular development was pretty high because of the need to learn and manually configure multiple tools. Even to get started with a simple application, you’d need to learn the TypeScript language (an easy job for Java developers), learn how to configure and use the TypeScript compiler, ES6 modules, a module loader (e.g. SystemJS), test runners, npm, a dev web server. To work on a real-world project, you’d also need to learn how to test and bundle your app for deployment.

To jumpstart the development process, the Angular team created a tool called Angular CLI (see https://github.com/angular/angular-cli ), which is a command-line interface that covers all the stages of creating an Angular application from scaffolding and generating an initial app to deployment. The generated code also includes pre-configured files for unit tests and bundling with the powerful Webpack bundler.

While Angular CLI is still in beta, most of the developers like the ease of getting started with new projects. In this article, I’ll show you how to create, bundle, and deploy a simple project with Angular CLI.

To get started you have to have NodeJS installed on your computer (see https://nodejs.org ). Both Angular and Angular CLI have lots of dependencies on other packages, which are available at the NPM repository at https://www.npmjs.com (it’s similar to Maven Central). NodeJS comes with npm a package manager that can install individual packages from npmjs.org or use the config file package.json (like pom.xml) to install all project dependencies. I’ll show you how to create the initial project (including package.json) using Angular CLI.

After installing NodeJS, you can start using npm in the command prompt window (or the Terminal on Mac) to install all required dependencies. Here’s the command to install Angular CLI globally on your computer (-g is for global):

npm install @angular/cli -g

After Angular CLI is installed, you can start using its ng command to generate various artifacts such as the new project, components, services as well as building and running the app with included Web server (webpack-dev-server). To create a new project called myproject just enter the following command:

ng new myproject

This command will create a new directory with the boilerplate project and install all required dependencies thousands of files in the node_module directory of your project. This sounds like a lot of files to install, but enterprise Java developers are accustomed to this. Depending on the speed of your Internet connection, it can take anywhere from one to five minutes.This time can be substantially decreased by using the Yarn package manager (an alternative to npm), and I described how to do it in this blog post .

Change directory to your newly generated project, and you’ll see something like this:


Jump start your Angular project with Angular CLI

Figure 1. Project structure

To build the dev version of this app, run the following command:

ng serve

Now open your browser at http://localhost:4200 , and you’ll see the following page rendered by the top-level component app.component.ts:


Jump start your Angular project with Angular CLI

Figure 2. Running the app

Angular CLI has many other commands and you can read about them in the product documentation at https://github.com/angular/angular-cli . But I just want to give you a quick overview of different ways of building the app.

The command ng serve invoked the webpack-dev-server that took all required files from our project and bundled them up in memory. The size of this app was not optimized since we work in the development mode now. If you open the network tab in the Dev Tools of your browser, you’ll see that the size of this tiny app is 3MB.

Let’s make it smaller by requesting the production build with optimization:

ng serve prod

Refresh the page at localhost:4200, and you’ll see that the size of the app was reduced to 227KB. Now let’s ask Angular to pre-compile the Angular-specific code (templates and components) using Ahead-Of-Time (AoT) compiler:

ng serve prod aot

Refresh the page again, and you’ll see that the size of the app is 130KB now, because the Angular compiler was not packaged with the app.


Jump start your Angular project with Angular CLI
While using the AoT mode will lower the size of the small apps, this may not be the case for the larger ones. But the speed of rendering of the app will improve.

The ng serve command is bundling the app in memory, and automatically rebuilds it as soon as you make changes in the code. But for prod deployment you need files, and the ng build command will create the directory called dist that will contain the files with your application bundles, their gzipped versions, styles, and source maps for debugging TypeScript in the browser. Try it out by running the following command:

ng build prod aot

Now you can take the content of this dist directory and copy it to your Apache, NGINX, Tomcat, or any application server of your choice. The build and deployment process can be also automated using npm scripts, Gulp, Grunt et al.

Learn more

The goal of this article was to give you a very high level overview of the initial generation and deployment of a very simple Angular app. To explore Angular further read its docs at https://angular.io/docs/ts/latest/ . Get familiar with TypeScript, which is a piece of cake for any Java developer. This language supports classes, interfaces, annotations, generics, which are very similar to what you use in Java. Knowing the basic syntax of javascript is helpful, but not a must. Friends don’t teach friends JavaScript. They teach TypeScript.


Jump start your Angular project with Angular CLI

This post was originally published in the January2017 issue of the Eclipse Newsletter:Exploring New Technologies

For more information and articles check out the

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaJavaScriptTomcatAngularJSGruntGulp
分页:12
转载请注明
本文标题:Jump start your Angular project with Angular CLI
本站链接:http://www.codesec.net/view/530373.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(16)