上QQ阅读APP看书，第一时间看更新
Angular CLI
Angular CLI was created with the aim of standardizing and simplifying the development and deployment workflow for Angular apps. As the documentation suggests:
"The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!"
It incorporates:
- A build system based on webpack
- A scaffolding tool to generate all standard Angular artifacts including modules, directives, components, and pipes
- Adherence to Angular style guide (http://bit.ly/ngbe-styleguide), making sure we use community-driven standards for projects of every shape and size
You may have never heard the term style guide, or may not understand its significance. A style guide in any technology is a set of guidelines that help us organize and write code that is easy to develop, maintain, and extend. To understand and appreciate Angular's own style guide, some familiarity with the framework itself is desirable, and we have started that journey.
- A targeted linter; Angular CLI integrates with codelyzer (http://bit.ly/ngbe-codelyzer), a static code analysis tool that validates our Angular code against a set of rules to make sure that the code we write adheres to standards laid down in the Angular style guide
- Preconfigured unit and end-to-end (e2e) test framework
And much more!
Imagine if we had to do all this manually! The steep learning curve would quickly overwhelm us. Thankfully, we don't have to deal with it, Angular CLI does it for us.
The Angular CLI build setup is based on webpack, but it does not expose the underlying webpack configuration; this is intentional. The Angular team wanted to shield developers from the complexities and internal workings of webpack. The ultimate aim of Angular CLI is to eliminate any entry level barriers and make setting up and running Angular code simple.
It doesn't mean Angular CLI is not configurable. There is a config file ( angular.json) that we can use to alter the build setup. We will not cover that here. Check the configuration file for 7 Minute Workout and read the documentation here: http://bit.ly/ng6be-angular-cli-config.
It doesn't mean Angular CLI is not configurable. There is a config file ( angular.json) that we can use to alter the build setup. We will not cover that here. Check the configuration file for 7 Minute Workout and read the documentation here: http://bit.ly/ng6be-angular-cli-config.
The tweaks that we have done to the default generated project template are:
- Referenced Bootstrap CSS in the style.css file.
- Upgraded some npm library versions.
- Changed the prefix configuration for generated code to use abe (short for Angular By Example) from app. With this change, all our components and directive selectors will be prefixed by abe instead of app. Check app.component.ts; the selector is abe-root instead of app-root.
While on the topic of Angular CLI and builds, there is something that we should understand before proceeding.
What happens to the TypeScript code we write?