Question

我了解如何使用ng-view制作基本单页应用，并将模板路由到index.html。但是，我想将网站分为主页部分（视图：主页，关于，注册，登录），然后当用户登录时，他们会转到具有自己的一组视图的仪表板。仪表板（/ dashboard / user：id）和Home Section（/，/ about等）将具有单独的基本模板。

这只是两个独立的应用程序共有不同的基本模板吗？任何人都有设置类似的经验吗？

Answer 1

如果您只是在谈论改变视图，可以使用$ routeProvider来定义模板，控制器等。在https://github.com/angular-ui/ui-router查看ui-route“嵌套状态和视图”

$routeProvider
  .when('/', {
    templateUrl: 'template/home/home.tpl.html',
    controller: 'LomeCtrl',
    controllerAs: 'vm'
  })
  .when('/dashboard/user:id',{
    templateUrl: 'template/dashboard/dashboard.tpl.html',
    controller: 'dashboard',
    controllerAs: 'vm'
  })
  .otherwise({
    redirectTo: '/'
  });

您可以采用另一种方法创建提供程序，以根据用户登录状态显示模板。

angular.module('myApp', ['ngRoute', 'loginService'])
  .config(['$routeProvider', 'loginCheckerProvider', function($routeProvider, loginCheckerProvider) {

    $routeProvider.
    when('/', {
        templateUrl: (loginCheckerProvider.isLoged()) ? 'loggedin.html' : 'loggedout.html'
          //controller: 'aboutCtl',
      })
      .otherwise({
        redirectTo: '/'
      });

  }]);

提供者：

(function () {

  'use strict';

    function loginChecker() {
      this.$get = angular.noop;

      //Do your logics to check if user is loggedin and add the result to the return below
      //toggle the return below between true and false
      this.isLoged = function(){
        return true;
      }
    }

    angular.module('loginService',[])
      .provider('loginChecker', loginChecker);

})();

我创建了一个plunker进行测试，它正在运行。要测试它，请转到loginservice.js文件并将返回切换为true / false，您将看到模板更新。

为站点制作2个基本模板的经验

1 个答案: