Страница входа с различными файлами CSS и JS

Question

Страница входа с различными файлами CSS и JS

0

Я новичок в angularjs и только начал работать над проектом. Я использую ui.router для управления разными представлениями, проблема в том, что у меня есть главная страница index.html, например

<html lang="en" ng-app="leadsangularApp">
<head>
    <link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div ui-view=""></div>
</body>
</html>

все мои представления загружаются в <div ui-view=""></div> но что, если у меня есть страница входа, которая имеет совершенно разные стили css (head) и js файлы (нижний колонтитул), мне нужно, чтобы она загружалась внутри другого шаблона, пример

<html lang="en" ng-app="leadsangularApp">
<head>
    <link href="style2.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div ui-view=""></div>
</body>
</html>

если я попытаюсь сделать это с вложенным ui-view

 app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home');
          // States
          $stateProvider
            .state('root', {
                abstract: true,
                templateUrl: 'views/default.html',
            })
            .state('home', {
                parent: "root",
                url: "/home",
                templateUrl: 'views/main.html',
            })
            .state('login', { 
                url: "/login",
                templateUrl: 'views/login.html',
            });
  });

у моей/учетной записи есть другой вид, но все же он загружает одни и те же файлы css и js. Я хочу, чтобы страница моего/логина имела совершенно разные разделы раздела главы и нижнего колонтитула, как мне это достичь?

Wasif Khalil 01 июнь 2016, в 20:13

Источник

0

почему ты хочешь сделать это?
Mike Feltman 01 июнь 2016, в 18:21

Теги:

javascript

html

angularjs

css

angular-ui-router

2 ответа

Ещё вопросы

CozyAzure · Answer 1 · 2016-06-01T17-31-00.000Z

Вы можете использовать ng-href. И в зависимости от ваших потребностей вам придется слушать $stateChangeSuccess и изменять значения, привязанные к ng-href.

Для вашего HTML, сделайте что-то вроде этого:

<link rel="stylesheet" ng-href="{{stylesheet}}"/>

где переменная stylesheet динамически привязана к вашей области действия и может изменять значения в соответствии с вашими потребностями.

Затем вы можете либо прослушивать $stateChangeStart либо $stateChangeSuccess и соответственно изменять значения $scope.stylesheet.

app.controller('mainCtrl', function($scope, $state) {
  $scope.stylesheet = "style.css";

  $scope.$on('$stateChangeStart',
    function(event, toState, toParams, fromState, fromParams) {

      if (toState.name === "login") {
        $scope.stylesheet = "style2.css"
      } else {
        $scope.stylesheet = "style.css"
      }
    })
})

Вот plnkr: http://plnkr.co/edit/qR7FLDAyRTkFndMQyWod?p=preview

Подробнее о ui-router API: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state

Mike Feltman · Answer 2 · 2016-06-01T16-15-00.000Z

Вообще говоря, это не рекомендуемый подход, но есть проект github, который делает это для css: https://github.com/manuelmazzuola/angular-ui-router-styles. Это не то, что напрямую поддерживается ui-router.

спасибо, я бы этого не делал, но мой шаблон имеет страницу входа с различными таблицами стилей