Working with the Angular Example Application

Using the Angular Template in a New Project

To create a project using the example template, select the Example application (QuizzManiac) option from the New Angular Project wizard.

When you click Finish, a basic Eclipse project skeleton is created along with the template code. Before you can actually use this project, the project configuration must be completed—this could mean downloading and/or installing Node, npm, the corresponding version of the Angular CLI, and finally, your project’s dependencies. You can observe detailed progress in the Terminal+ view. For additional details, see Understanding Angular CLIs.

Examining the Project Contents

Once the project is completely set up, let’s take a closer look at a few of its key contents:

src/app folder

• This folder contains your project’s root module (AppModule), which is in app.module.ts—your application is launched by bootstrapping this module.
• These modules are accompanied by Angular components, along with their corresponding templates and styles. A component controls a patch of screen, called a view, and the component class contains application logic to support this view. The component’s template is a form of HTML that tells Angular how to render the component.
• Finally, routes, defined in app.routes.ts define how navigation takes place within your application, based on a URL pattern.

src/main.ts

Code in this file initializes the platform that your application runs in and then uses the platform to bootstrap your AppModule.

.angular-cli.json

Our Angular support is based on the Angular CLI. This file contains settings and instructions on how your Angular application is to be built, tested and deployed. For details, refer to Understanding Angular CLIs in the learning center.

app/tsconfig.app.json tsconfig.json

The tsconfig files contain your project’s TypeScript settings, controlling source locations, JavaScript targets (like ES5 or ES6), compilation, how types are resolved, and several other settings. Several of these properties can be configured on your project’s TypeScript property page. app/tsconfig.app.json extends tsconfig.json, allowing you to have multiple TypeScript configurations that share some properties in a single project. You will find TypeScript settings specific to testing in app/tsconfig.spec.json, which also extends tsconfig.json.

tslint.json

This file contains a number of TypeScript linting rules, with the linting capability being supplied by TSLint. You can edit this file manually to add and remove rules, though several TSLint related quickfixes within editors will also allow you to remove rules you don’t find useful.

package.json

This is another TypeScript specific file, which primarily contains your project’s dependencies, listed as Node.js modules and their corresponding versions. package.json does contain other key project metadata as well, such as the name, description and version of your project, as well as scripts that are run at different stages of your project’s lifecycle.

For more on TypeScript and these configuration file, see Using TypeScript.

node_modules folder

This folder contains all the Node packages your project is dependent on—these are defined in package.json and downloaded by the Node Package Manager (npm).

protractor.conf.js and the e2e folder

Our template project uses Protractor and Jasmine, both end-to-end testing frameworks to test your application. The test framework is configured in protractor.conf.js while the actual tests are in the e2e folder.

Running & Debugging the Project

Now that we’ve had a chance to examine our project, let’s go ahead and deploy it!

Right-click your application in the Explorer and select Run As > Angular Web Application to build and deploy the project. A browser automatically opens with the app loaded.

Observe the Terminal+ view which indicates how your app is being built and deployed, including a list of deployed resources.

The Servers view lists all Angular projects in the workspace, including deployment state. You can choose to stop and start the server from here.

You can place a breakpoint in TypeScript, HTML or JavaScript files by simply double-clicking the ruler area. If you start a debug session, your application pauses when breakpoints are hit and you can step through the source in all files, even TypeScript. For more on debugging an Angular application, please see this document.

Making Changes to the Application

While the app is running, several changes can be made without having to redo the run sequence. If you make a change and save it, Live Preview (tech that runs within Angular applications) detects the change, rebuilds the app, and reloads the app in the browser automatically.

To see how this works, run your application and stay on the opening page of the quiz in the browser. Now open the src/app/services/quizz.services.ts file and change “A Sample Quizz” to “My Sample Quizz”. Save the file and observe the change is picked up (you’ll see activity in the terminal) and the page is automatically reloaded, to now show “My Sample Quizz” as the first quiz. Neat!

Exploring Your Application with CodeLive

If CodeLive is not enabled, right click on the project in the Servers view and click CodeLive. When enabled, you will see a dashboard overlaid on your app in the browser. You can use this to explore Angular applications, figuring out widget hierarchies, and even opening the corresponding source back in your IDE. All you need to do is click the Magic Wand and then hover over different UI elements in your application. Click the element you are interested in to open a hierarchical display where you can open code (TS, HTML or even CSS) back in the IDE. For more details on CodeLive, please read this document.