Angular ng-router 不工作

Question

我正在学习 angular-js，我正在尝试将 ng-route 与 ng-view.But 一起使用，但不知何故它不起作用。

应用在 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/controllers/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/templates/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) 你必须使用 url 比如：

你的应用程序/#/路由

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

URL 赞：http://localhost:8080/#/route

Angular ng-router 不工作

Angular ng-router not working

angularjs

ng-view

ngroute