Question

我正在学习angular-js，我正在尝试使用ng-route和ng-view。但不知怎的，它无法正常工作。

App在nginx上运行。我的代码是

的src / index.html的

<html lang="en" ng-app="demoApp">
    <head>
        <!-- Latest compiled and minified CSS -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>


        <script src="js/app.js"></script>
        <script src="js/demo_controller.js"></script>



    </head>

    <body>
        <div ng-view>
        </div>


    </body>
</html>

的src / JS /控制器/ demo_controller.js

demoApp.controller('demoController',function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

的src / JS / app.js

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

demoApp .config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/route', {
        templateUrl: 'templates/demo_template.html',
        controller: 'demoController'
      });
  }]);

的src /模板/ demo_template.html

<div  >

First Name: <input type="text" ng-model="firstName"/><br>
Last Name: <input type="text" ng-model="lastName"/><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

nginx配置

server_name mypr.app.local;

location /ui {
     alias /home/vagrant/www/mypr-ui/src;
     try_files $uri $uri/ /index.html =404;
  }

url我试过

mypr.app.local/ui/route

在控制台中，我可以看到它已被注释掉

<!-- ngView:  -->

Answer 1

事情，我注意到了：

1）模板文件及其在路由器中的路径不正确。将其更改为您的模板。

2）你的模板文件不应该有指令ng-app。

3）您必须使用以下网址：

yourapp /＃/路由

Answer 2

的index.html

<html lang="en" ng-app="demoApp">
        <head>
            <!-- Latest compiled and minified CSS -->

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

            <!-- Latest compiled and minified JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>

        </head>

        <body>
            <div ng-view>
            </div>


        </body>

    <script>
    var demoApp = angular.module('demoApp', ['ngRoute']);

    demoApp .config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/route', {
            templateUrl: 'demo_template.html',
            controller: 'demoController'
          })

    $routeProvider.otherwise('/route');
      }]);

        demoApp.controller('demoController',function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
    </script>
    </html>

模板：

<div>

    First Name: <input type="text" ng-model="firstName"/><br>
    Last Name: <input type="text" ng-model="lastName"/><br>
    <br>
    Full Name: {{firstName + " " + lastName}}

    </div>

根据您的文件位置更改模板URL

网址如：http://localhost:8080/#/route

Angular ng-router无法正常工作

2 个答案: