Question

我在angular JS 1.0.7中尝试过路由器概念。它工作正常..当尝试在JS 1.4.8 / 1.5.3中实现相同的代码时。相同的代码不起作用。

我的HTML

<html>


  <head>
  <style>
      ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: #333;
          margin-left:20%;
          width:auto;
      }

      li {
          float: left;
      }

          li a {
              display: block;
              color: white;
              text-align: center;
              padding: 14px 16px;
              text-decoration: none;
          }

              li a:hover:not(.active) {
                  background-color: #111;
              }

      .active {
          background-color: #4CAF50;
      }
  </style>
      <script       src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">    </script>

    </head>
  <body  ng-app="sampleApp">

    <ul>
  <li><a  href="#home">Home</a></li>
  <li><a href="#login">Login</a></li>
  <li><a href="#registration">New Registration</a></li>
  <li><a href="#forgotpassword">Forgot Password</a></li>
 </ul>


    <div  style="margin-left:25%;padding:1px 16px;height:1000px;">


            <div ng-view>

        </div>

</div>


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

   </body>



  </html>

我的app.js

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

sampleApp.config(['$routeProvider',
 function($routeProvider) {
$routeProvider.
  when('/home', {
    templateUrl: 'templates/home.html',
    controller: 'HomeController'
}).
  when('/login', {

    templateUrl: 'templates/login.html',
    controller: 'LoginController'
  }).
     when('/registration', {
    templateUrl: 'templates/registration.html',
    controller: 'RegistartionController'
  }).
     when('/forgotpassword', {
    templateUrl: 'templates/forgot_password.html',
    controller: 'ForgotController'
  }).
  otherwise({
    redirectTo: '/home'
  });
}]);


sampleApp.controller('HomeController', function($scope) {

$scope.message = 'This is home screen';

});


sampleApp.controller('LoginController', function($scope) {

$scope.message = 'This is login screen';

});
sampleApp.controller('RegistartionController', function($scope) {

$scope.message = 'This is registration screen';

});
sampleApp.controller('ForgotController', function($scope) {

$scope.message = 'This is forgot password screen';

});

请提供路由器示例，该示例适用于角度为1.5 / 2.0 ..具有脚本视图/模板URL视图的内部/外部控制器

Answer 1

Starting from Angular.js version 1.2.17, route module is separated from core library & named angular-route.1.2.x.js.

so if you want to use routing in your application along with angular.js (version starting from 1.2.17 or further), then you need to include the angular-route library as well.

The routing functionality added by this step is provided by angular in the ngRoute module, which is distributed separately from the core Angular framework.

Reference: https://code.angularjs.org/1.2.18/docs/tutorial/step_07

Angular Js最新路由器支持1.5 / 2.0

1 个答案: