Я копаюсь в Angular и решил использовать библиотеку Angular Material, чтобы помочь в моем первом приложении. До сих пор у меня есть очень простой код, который я скопировал с https://material.angularjs.org/1.1.0/demo/navBar, который я изменил, чтобы соответствовать моим собственным потребностям. У меня возникли проблемы с переносом головы и маршрутизацией md-nav.Угловой материал и маршрутизация md-nav-bar
<html>
<head>
<title>PRT - CIT</title>
<meta name="viewport" content="width=device-width, initial-scale=1" </meta>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> </head>
<body ng-app="MyApp" id="bootstrap-overrides">
<div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage main">
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('queue')" name="queue">Queue</md-nav-item>
<md-nav-item md-nav-click="goto('detail')" name="detail">Detail</md-nav-item>
<md-nav-item md-nav-click="goto('request')" name="request">Request</md-nav-item>
<!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
<md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
<md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
--></md-nav-bar>
<div class="ext-content"> External content for `<span>{{currentNavItem}}</span>` </div>
</md-content>
</div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-resource/angular-resource.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-messages/angular-messages.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="js/site.js"></script>
<link rel="stylesheet" href="/css/site.css">
</body>
</html>
Вот мои JS:
(function() {
'use strict';
var MyApp = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngRoute']).controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'queue';
}
MyApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/index.html'
, controller: 'AppCtrl'
}).when('/queue', {
templateUrl: '/partials/queue.html'
, controller: 'AppCtrl'
}).when('/detail', {
templateUrl: '/partials/detail.html'
, controller: 'AppCtrl'
}).when('/request', {
templateUrl: '/partials/request.html'
, controller: 'AppCtrl'
});
});
})();
Я вроде потерял, как к тому, как я должен маршруту закладкам. Из того, что я читал, md-nav-bar имеет встроенную маршрутизацию, но я нашел примеры, использующие ngRoute, а также ui-router.
Я также путать, как на самом деле заполнить мои частичный вид в
<div class="ext-content"> External content for `<span>{{currentNavItem}}</span>` </div>
Я попытался с помощью MD-нав-HREF вместо MD-нав щелчок, но это только в конечном итоге перенаправляет меня на страницы , не заполняя содержимое ниже моих вкладок/nav-bar; Я откатил JS, который я написал, и эту часть HTML. Я прочитал другие вопросы, опубликованные в этой области, которые я мог найти, но никто не обращался к визуализации различных частей на основе элемента nav-bar. Какие-либо предложения? Я думал, что могу контролировать currentNavItem и иметь правильный частичный рендеринг на основе его стоимости, но опять же, я не уверен, как на самом деле сделать рендеринг.
Here - это Plnker, который по какой-либо причине не отображается правильно в предварительном просмотре, но код такой же, как у меня локально.
Here - изображение того, как он выглядит как работающий локально.
Заранее благодарен!
Final Edit:
S/O, чтобы @Searching помог мне получить работу ниже. Я обновил plnker link, чтобы отразить изменения. Обратите внимание, что он немного отстает из-за базового скрипта append.
Пожалуйста, добавьте plnker или JS Fiddle ссылка –
@NobalMohan [Здесь] (https://plnkr.co/edit/1ZJu1hjt3brgQwOt1H9I) является ссылка на мой plnker. Как ни странно, это не отображается правильно в предварительном просмотре plnker, но в моем предварительном просмотре через скобки. [Здесь] (https://imgur.com/gallery/g1sYj) - это то, что выглядит локально. – gslette
Для вашего плункера вам просто нужно загрузить таблицы стилей через 'https' вместо' http'. – Searching