angular.min.js 不包括在视图中显示的部分 html。

Question

我有一个 SPA.html [单页应用程序]。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
        <script src="angular.min.js"></script>
        <script src = "angular-route.js"> </script>
        <script>
                (function () {
                var demoApp = angular.module('demoApp',['ngRoute']);
                    demoApp.config(['$routeProvider', function ($routeProvider) {
                                $routeProvider
                                        .when('/index',
                                        {
                                        controller : 'SimpleController',
                                        templateUrl : 'Partials/index.html'
                                        })
                                        .when('/fixed',
                                        {
                                        controller : 'SimpleController',
                                        templateUrl : 'Partials/fixed.html'
                                        })
                                        .when('/calculated',
                                        {
                                        controller : 'SimpleController',
                                        templateUrl : 'Partials/calculated.html'
                                        })
                                        .otherwise({redirectTo : '/index'});
                                        }]);
                }());
        </script>

</head>
<body>
Click : <input ng-model="name"/> {{name}}

        <a href="#/index">index </a>
        <a href="#/fixed">fixed </a>
        <a href="#/calculated">calculated </a>
        <br />
        Placeholder
        <div ng-view></div>
</body>
</html>

单击任何链接时，部分 html 会加载到视图中。假设我在 Partial 文件夹下的 index.html 是：

<script src="angular.min.js"> </script>
<div ng-app="">
<div class="container" >
                <input type="text" ng-model="name" />
                Label: : {{name}} <br>
</div>
</div>

所以，点击索引加载上面的部分但我在网页上得到 {{name}} 而不是数据绑定但是当我直接打开 index.html 它工作正常。

我错过了什么？我在 Partials 中复制了 angular.min.js。

Answer 1

我创建了一个 Plnkr 示例来演示如何实现这一点。

http://plnkr.co/edit/yn7fhx6p1DU99ILb8mSg

<!DOCTYPE html>
    <html ng-app="plunker">

    <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');      </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
    </head>

   <body ng-controller="MainCtrl">

     <a href="#/resolveView">Resolve View</a>

   <div ng-view></div>

 </body>
</html>

Js

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

  /*
  angular.module('controllers', [])
    .controller('myCtrl', [function($scope, resolvedVal) { $scope.answer = resolvedVal; }]);
  */

  app.config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/resolveView', {
          templateUrl: 'resolveView.html',
          controller: 'MainCtrl'
        }
      );
   }]);

app.controller('MainCtrl', function($scope, $location) {
   $scope.name = "Hello World";
 });

angular.min.js 不包括在视图中显示的部分 html。

angular.min.js not being included for the partial html to be displayed in view.

html

partial-views

angularjs

single-page-application