DocsSimpleHtml5AndJS

Revision as of 15:15, 15 January 2013 by Kganfield (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)

Working with JavaScript Support in an HTML5 Application

Contents


Requirements for This tutorial

You need the following software:

  • NetBeans IDE 7.3


  1. Click New Project in the toolbar to open the New Project wizard
  2. Expand the Samples node and select the HTML5 category.
  3. Select the AngularJS Phone Catalog Tutorial sample project. Click Next.
  4. Specify a project location. Click Finish.
  5. Click the Run button in the toolbar to run the project.

The application opens in the Chrome browser.

Editing

?


Using the JavaScript Debugger

  1. Expand the project node and double-click controllers.js under the Site Root > js node to open the file in the editor.
  2. Place a line breakpoint on line 16 by clicking in the left margin.

You can view the breakpoints that are set in the project by choosing Window > Debugging > Breakpoints to open the Breakpoints window.

  1. Click the Run button in the toolbar to run the project again. The project is automatically in debugger mode when you run it in the Chrome browser.

When you run the project you will see the same page because the breakpoint that you set was not hit.

  1. In the browser, click one of the entries in the page, eg Motorola Xoom.

You will see that the next page loads but that there is no data.

  1. Return to the IDE. In the editor you can see that the breakpoint was hit.
  2. Hover your cursor over the "phone" variable to view a tooltip with information about the variable.

The tooltip contains the following information: $scope.phone = (Resource) Resource

  1. Expand the node in the tooltip to view a list of the variables and values for the $scope.phone resource.

You can expand other nodes, eg. android, to view the values of the two strings that of the android object (os and ui) You can also view the list of variables in the Variables window.

  1. Use the step buttons in the toolbar to step through the JavaScript functions in the angular js library or click the continue (F5) to resume the application.

Running JS Unit Tests

Download JS Test Driver jar In Services window, right-click JS Test Driver node and choose Configure Select Chrome with NetBeans JS Debugger and deselect the other browsers. Click OK. Right-click project in Projects window and choose New > Other Select JSTestDriver configuration File in Unit Tests category. Click Next. Click Browse and select AngularJSPhoneCat - Configuration Files folder. Click Select in the dialog box and then click Finish in the wizard. You can see the location of the JS Test Driver config file in the Created File field. The config file needs to be in the config folder. You can expand the Configuration Files node in the Projects window to see the new file. The file opens in the editor.

The default: server: http://localhost:42442

load:

 - test/lib/jasmine/jasmine.js
 - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
 - test/unit/*.js

exclude:

The tests are located in test/unit/*.js but you also need to load the JS libraries.

Add the following JS libraries and JS files to the load section. load:

- test/lib/jasmine/jasmine.js
 - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
 - test/unit/*.js
 
 - app/lib/angular/angular.js
 - app/lib/angular/angular-*.js
 - app/js/*.js
 
 - test/lib/angular/angular-mocks.js

Disable any breakpoints that you set. Right-click the project node and choose Test. The IDE automatically opens the JsTestRunner in the Chrome browser and two tabs in the Output window. Choose Window > Output > Test Results in the main menu. The window displays the message that all 4 tests passed. Click the green check icon to view the list of the tests that passed.

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo