ngRoute
私はAngularJSアプリケーション(myApp)のルーティングを行っていますが、問題があります:私のindex.html
デザインを適用する方法がわかりませんすべてのサイドバーを含む)を私のlogin.html
ページに貼り付けます。このページは、ビューとして定義されている場合はデフォルトで適用されるようです。 login.html
ページのシンプルなデザインがほしいです:私のindex.html
というデザインがなくても、2つのフィールドしか入力できません。これはmyAppのすべてのビューに適用されます。それで、私はそのような仕事を達成するために私のルーティングをする方法を知らない。どうもありがとうございました。ログインページ(index.htmlのないデザイン) - ngRoute(AngularJS)
< - これは私が( - "/ VIEW1" 1つのビューのみのため) - て、myAppで私のルーティングを行う方法のサンプルです>
app.js
のサンプル:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ngCookies',
'myApp.view1',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
各ビューには、ルーティングとコントローラを定義した.jsファイルが関連付けられています。例えば、ビューのための "/ VIEW1" - view1.js
:
'use strict';
angular.module('myApp.view1', ['ngRoute', 'ngResource'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope', function($scope) {
// something
}]);
そして、私のindex.html
のサンプル:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<script src="view1.js"></script>
<-- MORE SCRIPTS ARE LOADED -->
</head>
<body class="hamburg" ng-controller="MasterCtrl">
<-- SIDEBARS ARE DEFINED -->
<div id="content-wrapper">
<div class="page-content">
<!-- Main Content -->
<div class="row">
<div class="col-xs-12">
<div class="widget">
<div class="widget-body">
<div ng-view></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
実際のベアボーンアプローチは、次のようなものになります。https://jsfiddle.net/u2um2yeq/ サービスを使用してユーザーを検証するなど、フィドルログインを安全にするためには、さらに多くのことが行われますまたはトークンを要求ごとに送信します。 – Rob