Here we declared a controller called
PhoneListCtrl and registered it in an AngularJS module, phonecatApp. Notice that our ng-appdirective (on the <html> tag) now specifies the phonecatApp module name as the module to load when bootstrapping the Angular application.
Although the controller is not yet doing very much, it plays a crucial role. By providing context for our data model, the controller allows us to establish data-binding between the model and the view. We connected the dots between the presentation, data, and logic components as follows:
- The ngController directive, located on the
<body>tag, references the name of our controller,PhoneListCtrl(located in the JavaScript filecontrollers.js). - The
PhoneListCtrlcontroller attaches the phone data to the$scopethat was injected into our controller function. This scope is a prototypical descendant of the root scope that was created when the application was defined. This controller scope is available to all bindings located within the<body ng-controller="PhoneListCtrl">tag.
Writing and Running Tests
Angular developers prefer the syntax of Jasmine's Behavior-driven Development (BDD) framework when writing tests. Although Angular does not require you to use Jasmine, we wrote all of the tests in this tutorial in Jasmine v1.3. You can learn about Jasmine on the Jasmine home page and at the Jasmine docs.
The angular-seed project is pre-configured to run unit tests using Karma but you will need to ensure that Karma and its necessary plugins are installed. You can do this by running
npm install.HTTP call to fetch data
We'll use Angular's $http service in our controller to make an HTTP request to your web server to fetch the data in the
app/phones/phones.json file. $http is just one of several built-in Angular services that handle common operations in web apps. Angular injects these services for you where you need them.
Note the use of the
:phoneId parameter in the second route declaration. The $route service uses the route declaration —'/phones/:phoneId' — as a template that is matched against the current URL. All variables defined with the : notation are extracted into the $routeParams object.
No comments:
Post a Comment