AngularJS 单视图 view

index.html

<html lang="en" ng-app="single_view">
<head>
  <script src="../jslib/angular.js"></script>
  <script src="../jslib/angular-route.js"></script>
  <script src="app.js"></script>
</head>
<body>

  <h1>below is the view information ... </h1>
  <div ng-view/>

</body>
</html>


app.js

angular.module('single_view', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when('/detail/:detailId', {templateUrl: 'view/detail.html',controller: Detail})
  .otherwise({templateUrl: 'view/hello.html'});
}]);


function Detail($scope, $routeParams) {
  $scope.detailId = $routeParams.detailId;
}


view/detail.html

<h3>this is the detail information page ... </h3>

<h3>the detail id is {{detailId}}</h3>


view/hello.html

<h3>this is the hello page ... </h3>


你可能感兴趣的:(html,js,Web,Angular,view)