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:
Problem #2
In file
Problem #3
I received a warning about the lack of food
Step 2 success
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:
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
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:
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.
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_BINI set it at:
set CHROME_BIN=C:\Program Files\Google\Chrome\Application\chrome.exeOf 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:19In 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