CODEWITHSUNDEEP
javascriptnode.jsangularjs
fpena06
fpena06

Reputation: 2426

error with angular view with node

I have a small node project that I'm trying to integrate angularjs into. I have a partial view which uses ng-controller and ng-repeat.

Here is my angular.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
  <link rel="stylesheet" href="app.css"/>
  <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
    <li><a href="#/view3">view3</a></li>
  </ul>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="services.js"></script>
  <script src="controllers.js"></script>
  <script src="filters.js"></script>
  <script src="directives.js"></script>
</body>
</html>

partial3.html (this is the partial):

      <div ng-controller="PersonCtrl">
        <div ng-repeat="person in persons">
          {{person.last}} , {{person.first}}
      </div>

I just get 5 commas without the five records in the person controller.

  .controller('PersonCtrl', ['$scope', function($scope) {
    $scope.persons = [
        { first: "Henry", middle: "Jacob", last: "Mendocino", gender: "M" },
        { first: "Ann", middle: "Cecilia", last: "Negro", gender: "F" },
        { first: "Berta", middle: "Ann", last: "Sallyfield", gender: "F" },
        { first: "Rudolf", middle: "John", last: "Waters", gender: "M" },
        { first: "Ken", middle: "Adam", last: "Aundry", gender: "M" },
    ]
  }])

Here is my app.js

'use strict';


    // Declare app level module which depends on filters, and services
    angular.module('myApp', [
      'ngRoute',
      'myApp.filters',
      'myApp.services',
      'myApp.directives',
      'myApp.controllers'
    ]).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
      $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
      $routeProvider.when('/view3', {templateUrl: 'partials/partial3.html', controller: 'PersonCtrl'});
      $routeProvider.otherwise({redirectTo: '/view1'});
    }]);

Can someone please help me figure out why my data isn't being showed.

Thanks.

Upvotes: 1

Views: 296

Answers (1)

ewizard
ewizard

Reputation: 2862

He/She needed to arrange his/her filesystem and express code to point to the right places...most importantly - he/she needed:

app.use(express.static(__dirname + '/views'));

so that the app knew where to serve the static content from (index.html).

Upvotes: 1

Related Questions