使用 Angularjs 和 ui.router 的单页应用程序答案

【问题标题】：Single page application using Angularjs and ui.router使用 Angularjs 和 ui.router 的单页应用程序
【发布时间】：2017-10-24 11:27:40
【问题描述】：

我正在尝试使用 Angularjs 和 ui.router 制作单页应用程序，但我的代码不起作用。

index.html：

<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
    <script src="uirouter.js"></script>
    <script src="route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div  ui-view></div>
    <script src="NABHController.js"></script>
     <script src="nabh1Controller.js"></script>
      <script src="nabh2Controller.js"></script>
  </body>

</html>

route.js：

var compliance=angular.module('ikomplianzNABH',['ui.router']);
compliance.run(function($rootScope, $state) {
      $rootScope.$state = $state;
    });
compliance.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('/', { /*....This state defines All type of user login...*/
        url: '/',
        templateUrl: 'NABH.html',
        controller: 'NABHController'
    })
    .state('.nabh1', { /*....This state defines All type of user login...*/
        url: '/nabh1',
        templateUrl: 'nabh1.html',
        controller: 'nabh1Controller'
    })
    .state('.nabh2', { /*....This state defines All type of user login...*/
        url: '/nabh2',
        templateUrl: 'nabh2.html',
        controller: 'nabh2Controller'
    })
});

当用户在此处键入 URL http://localhost/test/ 时，NABH.html 页面应呈现。 inisde 这个文件有一个链接可以路由到另一个页面，但是这个页面应该呈现在 NABH.html ui-view 而不是索引页面中。

NABH.html：

<div> 
<div ui-view>
<div class="clecklist">
<a ui-sref=".nabh2">Click Me</a>
</div>
</div>

</div>

当用户点击Click Me 时，nabh2.html 应呈现到此页面中。

nabh2.html：

h1>{{msg}}</h1>

就我而言，什么都没有发生。这里只有我需要将NABH.html 设置为父视图，并且nabh1.html,nabh2.html 都应该用作它的子视图。 My full Plunkr code 在这里。

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

只是对替代方案的建议：另一种选择完全是使用ng-include。

索引.html：

<!DOCTYPE html>
<html>

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

  <body>
    <div ng-app="myApp" ng-controller="nabhController">
      <div>
        <label>{{message}}</label>
      </div>

      <div ng-view></div>
    </div>
  </body>

</html>

NABH.html：

<div ng-controller="nabhController"> 
  <div class="checklist">
    <div>
       <button ng-click="showNabh =! showNabh">Click Me</button>
     </div>

     <div ng-show="showNabh">
       <div ng-include="'nabh1.html'"></div>
     </div>
     <div ng-show="!showNabh">
       <div ng-include="'nabh2.html'"></div>
     </div>
  </div>
</div>

NABH1.html

<div ng-controller="nabh1Controller">
  {{message}}
</div>

NABH2.html

<div ng-controller="nabh2Controller">
  <h1>{{message}}</h1>
</div>

控制器

var app = angular.module('myApp', []);
app.controller('nabhController', function($scope) {
  $scope.message = "Welcome";
  $scope.showNabh = false;
});

app.controller('nabh1Controller', function($scope){
  $scope.message = "Nabh1"
});

app.controller('nabh2Controller', function($scope){
  $scope.message = "Nabh2"
});

app.config(function($routeProvider) {
    $routeProvider
      .when("/", {
        templateUrl: 'nabh.html',
        controller: 'nabhController'
      })
      .otherwise({
        redirectTo: '/'
      });
});

Plunker

【讨论】：

我们可以使用不同的控制器吗？我无法获得showNabh != showNabh。你能用你的代码编辑那个 plunkr 吗？
路由文件将如何执行？
为你添加了一个 plunk。
我想在nabh2.html 页面中添加点击，而不是在该公共页面中。
我添加了但它不起作用意味着 nabh2.html 页面内的<div> <button ng-click="showNabh =! showNabh">Click Me</button> </div>。\

【解决方案2】：

您可以通过以下两种方式之一进行：

第一种方式：

var compliance=angular.module('ikomplianzNABH',['ui.router', 'ngSanitize']);
compliance.run(function($rootScope, $state) {
      $rootScope.$state = $state;
    });
compliance.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('/', { /*....This state defines All type of user login...*/
        url: '/',
        templateUrl: 'NABH.html',
        controller: 'NABHController'
    })
    .state('.nabh1', { /*....This state defines All type of user login...*/
        url: '/nabh1',
        templateUrl: 'nabh1.html',
        controller: 'nabh1Controller'
    })
    .state('.nabh2', { /*....This state defines All type of user login...*/
        url: '/nabh2',
        templateUrl: 'nabh2.html',
        controller: 'nabh2Controller'
    })
});


var app = angular.module('myApp', []);
app.controller('nabhController', function($scope) {
  $scope.$sce = $sce;
  $scope.message = "Welcome";
  $scope.showNabh = false;
});

    app.controller('nabh1Controller', function($scope){
      $scope.message = "Nabh1"
    });

    app.controller('nabh2Controller', function($scope, $sce){
      $scope.message = "Nabh2"
    });

    app.config(function($routeProvider) {
        $routeProvider
          .when("/", {
            templateUrl: 'nabh.html',
            controller: 'nabhController'
          })
          .otherwise({
            redirectTo: '/'
          });
    });

<div> 
<div ui-view>
<div class="clecklist">
<a ng-bind-html="$sce.trustAsHtml(.nabh2.html)">Click Me</a>
</div>
</div>

</div>

第二种方式：

 <div> 
    <div ui-view>
    <div class="clecklist">
    <a ng-click="TakeMeToLink()">Click Me</a>
    </div>
    </div>

var app = angular.module('myApp', []);
app.controller('nabhController', function($scope, $location) {
  $scope.$sce = $sce;
  $scope.message = "Welcome";
  $scope.showNabh = false;

 $scope.TakeMeToLinh = function() {
       $location.path("/nabh2");
    };
});

    app.controller('nabh1Controller', function($scope){
      $scope.message = "Nabh1"
    });

    app.controller('nabh2Controller', function($scope, $sce){
      $scope.message = "Nabh2"
    });

    app.config(function($routeProvider) {
        $routeProvider
          .when("/", {
            templateUrl: 'nabh.html',
            controller: 'nabhController'
          })
          .otherwise({
            redirectTo: '/'
          });
    });

【讨论】：