![]() Now that you fully understand how to set up an Angular project, it's time to start exploring things like components and services in more detail.Photo by Tolu Olubode on Unsplash Introduction Not only does it automatically configure your project with all the necessary modules and libraries, it also creates a local environment which is optimal for development. If you started with our Angular Webpack tutorial, then you can really appreciate how much faster the Angular CLI makes getting started with Angular. If you want to check out more examples of getting started with the Angular CLI, check out our guide Deploying Apps with the Angular CLI. Additionally, a file is automatically generated for testing. You will also notice that your app is automatically configured to work with the karma and protractor testing frameworks. Notice how we include the selector which we reference in our main file. This is the main entry point for your Angular app. Notice how it references an automatically generated template and as well. This is an automatically generated Angular component. The file configures the root module for your app and includes the app.component component. Specifically, it automatically includes and references the root app.module as well as bootstraps the root module to run in the browser via platformBrowserDynamic. The main.ts file is automatically configured for bootstrapping your Angular app. While TypeScript is not technically required to use Angular, it is highly recommended and included as default when using the Angular CLI. This is the configuration file for your TypeScript instance. Additionally, when you run ng-new you automatically install all the npm modules and dependencies defined in the package.json file. The package.json file is automatically configured and included in the project. By simply running ng-new, you automatically generate almost everything that was manually configured in the previous example, including: package.json If you started with our Angular Webpack tutorial, you will notice a similar environment has been created in a fraction of the time. In just a few quick commands, you've locally set up and run an Angular web app. Any changes you make to the source code will automatically trigger Webpack and the server to refresh, making for much faster development. The default local server also comes with LiveReload support. If you visit the local address in your browser, you should see the default HTML for Angular. This will launch a Webpack dev server on localhost:4200. Navigate to the root of your newly created angularCli directory and run: ng serve ![]() Similarly, you can run ng init to create a new Angular app from the currenty directory. The ng new command will create a new directory with the specified name and initialize a new Angular app within that directory. In your terminal, run the following: ng new angularCli Now that you've got the Angular CLI installed, it's time to witness just how fast and easy creating new apps can be using the CLI. If the Angular CLI is installed correctly, you should see the version number printed in the console. To ensure everything installs properly, try running: ng version To install the CLI globally, simply run: npm install -g will install the Angular CLI globally on your machine. Installing the Angular CLIĪssuming you have Node.js 6.9.0 or greater installed, you can use npm to easily install the Angular CLI. With just a few CLI commands, you'll create a basic app with the required libraries and modules already included. Unlike our Angular Webpack tutorial, this example will quickly demonstrate how to setup an Angular project without all the manual configuration. In this tutorial, we'll be showing you how to get started with Angular using the Angular CLI.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |