Rick L. - AngularJS Handbook: Easy Web App Development

• {{model.name}} {{model.snippet}}

Tests In AngularJS, the controller and the view are separated. With this, the ode becomes testable even during the time of development. In case the controller is available in the global space, then we can mock the scope object so as to instantiate it. This is shown in the example given below: describe('PnListCtrl', function(){ it(' a "phones" model with 2 phones should be created', function() { var scope = {}, ctrl = new PnListCtrl(scop); expect(scop.phones.length).toBe(2); }); }); The non-global controllers should then be created. No one will want to have their controller function to be in their global namespace. Instead, most people will want it to be registered via the anonymous constructor function of the module which we have just created.

In this case, we will be proved by the service $controller from AngularJS. This will be tasked with retrieving the controller by its name. Consider the example given below, which shows how this can be done: describe('PnListCtrl', function(){ beforeEach(module('pncatApp')); it('you should create "phones" model with the 2 phones', inject(function($controller) { var scope = {}, ctrl = $controller('PnListCtrl', {$scope:scope}); expect(scope.phones.length).toBe(2); })); }); What we have done is that we have instructed the Angular to load each module before any of the tests is done. The service $controller should then be injected into our service. The service has also been used for creation of a new PnListCtrl. The instance is then used for the purpose of verification.

The Experiments Another binding can be added to the file. This is shown below: The available number of phones: {{phones.length}} A new model property can be created in the controller and then bound from the template. An example of this is shown below: $scope.name = "John"; The new binding can be added to the file as follows: Hi, {{name}}! You can now refresh your browser and then observe what happens. The unit test for the controller should then be updated in the ./test/unit/controllersSpec.js so that the new change is reflected. A repeater for the creation of a simple table should then be created in the file. This can be implemented as follows:

That is also very powerful in Angular. At this point, you will have an app working dynamically and it has the model, the view, and the controller located separately.