无法在 Angular JS 中实现视图和路由

Question

我在名为 partials 的文件夹中创建了简单的 html 文件 about.html、experiments.html 和 home.html，但我也无法在 ng-view 中呈现视图尝试了一个简单的 {{ 5+5 }} 但这也没有用 id 我也在使用配置和控制器。 https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js'> https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"> 演示 Angular JS 标识

我的网站

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

    .config(function($routeProvider){
    $routeProvider
    .when('/about', { templateUrl:'/partials/about.html'})
    .when('/experiments', { templateUrl:'/partials/experiments.html'})
    .otherwise({ redirectTo:'/home',  templateUrl:'/partials/home.html'})
    })

.controller(function MainCtrl($scope){
$scope.x = "Hello";
});
</script>
</body>
</html>

Answer 1

<!DOCTYPE html>
<html>
<script src="https://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.min.js"></script>

<body ng-app="myApp">

  <p><a href="#/">Main</a>
  </p>

  <a href="#/red">Red</a>
  <a href="#/green">Green</a>
  <a href="#/blue">Blue</a>

  <div ng-view></div>

  <script>
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
      $routeProvider
        .when("/", {
          template: "<div>first view</div>"
        })
        .when("/red", {
          template: "<div>second</div>"
        })
        .when("/green", {
          template: "<div>third</div>"
        })
        .when("/blue", {
          template: "<div>fourth</div>"
        });
    });
  </script>

  
</body>

</html>

这就是我们配置 routeProvider 的方式

Answer 2

检查您修改后的代码..和DEMO这里更新的代码段

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

app.config(function($routeProvider){
    $routeProvider
    .when('/', { templateUrl:'partials/about.html',controller : 'MainCtrl'})
    .when('/about', { templateUrl:'partials/about.html',controller : 'abtCtrl'})
    .when('/experiments', { templateUrl:'partials/experiments.html',controller : 'exptCtrl'})
    .otherwise({ redirectTo:'/other',  templateUrl:'partials/other.html'})
});

app.controller('MainCtrl', function($scope) {
    $scope.x = "Hello";
});
app.controller('abtCtrl', function($scope) {
    $scope.x = "About";
});
app.controller('exptCtrl', function($scope) {
    $scope.x = "exptCtrl";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

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


<div ng-app="demoApp" >
    <h2 style="background-color:#ccc">
      {{5+5}}
    </h2>
    <div style="background-color:#bbb; padding:10px;">
      <a href="#/about">About</a> &nbsp; 
      <a href="#/experiments">Expt</a> &nbsp; 
      <a href="#/other">Other</a>
    </div>
    
    
    <div ng-view="" id="ng-view"></div>
    
    <script type="text/ng-template" id="partials/about.html">
      <h1>About Page</h1>
    </script>
    <script type="text/ng-template" id="partials/experiments.html">
      <h1>Experiment Page</h1>
    </script>
    <script type="text/ng-template" id="partials/other.html">
      <h1>Other Page</h1>
    </script>
</div>

无法在 Angular JS 中实现视图和路由

Not able to implement Views and Route in Angular JS

model-view-controller

view

angularjs

ngroute

我的网站