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

Question

我了解如何使用ng-view制作一个基本的单页应用程序，并将模板路由到index.html中。但是，我想将网站分为主页部分(视图:主页，关于，注册，登录)，然后当用户登录时，他们进入一个仪表板，其中有自己的一组视图。仪表板(/ Dashboard /user:id)和主页部分(/、/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，您将看到模板正在更新。