Step 7 is broken (no output) about angular-phonecat HOT 28 CLOSED

Incidentally, all the steps in the tutorial from 5 on are broken. Steps 5-6 have a missing dependency on $http. Steps 7-8 don't do anything at all. Steps 9-11 have several errors in the js console and step 12 doesn't even exist on the live demo (404 at http://angular.github.io/angular-phonecat/step-12/app/)

from angular-phonecat.

@ghurley - Would you mind opening Issues on the phonecat repo for these? Thanks

from angular-phonecat.

I got step 7 working just now (after fiddling with about 30 tabs of various Angular docs open and the raw source handy):

First, add <script src="lib/angular/angular-route.js"></script> in the index.html below the angular.js script include, otherwise the ngRoute module and the $route service won't be available.

Then, remove the <script src="js/app.js"></script> include.

Finally, here's the correct controllers.js file:

var phonecatApp = angular.module('phonecatApp', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl'
      }).
      otherwise({redirectTo: '/phones'});
  }]).
  controller('PhoneListCtrl', function($scope, $route, $http) {
    $http.get('phones/phones.json').success(function(data) {
      $scope.phones = data;
    });

    $scope.orderProp = 'age';
  }).
  controller('PhoneDetailCtrl', function($scope, $route, $routeParams) {
    $scope.phoneId = $routeParams.phoneId;
  });

[reformatted so it's readable]

So, what did not work:

• defining the routes in app.js didn't work (I tried a few permutations)
• ngRoute module and its $route and $routeParams services were unavailable due to the missing include

from angular-phonecat.

@petebacondarwin: Isn't this the phonecat repo?

from angular-phonecat.

:-) Yes, you are right. I am getting lost in an inbox full of issues and pull requests!

from angular-phonecat.

Sorry, this was my bad.

@petebacondarwin let me take care of these PRs.

from angular-phonecat.

@annismckenzie are you sure thats everything? It's still blank - no errors just not rendering the view

from angular-phonecat.

@jeffkile I forked it to me. You can take a look at the changes I had to make here: https://github.com/annismckenzie/angular-phonecat/compare/step-7...step-7-working. Don't worry about the changes to the karma-e2e.conf.js – I had several projects running side-by-side.

Also I was mssing the exclusion for angular-scenario in the unit test configuration file:

exclude: ['app/lib/angular/angular-scenario.js'],

Thta's why I removed angular-scenario: unit tests were not running at all.

from angular-phonecat.

Angular-phonecat had its AngularJS build updated to 1.2.0-rc2 and there were some routing changes – that's why step 7 broke. Here's a concise explanation: http://weblogs.asp.net/dwahlin/archive/2013/08/14/angularjs-routing-changes.aspx for anyone who's interested.

from angular-phonecat.

If one prefer to split the app configuration to the app.js and the controllers to the controllers.js, this will work.

app.js:

var phonecatApp = angular.module('phonecatApp', [ 'ngRoute' ]);

phonecatApp.config(
        [ '$routeProvider', function($routeProvider) {
            $routeProvider.when('/phones', {
                templateUrl : 'partials/phone-list.html',
                controller : 'PhoneListCtrl'
            }).when('/phones/:phoneId', {
                templateUrl : 'partials/phone-detail.html',
                controller : 'PhoneDetailCtrl'
            }).otherwise({
                redirectTo : '/phones'
            });
        } ]);

controllers.js:

var phonecatApp = angular.module('phonecatApp');

phonecatApp.controller('PhoneListCtrl',
        function($scope, $http) {
            $http.get('phones/phones.json').success(function(data) {
                $scope.phones = data;
            });

            $scope.orderProp = 'age';
        });

phonecatApp.controller('PhoneDetailCtrl',
        function($scope, $route, $routeParams) {
            $scope.phoneId = $routeParams.phoneId;
        });

Remember to include the

  <script src="lib/angular/angular-route.js"></script>

in the index.html

from angular-phonecat.

your method is not work...

this is my modify, I tried , it can work.

liucw@liucw-desktop:~/angular-phonecat$ git diff
diff --git a/app/index.html b/app/index.html
index 2808fab..cf21d04 100644
--- a/app/index.html
+++ b/app/index.html
@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="css/app.css">
   <link rel="stylesheet" href="css/bootstrap.css">
   <script src="lib/angular/angular.js"></script>
+  <script src="lib/angular/angular-route.js"></script>
   <script src="js/app.js"></script>
   <script src="js/controllers.js"></script>
 </head>
diff --git a/app/js/app.js b/app/js/app.js
index 463c913..2760e82 100644
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -2,7 +2,7 @@

 /* App Module */

-var myApp = angular.module('phonecatApp', []).
+var myApp = angular.module('phonecatApp', ['ngRoute', 'phonecatApp.controllers']).
   config(['$routeProvider', function($routeProvider) {
   $routeProvider.
       when('/phones', {templateUrl: 'partials/phone-list.html',   controller: 'PhoneListCtrl'}).
diff --git a/app/js/controllers.js b/app/js/controllers.js
index 7010b4e..2170690 100644
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@@ -2,9 +2,9 @@

 /* Controllers */

-var phonecatApp = angular.module('phonecatApp', []);
+var phonecatApp = angular.module('phonecatApp.controllers', []);

-phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
+phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope, $http) {
   $http.get('phones/phones.json').success(function(data) {
     $scope.phones = data;
   });

from angular-phonecat.

This is fixed now. Please re-pull.

from angular-phonecat.

Are you try? @btford

from angular-phonecat.

I am try.

from angular-phonecat.

How and where to add these dependencies in 7th step in angular phonecatapp? Kindly notify me.
{
"name": "angular-phonecat",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-phonecat",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "1.4.x",
"angular-mocks": "1.4.x",
"jquery": "~2.1.1",
"bootstrap": "~3.1.1",
"angular-route": "1.4.x"
}
}

from angular-phonecat.

@RajeswarReddy - You put them in a file called bower.json in the root folder of your project.

from angular-phonecat.

Thank u @petebacondarwin, But there are many bower.json files. 1: In angular, 2 , in Angular.animate 3)Angular.mocks which one i have to chose? If possible kindly pass me the snapshot.

from angular-phonecat.

The one in the root of your project
On 23 Feb 2016 12:25, "RajeswarReddy" [email protected] wrote:

There are many bower.json files. 1: In angular, 2 , in Angular.animate
3)Angular.mocks which one i have to chosse?

—
Reply to this email directly or view it on GitHub
#69 (comment)
.

from angular-phonecat.

In the bower components file?

from angular-phonecat.

Kindly provide me the snapshot.This task is very important for me. @petebacondarwin

from angular-phonecat.

https://github.com/angular/angular-phonecat/blob/master/bower.json

from angular-phonecat.

I have to create bower.json sub folder in angularphonecat ?

from angular-phonecat.

bower.json is a file. Yes, create it in the root of your project.

from angular-phonecat.

OK thanku. In net i found the below links. to to include. Are they right?

from angular-phonecat.

OK thanku. In net i found the below links. to to include. Are they right?

from angular-phonecat.

After updating in file, how to include the library in scripts?

from angular-phonecat.

Can anyone kindly send me the exact folder file architecture for step 7 in phonecatapp.. step by step.

This task is much needed for me kindly reply @ghurley @petebacondarwin @annismckenzie @jeffkile

from angular-phonecat.

What is the difference between bower globally installed and locally installed?

from angular-phonecat.