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会在视图中加载。说我的部分文件夹下的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中。

1 个答案: