Ng-view does not work with partial in AngularJS / Express

Everything worked until I tried to display a partial file in ng-view.

/public/app/app.js

angular.module('app', ['ngResource', 'ngRoute']);

angular.module('app').config(function($routeProvider,$locationProvider){
    $locationProvider.html5Mode(true);
    $routeProvider
      .when('/', {templateUrl: '/partials/main', controller: 'mainCtrl'});
 });

angular.module('app').controller('mainCtrl', function($scope){
    $scope.myVar = "Hello Angular";
});

/server/includes/layout.jade

doctype html 5
html
  head
    link(rel="stylesheet", href="/css/bootstrap.css")
    link(rel="stylesheet", href="/vendor/toastr/toastr.css")
    link(rel="stylesheet", href="/css/site.css")
 body(ng-app="app")
    block main-content
    include scripts

/server/includes/scripts.jade (version number not specified in script)

script(type="text/javascript", src="/vendor/jquery/jquery.js") 2.1.0
script(type="text/javascript", src="/vendor/angular/angular.js") 1.2.16
script(type="text/javascript", src="/vendor/angular-resource/angular-resource.js")
script(type="text/javascript", src="/vendor/angular-route/angular-route.js")
script(type="text/javascript", src="/app/app.js")

/views/index.jade

extends ../includes/layout

block main-content
  section.content
    div(ng-view) 

/views/partials/main.jade

h1 This a Partial
h2 {{ myVar }}

and finally server.js

var express = require('express'),
stylus = require('stylus');

var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';

var app = express();

function compile(str, path){
return stylus(str).set('filename', path)
}

app.configure(function (){
  app.set('views', __dirname + '/server/views');
  app.set('view engine', 'jade');
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(stylus.middleware(
  {
      src: __dirname + '/public',
      compile: compile
  }
  ));
  app.use(express.static (__dirname + '/public'));
});

app.get('/partials/:partialPath', function (req, res){
res.render('partials/' + req.params.partialPath);
})

app.get('*', function(req, res) {
 res.render('index'); 
});

var port = 3030;
app.listen(port);
console.log('Listening on port' + port + '…');

Directory structure: structure of the site

When I run 'node server.js' and go to 'localhost: 3030', I get a blank page instead of 'This is Partial Hello Angular' with this HTML:

<!DOCTYPE html 5>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.css"/>
<link rel="stylesheet"    href="/vendor/toastr/toastr.css"/>
<link rel="stylesheet" href="/css/site.css"/></head>
<body ng-app="app">
<section class="content">
 <div ng-view="ng-view"></div>
</section>
<script type="text/javascript" src="/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/vendor/angular/angular.js"></script>
<script type="text/javascript" src="/vendor/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="/vendor/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/app/app.js"></script></body></html>

In the tutorial, this configuration works fine, but when I run it, ng-view is empty. Any idea why?


EDIT:

Node.js . - conf - . , , javascript, hrefs /vendor/ , , .

Javascript, : SyntaxError: Unexpected token '<', < HTTP.

, ​​/vendor/ URL- "/server/includes/scripts.jade", "/vendor/jquery/jquery.js", "vendor/jquery.js" .

, . , ?

+4
3

, , , bower "bower_components". , . , , "/public/vendor", :

1) ".bowerrc" , .. gitignore, bower.json ..

2) put:

{
  "directory": "public/vendor"
}

, . ".bowerrc" , : http://bower.io/

+1

Thers - - app.js. , :

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

angular.module('app').config(function($routeProvider, $locationProvider){  
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/', { templateUrl: '/partials/main', controller: 'mainCtrl'});
});


angular.module('app').controller('mainCtrl', function($scope){  
    $scope.myVar = "Hello Angular";
});
0
  app.get('*', function(req, res,next) {
     if(req.xhr != true)
       {
         res.render('index');
       } else
       {
       next();
    }
        });

change it like

0
source

Source: https://habr.com/ru/post/1538583/


All Articles