简单的NG-包括不工作

问题描述：

林与AngularJS的第一次玩，和IM奋力用NG-包括我的头和页脚。

Im playing with AngularJS for the first time, and im struggling to use ng-include for my headers and footer.

下面是我的树：

myApp
assets
   - CSS
   - js
        - controllers
        - vendor
             - angular.js
             - route.js
             ......
             ......
             ......
        main.js
pages
   - partials
        - structure
              header.html
              navigation.html
              footer.html
   index.html
   home.html

index.html的：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>AngularJS Test</title>

    <script src="/assets/js/vendor/angular.js"></script>
    <script src="/assets/js/vendor/route.js"></script>
    <script src="/assets/js/vendor/resource.js"></script>
    <script src="/assets/js/main.js"></script>

</head>
    <body>          

        <div ng-include src="partials/structure/header.url"></div>
        <div ng-include src="partials/structure/navigation.url"></div>    

        <div id="view" ng-view></div>   

        <div ng-include src="partials/structure/footer.url"></div>
    </body>
</html>

main.js

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


app.config(function($routeProvider) {

$routeProvider.when("/login", {
    templateUrl: "login.html",
    controller: "LoginController"
});

$routeProvider.when("/home", {
    templateUrl: "home.html",
    controller: "HomeController"
});

$routeProvider.otherwise({ redirectTo: '/home'});

});

app.controller("HomeController", function($scope) {
    $scope.title = "Home";
});

home.html的

<div>
<p>Welcome to the {{ title }} Page</p>
</div>

在我的home.html的页面上走了，我的头，导航和页脚没有出现。

When i go on the home.html page, my header, nav and footer are not appearing.

答

您正在做一个包括报头。网址而不是头。 HTML 。它看起来像要在src属性使用文字，所以你应该换他们的报价，如被@DiscGolfer在评论中提到的。

You're doing an include of header.url instead of header.html. It looks like you want to use literals in the src attribute, so you should wrap them in quotes, as was mentioned in the comments by @DiscGolfer.

修改

 <div ng-include src="partials/structure/header.url"></div>
 <div ng-include src="partials/structure/navigation.url"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="partials/structure/footer.url"></div>

到

 <div ng-include src="'partials/structure/header.html'"></div>
 <div ng-include src="'partials/structure/navigation.html'"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="'partials/structure/footer.html'"></div>

如果这不工作，检查浏览器的控制台，如果有任何404的

If this is not working, check the browser console if there are any 404's

简单的NG-包括不工作

相关推荐