Using the Angular Template in a New Project
To create a project using the example template, select the Use template check box from the New Angular Project wizard. The initial release of Angular IDE includes a single template; future versions will include multiple Angular templates.
When you click Finish, only 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 and the corresponding version of the Angular CLI into your project. 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 several Angular modules, the “meat” of your application. A module is a cohesive block of code, dedicated to an application domain, a workflow, or a closely related set of capabilities. This template application contains several dashboard modules, including modules for forms and charts, as well as login and signup modules.
Of special note is the root module (AppModule), which is in app.module.ts—your application is launched by bootstrapping this module.
Modules are accompanied by Angular components, along with their corresponding templates and styles. A component controls a patch of screen, called a view—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 define how navigation takes place within our application, based on a URL pattern.
main.ts
Code in this file initializes the platform that your application runs in, 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.
tsconfig.json
This file contains 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. For more on TypeScript and this configuration file, see Using TypeScript.
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.
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>Server for Angular CLI Project to build and deploy the project. A browser automatically opens with the app loaded. Once you log in (simply click Log in, the template does not validate credentials), the app should look like the screenshot below.
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 or even start a debug session.
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.
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 Login page in the browser. Now open the login.component.html file and on line #13, change placeholder=”Password” to placeholder=”Strong Password”. 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 “Strong Password” instead of just “Password”. Neat!
Now let’s make a bigger change, let’s add a chart covering “Interest in Modern Web Frameworks”.
First, we’ll add a placeholder div for our new chart. Edit the chart.component.html file and add the following section just below the last div with class col-xl-6:
<div class="col-xl-6">
<div class="card card-block">
<div id="modern-web" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
</div>
Now let’s create the new chart and fill it with some data. In chart.component.ts add the following code below the snowDepth chart. Observe how it’s linked to the modern-web placeholder we created earlier.
var modernWeb: any = $('#modern-web');
modernWeb.highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Interest in Modern Web Frameworks'
},
subtitle: {
text: 'Uses data from Google Trends'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Interest (%)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Angular JS',
data: [
[Date.UTC(2013, 0, 6), 5],
[Date.UTC(2013, 5, 2), 11],
[Date.UTC(2013, 11, 8), 19],
[Date.UTC(2014, 5, 1), 33],
[Date.UTC(2014, 11, 7), 46],
[Date.UTC(2015, 5, 7), 56],
[Date.UTC(2015, 11, 6), 60],
[Date.UTC(2016, 5, 5), 69],
[Date.UTC(2016, 9, 16), 69]
]
}, {
name: 'Angular 2',
data: [
[Date.UTC(2013, 0, 6), 1],
[Date.UTC(2013, 5, 2), 2],
[Date.UTC(2013, 11, 8), 3],
[Date.UTC(2014, 5, 1), 3],
[Date.UTC(2014, 11, 7), 4],
[Date.UTC(2015, 5, 7), 8],
[Date.UTC(2015, 11, 6), 14],
[Date.UTC(2016, 5, 5), 56],
[Date.UTC(2016, 9, 16), 100]
]
}, {
name: 'React JS',
data: [
[Date.UTC(2013, 0, 6), 0],
[Date.UTC(2013, 5, 2), 0],
[Date.UTC(2013, 11, 8), 1],
[Date.UTC(2014, 5, 1), 2],
[Date.UTC(2014, 11, 7), 5],
[Date.UTC(2015, 5, 7), 11],
[Date.UTC(2015, 11, 6), 17],
[Date.UTC(2016, 5, 5), 22],
[Date.UTC(2016, 9, 16), 30]
]
}]
});
Save both edited files and observe the changes being rebuilt in the console. Our chart page is refreshed, and we see our new chart nicely rendered at the end of the page. Almost too easy!
