This example is a quick setup of Angular and how to generate a quick example project.
Open a terminal and run the commands one by one:
npm install -g typings or
yarn global add typings
npm install -g @angular/cli or
yarn global add @angular/cli
The first command installs the typings library globally (and adds the
typings executable to PATH). The second installs @angular/cli globally, adding the executable
ng to PATH.
Navigate with the terminal to a folder where you want to set up the new project.
Run the commands:
ng new PROJECT_NAME cd PROJECT_NAME ng serve
That is it, you now have a simple example project made with Angular. You can now navigate to the link displayed in terminal and see what it is running.
Navigate to the root of your current project.
Run the command:
This will add the necessary scaffolding to your project. The files will be created in the current directory so be sure to run this in an empty directory.
In order to see and interact with your application while it's running in the browser you must start a local development server hosting the files for your project.
If the server started successfully it should display an address at which the server is running. Usually is this:
Out of the box this local development server is hooked up with Hot Module Reloading, so any changes to the html, typescript, or css, will trigger the browser to be automatically reloaded (but can be disabled if desired).
ng generate <scaffold-type> <name> (or simply
ng g <scaffold-type> <name>) command allows you to automatically generate Angular components:
# The command below will generate a component in the folder you are currently at ng generate component my-generated-component # Using the alias (same outcome as above) ng g component my-generated-component # You can add --flat if you don't want to create new folder for a component ng g component my-generated-component --flat # You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts) ng g component my-generated-component --spec false
There are several possible types of scaffolds angular-cli can generate:
You can also replace the type name by its first letter. For example:
ng g m my-new-module to generate a new module or
ng g c my-new-component to create a component.
When you are all finished building your Angular web app and you would like to install it on a web server like Apache Tomcat, all you need to do is run the build command either with or without the production flag set. Production will minifiy the code and optimize for a production setting.
ng build --prod
Then look in the projects root directory for a
/dist folder, which contains the build.
If you'd like the benefits of a smaller production bundle, you can also use Ahead-of-Time template compilation, which removes the template compiler from the final build:
ng build --prod --aot
Angular provides in-built unit testing, and every item created by angular-cli generates a basic unit test, that can be expended. The unit tests are written using jasmine, and executed through Karma. In order to start testing execute the following command:
This command will execute all the tests in the project, and will re-execute them every time a source file changes, whether it is a test or code from the application.
For more info also visit: angular-cli github page