Hands-on learning is often the best way to learn a new technology. Create a new project with our custom QuizzManiac template to quickly get going with Angular. This demo application showcases several aspects of Angular.
MyEclipse licenses include access to CodeMix.
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:
- 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.
Code in this file initializes the platform that your application runs in and then uses the platform to bootstrap your AppModule.
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.
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.
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.
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.
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.