MEAN Stackアプリでangular nav-barとng-routeを併用するにはどうすればいいですか？

フロントエンドUIに3つの異なるページへの3つのナビゲーションリンクを含むナビゲーションバー（nav-bar）があるMEAN Stackアプリケーションを作成したいと考えています。MEAN Stackアプリでangular nav-barとng-routeを併用するにはどうすればいいですか？

タブ/ナビゲーション項目をクリックすると、対応するページが開きます。 ngRouteを使ってこれを行うことはできますか？はいの場合は、どうですか？

また、MEAN Stackアプリでそのアプリを使用します。私はui-routerを使ってこれを試みました。それはTomcatにアプリケーションを配備したときに機能しました。しかし、MEANスタックにコードがデプロイされると、コードは機能しません。

なぜそれが起こっているのか教えてください。

ファイル構造：

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のプロトコルがないことがわかります。

これで、ngRouteよりも柔軟性の高いuiRouteを使用しています。

：

は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で行くしたい場合は、アプリケーションでngRouteモジュールをロードし、ルーティングを編集するには、まず必要

の1-使用NG-hrefのディレクティブ：

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

2 - コントローラで使用する$ロケーション・サービス：あなたはこのようにDOM要素（自分のメニュー項目）にNG-HREFディレクティブを追加することができます追加することができますイベントリスナーをDOMにクリックし、$ locaのpath（）メソッドを呼び出しますこのようションサービス（あなたが最初にあなたのコントローラを作成する必要があります）：

$("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

MEAN Stackアプリでangular nav-barとng-routeを併用するにはどうすればいいですか？

答えて

関連する問題