AngularJS + Angular UI Router: templateUrl возвращает пустую страницу

Question

AngularJS + Angular UI Router: templateUrl возвращает пустую страницу

0

Я только начинаю изучать angularjs, и я хочу использовать его для создания шаблона ui. Я хочу, чтобы сделать статический верхний и нижний колонтитулы, и единственное, что будет динамичным является содержание. Моя проблема в том, что мой он возвращает мне пустую веб-страницу.

Спасибо заранее, ребята.

index.html

<!DOCTYPE html>
<html data-ng-app="app">
<head>
	<meta charset="utf-8">
	<title>UI-Router</title>
	<link rel="stylesheet" href="">

	<!-- START LOAD VENDORS -->
	<script src="js/jquery/jquery.min.js"></script>

	<script src="js/angular/angular.min.js"></script>
	<script src="js/angular/angular-ui-router.min.js"></script>
	<!-- END LOAD VENDORS -->

	<!-- START LOAD SOURCE CODE -->
	<script src="js/app.js"></script>
	<!-- END LOAD SOURCE CODE -->

</head>
<body ui-view>
</body>

</html>

app.js

var app = angular.module('app', ['ui.router'])

app.config(['$stateProvider', '$urlRouterProvider',

function($stateProvider, $urlRouterProvider) {
	
		$urlRouterProvider.otherwise('/');

		$stateProvider
			.state('index',{
				abstract: true,
				url: '/index',
				templateUrl: 'view/app.html'
			})
	}])

Вид /header.html

<ul>
	<li>US</li>
	<li>626.205.3838</li>
	<li>[email protected]</li>
	<li>Search</li>
</ul>
<ul>
	<li>Facebook</li>
	<li>Twitter</li>
	<li>Instagram</li>
	<li>LinkedIn</li>
</ul>

Вид /footer.html

<div>

	<span>name here</span>
	<span>partner</span>
	<span>subscribe</span>

	<ul>
		<h3>get to know us</h3>
		<li>blog</li>
		<li>stories</li>
		<li>staff</li>
	</ul>

	<ul>
		<h3>connect</h3>
		<li>contact</li>
		<li>help</li>
		<li>request</li>
	</ul>

	<ul>
		<h3>resource</h3>
		<li>download</li>
		<li>financial</li>
		<li>donors</li>
	</ul>

	<ul>
		<h3>get involved</h3>
		<li>volunteer</li>
		<li>partnership</li>
		<li>donate</li>
	</ul>

</div>

Вид /app.html

	<div data-ng-include=" 'view/header.html' "></div>
	<div data-ng-include=" 'view/footer.html' "></div>

angelo 03 авг. 2016, в 12:27

Источник

Теги:

angularjs

angular-ui-router

3 ответа

1

Правильный способ сделать это - иметь отдельные директивы ui-view для вашего заголовка, содержимого и нижнего колонтитула.

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>UI-Router</title>
    <link rel="stylesheet" href="">

    <!-- START LOAD VENDORS -->
    <script src="js/jquery/jquery.min.js"></script>

    <script src="js/angular/angular.min.js"></script>
    <script src="js/angular/angular-ui-router.min.js"></script>
    <!-- END LOAD VENDORS -->

    <!-- START LOAD SOURCE CODE -->
    <script src="js/app.js"></script>
    <!-- END LOAD SOURCE CODE -->

</head>
<body>
    <div ui-view="header">
    <div ui-view="content">
    <div ui-view="footer">
</body>
</html>

Определите шаблон для каждого ui-view в функции конфигурации состояния и удалите параметр abstract: true. Подробнее об этом здесь: какова цель использования абстрактного состояния?

app.js

var app = angular.module('app', ['ui.router'])

app.config(['$stateProvider', '$urlRouterProvider',

function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('index',{
                url: '/index',
                views: {
                    'header': {
                        templateUrl: 'view/header.html'
                    },
                    'content': {
                        templateUrl: 'view/app.html'
                    },
                    'footer': {
                        templateUrl: 'view/footer.html'
                    }
                }
            })
    }])

Также оберните свой код header.html в тег div.

header.html

<div>
    <ul>
        <li>US</li>
        <li>626.205.3838</li>
        <li>[email protected]</li>
        <li>Search</li>
    </ul>
    <ul>
        <li>Facebook</li>
        <li>Twitter</li>
        <li>Instagram</li>
        <li>LinkedIn</li>
    </ul>
</div>

Теперь верхний и нижний колонтитулы останутся фиксированными, и вы можете изменить свой контент на основе состояний, добавив другое состояние следующим образом:

.state('index.two',{
    url: '/index/two',
    views: {
        'content@': {
            templateUrl: 'view/two.html'
        }
    }
})

Mohit Yadav 03 авг. 2016, в 09:12

0

Спасибо, @mohit. Это работает, и спасибо также за ваши заметки.
angelo 04 авг. 2016, в 02:23
0

Рад помочь! Как насчет upvote тогда :)
Mohit Yadav 04 авг. 2016, в 04:49

1

Попробуйте использовать директиву элемента ui-view. И убедитесь, что вы правильно ссылаетесь на шаблон

<body>
  <ui-view></ui-view>
</body>

Mahesh Nathwani 03 авг. 2016, в 09:11

0

Спасибо @mahesh
angelo 03 авг. 2016, в 10:39
1

И даже убедитесь, что вы удалили абстрактный: true из конфигурации маршрутизатора.
Mahesh Nathwani 04 авг. 2016, в 07:21

Ещё вопросы

Спасибо, @mohit. Это работает, и спасибо также за ваши заметки.
Рад помочь! Как насчет upvote тогда :)
И даже убедитесь, что вы удалили абстрактный: true из конфигурации маршрутизатора.

Karim · Accepted Answer · 2016-08-03T08-21-00.000Z

Вы не можете перейти к абстрактному состоянию

Я создал рабочий plnkr здесь: https://plnkr.co/edit/yRazozMjTM99tCKFFmIl?p=preview

$stateProvider
    .state('index',{
        url: '/',
        templateUrl: 'view/app.html'
    })

Спасибо @Karim, это действительно работа. Я также пытаюсь поместить views: {'': {templateUrl: 'view / app.html'}} внутри $ stateProvider, как сказал -mohit. и это тоже работает. если с тобой все в порядке, можешь мне дать дальнейшее объяснение?
это другой подход, у вас будет несколько представлений, привязанных к одному и тому же состоянию, и ваш app.html будет содержать только логику вашего приложения. больше информации здесь: github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Спасибо @Karim, это было большим подспорьем.