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

【问题标题】：Angular Js latest router supporting 1.5/2.0Angular Js 最新路由器支持 1.5/2.0
【发布时间】：2016-07-28 02:48:52
【问题描述】：

我在 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';

});

请提供在 Angular 1.5/2.0 中工作的路由器示例 ..具有带有脚本视图/模板 url 视图的内部/外部控制器

【问题讨论】：

您能否检查您的控制台是否有任何错误并在此处发布（如果有）。

标签： html angularjs routes angular-ui-router

【解决方案1】：

从Angular.js版本1.2.17开始，路由模块与核心库分离并命名为angular-route.1.2.x.js。

因此，如果您想在您的应用程序中使用路由以及angular.js（版本从1.2.17 或更高版本开始），那么您还需要包含angular-route 库。

此步骤添加的路由功能由ngRoute模块中的angular提供，与核心Angular框架分开分发。

参考：https://code.angularjs.org/1.2.18/docs/tutorial/step_07

【讨论】：