Как иметь угловые nav-bars и ng-route вместе в приложении MEAN Stack?

Я хочу создать приложение MEAN Stack, в котором интерфейс интерфейса пользователя имеет навигационную панель (nav-bar), содержащую три навигационные ссылки на три разных страницы.Как иметь угловые nav-bars и ng-route вместе в приложении MEAN Stack?

При нажатии на вкладки/элементы навигации соответствующая страница должна открываться. Можно ли это сделать с помощью ngRoute? Если да, то как?

Кроме того, я буду использовать это приложение в приложении MEAN Stack. Я пробовал делать это с помощью ui-router; он работал при развертывании приложения на tomcat. Но всякий раз, когда код развертывается в MEAN Stack, он не работает.

Может ли кто-нибудь рассказать, почему это происходит?

Структура

файла:

Project Name 
|-- client 
| |-- js 
| | `-- app.js 
| |-- templates 
| | |-- about.html 
| | `-- home.html 
| `-- views 
|  `-- index.html 
|-- server 
|-- node_modules 
|-- server.js 
`-- package.json

index.html

<!DOCTYPE html> 
<html> 
<head> 

    <!-- CSS (load bootstrap) --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <style> 
     .navbar { border-radius:0; } 
    </style> 

    <!-- JS (load angular, ui-router, and our custom js file) --> 
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 
    <script src="/client/js/app.js"></script> 
</head> 

<!-- angular app --> 
<body ng-app="routerApp"> 

<!-- NAVIGATION --> 
<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" ui-sref="#">AngularUI Router</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li><a ui-sref="home">Home</a></li> 
     <li><a ui-sref="about">About</a></li> 
    </ul> 
</nav> 


<div class="container"> 
    <div ui-view></div> 
</div> 

</body> 
</html>

app.js

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

routerApp.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 

     .state('home', { 
      url: '/home', 
      templateUrl: '/client/templates/home.html' 
     }) 

     .state('about', { 
      url: '/about', 
      templateUrl: '/client/templates/about.html' 

     }); 

});

server.js

var express   = require('express'), 
    app    = express(); 
    bodyParser  = require('body-parser'); 

app.use(bodyParser()); 

app.get('/', function (req, res) { 
    res.sendfile(__dirname + '/client/views/index.html'); 
}); 

app.use('/js', express.static(__dirname + '/client/js')); 

app.listen(3000, function() { 
    console.log('I\'m Listening...'); 
})

источник

2017-02-02 Akash Hazra

Во-первых, какую ошибку вы получаете в консоли? На первый взгляд, я вижу, что некоторые из ваших ресурсов пропускают протокол в uri.

Теперь вы используете uiRoute, который дает вам больше гибкости, чем ngRoute. Если вы все еще хотите, чтобы пойти с ngRoute, вам нужно сначала загрузить модуль ngRoute в приложении и редактировать маршрутизацию:

(function(){ 

     var app = angular.module('module_name', ['ngRoute']); 

     app.config(['$routeProvider',function($routeProvider) { 
      $routeProvider 
      .when('/url1', { 
       controller: 'nameOfController', 
       controllerAs: 'referenceToController', 
       templateUrl: 'referenceToView', 
       resolve: { // run all these methods before loading project 
        method1: function(){ 
         return value1 
        }, 
        method2: function(){ 
         return value1 
        } 
       } 
      }) 
      .otherwise('/url2'); 
     }]) 

    }());

Для достижения требуемой функциональности с ngRoute, у вас есть несколько вариантов:

1- Использование директивы нг-HREF: вы можете добавить нг-HREF директиву к элементу DOM (элементы меню), как это:

<li><a ng-href="/#/home">Home</a></li>

2- Использование сервиса $ местоположения в контроллере: вы можете добавить нажмите кнопку прослушивания событий в DOM и вызовите метод path() в $ loca Тион служба, как это (вам необходимо создать контроллер первым):

$("a[ui-sref='home']").on("click", function(){ $location.path("/#/home");});

3- Создайте свою собственную директиву: вероятно, нет необходимости, если все, что вы хотите, это просто строка меню. Но если вы хотите выйти за рамки основного поведения (например, обновить некоторые данные в приложении для операций DOM или бизнес-логики):

<li><a ui-sref="home" my-costume-click-directive>Home</a></li> 

angular.module(app).directive('myCostumeClickDirective', function(){ 
    return { 
     link: function(scope, elm, attr, controller, transclude) { 
       // your event listeners and methods go here 
     } 
    } 
    });

источник

2017-02-02 18:39:28

Как иметь угловые nav-bars и ng-route вместе в приложении MEAN Stack?

ответ

Смежные вопросы