Table of Contents
Angular is best suited for Single Page App (SPA), for getting started with Angular we need to set up the development environment first. So for setting the development for Angular please check out the earlier post for same for Getting Started with Angular.
1.Create a Project in Angular
For creating the project into angular using angular CLI is very easy, so open a terminal and execute the below command to create the new project.
Wait for some time above command will create the new project along with complete project hierarchy and structure of an Angular project, we required for developing our first SPA app in angular. Make sure you are connected to the Internet before using the above command because above command download some package and dependency from GitHub.
The output of the above command will look like as given below.
2. Serve the App using ng serve
In earlier steps, we have created our project with the name of FirstApp, what next? We have to check that whether our created app is working or not for which, this app needs to be tested. For testing the app we have to use the ng serve command from our project home directory to start serving our app.
The above ng serve -o or -open will start the serving our app and launch the app by opening the browser on URL http://localhost:42oo/ . If you face any error after issuing the above command its might be due to the older version of your angular CLI. So, check the error logs and update the angular CLI version.
3. Working with Angular Component
Angular by default create an app for you when you create your app with ng serve command. It is the root component of you App and its name is app-root.
You can find this component files at ./src/app/app.component.ts which are as given below.
Below is the explanation of the different component inside the app.components.ts files. In the very first line of the code, you can see that we are importing the core component.
Next part which is defined with the name of @Component in this section of the code we are defining three part selector, templateUrl and styleUrls for our component.
Here in below code we are defining and exporting our class and setting the title of the component.
Change the title in the component file from app works to Welcome to My First Angular App and test it the browser by opening the http://localhost:4200/
Check the demo at http://demo.nplix.com
4. Build your App for Production
By default angular run in the development environment and whatever changes you are doing in your code immediately show in the browser and its automatically compile the code. So for publishing the app in production, we need to build the app for production. Use the below command for building the app.
Above command will compile and build the whole app and store the all build files inside dist folder of project home.
5. Testing automation with KARMA
Testing is the important part when we are developing our application for production. So when we create any app using the angular CLI by default create the default setting and configuration. For testing our application with Karma we required specification files which are stored at the below-given location.
Above configuration file is for root component, we have to create the similar configuration file for each module and specifying the all testing details.
In this specification file by default angular CLI create the three testing specification which are as given below. Firs one is for creating the app so our application should be able create the app.
Below code is for testing the title of the application so that our application should contain “app works!” the app.
Here is definition of the code which will check that application check that title should be inside a h1 tag and title should contain “app works!”.
Using the below command we can start the automated testing of our app.
We we run this test it will show the error as given below because as per code we have write that title should “app works! ” but as we have change the title earlier in our app.component.ts files it will show the error.
So for making the testing successful, we need to change the definition in the specification files accordingly, which are given below.
Modify the app.component.spec.ts
Below code is for testing the title of the application so that our application should contain “Welcome to My First Angular App!” the app.
Here is definition of the code which will check that application check that title should be inside a h1 tag.
Now run the ng test again you will get the output as given in below screen shots, where all testing scenario are tested successfully.
Visit the Demo application at http://demo.nplix.com