This post will show some of the basic commands available within the CLI. While we won\u2019t go into every different command provided, we will look at some of the basic commands that can help get a project started and built. We will pay particular attention to the different commands and what they produce, as far as application structure and file layout is concerned.<\/p>\n
So do keep in mind that it is not my purpose to describe all the different elements and how they are used (maybe a topic for future articles); we will just be looking at what the CLI lays down. Let\u2019s get started.<\/p>\n
What is Angular CLI?<\/h2>\n
Angular CLI<\/a> is a command line tool that can aid in creating new Angular projects from scratch or adding various elements\u00a0to an existing Angular application.\u00a0This tool is not essential in building an Angular project, but it does provide several benefits, especially for someone who does not have much experience with Angular.<\/p>\n This tool will create a new project that is ready to run immediately and will generate a Hello World-esque<\/em> project. It will create all needed plumbing to get everything up and running in a matter of minutes, generating an application structure that is based on best practices for an Angular project. When adding new elements, it will create these elements in the appropriate directory structure, generate\u00a0source code, and in some cases add code to other elements within the project so that the new elements can be used wherever needed.<\/p>\n In order to install Angular CLI, the following should be installed in the development environment:<\/p>\n Installing Angular CLI is as easy as typing the follow command:<\/p>\n This will globally install angular-cli. This will allow for the use of all the To create a new project, either Issue the following command to create a new project called This will cause several things to happen:<\/p>\n Here is a screenshot of the project structure that was generated:<\/p>\n The purpose of this article is not to go into all the files that are generated but there are a few keys files to point out:<\/p>\n Change to the Then open a browser and point it to Nothing spectacular, but a running application nonetheless.<\/p>\n Note:\u00a0Running To add other elements to your application, either In order to use Angular CLI to add these elements to your application, go to the Note: After issuing commands, Angular CLI will display files that are generated and where they are created at.<\/p>\n To create a new class, run the following:<\/p>\n This will create a file called This file is a basic class file with no decorators generated. It will export a class called my-class-a.ts<\/strong><\/p>\n To create a new interface, run the following:<\/p>\n This will create a file called This file is a basic interface\u00a0file with no decorator generated. It will export a class called my-interface-a.ts<\/strong><\/p>\n To create a new enumeration, run the following:<\/p>\n This will create a file called This file is a\u00a0basic enumeration\u00a0file with no decorator generated.\u00a0It will export a class called my-enum.enum.ts<\/strong><\/p>\n Creating a class, interface, or enumeration are basic constructs and could be created manually just as easily, but the CLI will format them according to best practices.\u00a0Now on to things that need a little more to them.<\/p>\n To create a new component, run the following:<\/p>\n This will do several things:<\/p>\n my-component-a.component.ts<\/strong><\/p>\n app.module.ts<\/strong><\/p>\n To create a new service, run the following;<\/p>\n This will generate a couple of files\u00a0under the my-service-a.service.ts<\/strong><\/p>\n To create a new module, run the following:<\/p>\n This will do a couple things:<\/p>\n my-module-a.module.ts<\/strong><\/p>\n Components can be added to generated module by changing to the module directory:<\/p>\n or by prefixing the module name to the front of the new component name:<\/p>\n This will do several things:<\/p>\n my-module-a.module.ts<\/strong><\/p>\n This same pattern can be used for a class, interface, enum, service, or even another module.<\/p>\n As you can see, the Angular CLI has a lot to offer. It will create something that will get you up and running within a matter of minutes.\u00a0It will follow best practices as related to layout and naming conventions. It will allow you to add elements where they are needed and even do some of the plumbing for you.<\/p>\n The CLI is not something that you have to use, but it is definitely helpful.\u00a0If you haven\u2019t used it before, it is worth checking out especially for someone getting their feet wet.<\/p>\nPrerequisites<\/h3>\n
\n
Installation<\/h3>\n
npm install -g angular-cli<\/pre>\n
ng<\/code> commands. As of this writing, this installs version 1.0.0-beta.28.3 of the Angular CLI.<\/p>\nCreate New Project<\/h3>\n
ng new<\/code> or ng init<\/code> can be used. The main difference between these commands is that ng new<\/code> will create a new directory and ng init<\/code> will create a new project in the current directory.<\/p>\nmy-project<\/code>.<\/p>\nng new my-project<\/pre>\n
\n
my-project<\/code> will be created<\/li>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/my-project-After-ng-new.png\")
<\/a><\/p>\n\n
src\/app<\/code> directory: This directory contains source code, css, and html files. This is where most of the work will be done.<\/li>\napp.module.ts<\/code>: Main NgModule<\/code> for the application. Everything must belong to a module (even other modules).<\/li>\nmain.ts<\/code>: Bootstraps your application.<\/li>\nindex.html<\/code>: Main html file for your application.<\/li>\n<\/ul>\nRun Application<\/h3>\n
my-project<\/code> directory and run the following:<\/p>\nng serve<\/pre>\n
http:\/\/localhost:4200\/<\/code>. The following should be displayed:<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/my-project-Running-screenshot.png\")
<\/a><\/p>\nng serve<\/code> from the command line will not return control back to the command prompt. This will detect changes that are made to the project, recompile the project, and then refresh the web page.<\/p>\nAdding Other Elements<\/h2>\n
ng generate<\/code> or ng g<\/code> command can be used.\u00a0There are many elements that can be created, but only the following elements will be covered in this article:<\/p>\n\n
my-project<\/code> directory and issue the following commands.<\/p>\nCreate A Class<\/h3>\n
ng g class my-class-a<\/pre>\n
my-class-a.ts<\/code> under the src\/app<\/code> directory. Notice that it will add .ts<\/code> after the name provided.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/my-project-After-ng-g-class-my-class-a.png\")
<\/a><\/p>\nMyClassA<\/code> (removes dashes and uses camel case).<\/p>\nexport\u00a0class\u00a0MyClassA\u00a0{\r\n}<\/pre>\nCreate An Interface<\/h3>\n
ng g interface my-interface-a<\/pre>\n
my-interface-a.ts<\/code> under the src\/app<\/code> directory. Notice that it will add .ts<\/code> after the name provided.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/my-project-After-ng-g-interface-my-interface-a.png\")
<\/a><\/p>\nMyInterfaceA<\/code> (removes dashes and uses camel case).<\/p>\nexport interface my-interface-a\r\n}<\/pre>\n
Create An Enumeration<\/h3>\n
ng g enum my-num<\/pre>\n
my-enum.enum.ts<\/code> under the src\/app<\/code> directory. Notice that it will add .enum.ts<\/code> after the name provided.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/my-project-After-ng-g-enum-my-enum-300x278.png\")
<\/a><\/p>\nMyEnum<\/code> (removes dashes and uses camel case).<\/p>\nexport\u00a0enum\u00a0MyEnum\u00a0{\r\n}<\/pre>\nCreate A Component<\/h3>\n
ng g component my-component-a<\/pre>\n
\n
my-component-a<\/code> under src\/app<\/code> directory<\/li>\n\n
my-component-a.component.css<\/code>\n\n
my-component-a.component.html<\/code>\n\n
my-component-a.component.spec.ts<\/code>\n\n
my-component-a.component.ts<\/code>\n\n
MyComponentAComponent<\/code><\/li>\nOnInit<\/code><\/li>\nngOnInit<\/code>\u00a0for OnInit<\/code> interface<\/li>\n@Component<\/code>\n\n
app-my-component-a<\/code><\/li>\napp.module.ts<\/code> file, added MyComponentAComponent<\/code> to declarations (every component has to belong to a module)<\/li>\n<\/ul>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/my-project-After-ng-g-component-my-module-a_my-component-a.png\")
<\/a><\/p>\nimport\u00a0{\u00a0Component,\u00a0OnInit\u00a0}\u00a0from\u00a0'@angular\/core';\r\n\r\n@Component({\r\n\u00a0\u00a0selector:\u00a0'app-my-component-a',\r\n\u00a0\u00a0templateUrl:\u00a0'.\/my-component-a.component.html',\r\n\u00a0\u00a0styleUrls:\u00a0['.\/my-component-a.component.css']\r\n})\r\nexport\u00a0class\u00a0MyComponentAComponent\u00a0implements\u00a0OnInit\u00a0{\r\n\r\n\u00a0\u00a0constructor()\u00a0{\u00a0}\r\n \r\n\u00a0\u00a0ngOnInit()\u00a0{\r\n\u00a0\u00a0}\r\n\r\n}<\/pre>\nimport\u00a0{\u00a0BrowserModule\u00a0}\u00a0from\u00a0'@angular\/platform-browser';\r\nimport\u00a0{\u00a0NgModule\u00a0}\u00a0from\u00a0'@angular\/core';\r\nimport\u00a0{\u00a0FormsModule\u00a0}\u00a0from\u00a0'@angular\/forms';\r\nimport\u00a0{\u00a0HttpModule\u00a0}\u00a0from\u00a0'@angular\/http';\r\n\r\nimport\u00a0{\u00a0AppComponent\u00a0}\u00a0from\u00a0'.\/app.component';\r\nimport\u00a0{\u00a0MyComponentAComponent\u00a0}\u00a0from\u00a0'.\/my-component-a\/my-component-a.component';\r\n\r\n@NgModule({\r\n\u00a0\u00a0declarations:\u00a0[\r\n\u00a0\u00a0\u00a0\u00a0AppComponent,\r\n\u00a0\u00a0\u00a0\u00a0MyComponentAComponent\r\n\u00a0\u00a0],\r\n\u00a0\u00a0imports:\u00a0[\r\n\u00a0\u00a0\u00a0\u00a0BrowserModule,\r\n\u00a0\u00a0\u00a0\u00a0FormsModule,\r\n\u00a0\u00a0\u00a0\u00a0HttpModule\r\n\u00a0\u00a0],\r\n\u00a0\u00a0providers:\u00a0[],\r\n\u00a0\u00a0bootstrap:\u00a0[AppComponent]\r\n})\r\nexport\u00a0class\u00a0AppModule\u00a0{\u00a0}<\/pre>\nCreate A Service<\/h3>\n
ng g service my-service-a<\/pre>\n
src\/app<\/code> directory:<\/p>\n\n
my-service-a.service.spec.ts<\/code>\n\n
my-service-a.service.ts<\/code>\n\n
MyServiceAService<\/code><\/li>\n@Injectable<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/my-project-After-ng-g-service-my-service-a.png\")
<\/a><\/p>\nimport\u00a0{\u00a0Injectable\u00a0}\u00a0from\u00a0'@angular\/core';\r\n\r\n@Injectable()\r\nexport\u00a0class\u00a0MyServiceAService\u00a0{\r\n\r\n\u00a0\u00a0constructor()\u00a0{\u00a0}\r\n\r\n}<\/pre>\nCreate A Module<\/h3>\n
ng g module my-module-a<\/pre>\n
\n
my-module-a<\/code> under src\/app<\/code><\/li>\nmy-module-a.module.ts<\/code>\n\n
MyModuleAModule<\/code><\/li>\n@NgModule<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/my-project-After-ng-g-module-my-module-a.png\")
<\/a><\/p>\nimport\u00a0{\u00a0NgModule\u00a0}\u00a0from\u00a0'@angular\/core';\r\nimport\u00a0{\u00a0CommonModule\u00a0}\u00a0from\u00a0'@angular\/common';\r\n\r\n@NgModule({\r\n\u00a0\u00a0imports:\u00a0[\r\n\u00a0\u00a0\u00a0\u00a0CommonModule\r\n\u00a0\u00a0],\r\n\u00a0\u00a0declarations:\u00a0[]\r\n})\r\nexport\u00a0class\u00a0MyModuleAModule\u00a0{\u00a0}<\/pre>\nCreate Component In A Module<\/h3>\n
cd src\/app\/my-module-a<\/pre>\n
ng g component my-subcomponent-a<\/pre>\n
ng g component my-module-a\/my-subcomponent-a<\/pre>\n
\n
my-subcomponent-a<\/code> under the src\/app\/my-module-a<\/code> directory<\/li>\nCreate a component<\/code> section for description of files)<\/li>\nMySubcomponentAComponent<\/code> to the my-module-a.module.ts<\/code> file<\/li>\n<\/ul>\n<\/a><\/p>\nimport\u00a0{\u00a0NgModule\u00a0}\u00a0from\u00a0'@angular\/core';\r\nimport\u00a0{\u00a0CommonModule\u00a0}\u00a0from\u00a0'@angular\/common';\r\nimport\u00a0{\u00a0MySubcomponentAComponent\u00a0}\u00a0from\u00a0'.\/my-subcomponent-a\/my-subcomponent-a.component';\r\n\r\n@NgModule({\r\n\u00a0\u00a0imports:\u00a0[\r\n\u00a0\u00a0\u00a0\u00a0CommonModule\r\n\u00a0\u00a0],\r\n\u00a0\u00a0declarations:\u00a0[MySubcomponentAComponent]\r\n})\r\nexport\u00a0class\u00a0MyModuleAModule\u00a0{\u00a0}<\/pre>\nSummary<\/h2>\n