AngularJS tutorial - my problems and solutions

Due to the fact that AngularJS gaining wider group of supporters and I decided to become familiar with its capabilities. So I started from AngularJS tutorial. At first I had to install: node.js, karma, git I already had (went smoothly). Step 0, Step 1 and almost finished Step 2 if no Section Tests, with whom I had a few problems - we are happy to share them, because maybe some of my suggestions will benefit and save some time. Let me just mention that I am acting in a Windows environment.

Step 0, 1 success

Step 2 problems

Problem #1
The node.js console show me wrong path to Chrome:
ERROR [launcher]: Cannot start Chrome
        Can not find the binary C:\Users\myuser\AppData\Local\Google\Chrome\Application\chrome.exe
        Please set env variable CHROME_BIN
I set it at:
set CHROME_BIN=C:\Program Files\Google\Chrome\Application\chrome.exe
Of course, best to add it directly to the system environment variables.

Problem #2
In file D:\angular-phonecat\test\unit\controllersSpec.js test code lines were too much, I cut it to what follows:
'use strict';

/* jasmine specs for controllers go here */
describe('PhoneCat controllers', function() {

  describe('PhoneListCtrl', function(){

    beforeEach(module('phonecatApp'));

    it('should create "phones" model with 3 phones', inject(function($controller) {
      var scope = {},
          ctrl = $controller('PhoneListCtrl', {$scope:scope});

      expect(scope.phones.length).toBe(3);
    }));

  });
});

Problem #3
I received a warning about the lack of food karma-junit-reporter so I installed what you need:
npm install karma-junit-reporter --save-dev

Step 2 success
INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 30.0.1599 (Windows Vista)]: Connected on socket 7-3jlIVerJ0w2A4qbl30
Chrome 30.0.1599 (Windows Vista): Executed 1 of 1 SUCCESS (0.447 secs / 0.033 secs)

Step 3, 4 success
In step 3, there were no problems, keep it up. However impressed me test end-to-end tool Angular Scenario Runner. Really great. I must admit that so far has not happened to me to make any test in JavaScript (shame) may hence the rapture.
In step 4, very plainly explained by the binding of a model to the user interface and the user interface to the model (two-way data-binding) on the example of sorting.

Step 5, 6 problems

Problem #1
When you run the example in the browser did not show the data (phones). So I looked at the console (Developer Tools), and there is an error:
ReferenceError: $http is not defined
    at new PhoneListCtrl (http://localhost:8000/app/js/controllers.js:8:3)
    at invoke (http://localhost:8000/app/lib/angular/angular.js:3162:28)
The code controllers.js was:
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
It should be (for the tutorial is OK, and the lack GitHub):
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope, $http) {

Step 5, 6, 7, 8, 9 success
In step 5, and finally found out the use of AJAX, and in step 6 displayed the pictures (thumbnails) phones. Step 7 was much more interesting, I learned to do a lot of views (phone lists, detail phone) and routing.
In step 8 views phone-detail.html and finally gained the contents, the application consists of two full view. I also wrote in the Experiments, the first test e2e:
it('should display 4 thumbnail images on nexus-s page', function() {
  expect(repeater('.phone-thumbs li img').count()).toBe(4);
});
Step 9 went smoothly, I know as I write my own filters.

Step 10, 11 problems

Problem #1
When I run the example in the browser did not show the content (white page), the JavaScript console error occurred:
Uncaught Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.0-rc.2/$injector/unpr?p0=%24routeProvider
    at http://localhost:8000/app/lib/angular/angular.js:78:12
    at http://localhost:8000/app/lib/angular/angular.js:2997:19
In app.js code was:
var phonecatApp = angular.module('phonecatApp', [
  'phonecatControllers',
Should be:
var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers',

Step 10, 11, 12 success
Step 10 and I know how to handle the event. In step 11, I learned how to pick up AJAX to data on the server by creating your own website. In the last 12-step animations - perfect for the end of the tutorial.

Both the framework and its AngularJS tutorial made ​​quite an impression on me. I would recommend.

Komentarze

Popularne posty z tego bloga

Java ESL program for connecting to the FreeSWITCH

AngularJS example MotoAds more advanced than the tutorial on angularjs.org

Java program for connecting to the FreeSWITCH XML-RPC