如何使用角度正确路由多个 HTML 页面
how to route multiple html pages correctly using angular
我只对AngularJS有基本的了解。我创建了一个具有多个html页面的AngularJS应用程序。这是我的主要视图 html。我很抱歉我的问题太长了。但这是问我问题的更好方式。
Main.cshtml
<html ng-app="myapp">
<head>
<meta name="viewport" content="width=device-width" />
<title>Main</title>
<!-- Main CDN Links-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.1/css/bootstrap-theme.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- end-->
<link href="~/Content/Css/sidebar.css" rel="stylesheet" />
<style>
* {
border-radius: 0 !important;
}
</style>
</head>
<body>
<div class="nav-side-menu">
//some code
</div>
<div class="nav-top-menu nav-top">
//some code
</div>
<div class="contents" id="subContents" ui-view>
//route my sub views to here
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="~/Scripts/smart-table.debug.js"></script>
<script src="~/Scripts/MainView.js"></script>
</body>
</html>
主视图.js
var myapp = angular.module('myapp', ["ui.router"]);
myapp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('sideMenuCustomerDivition', {
templateUrl: "Main/Customer"
})
.state('sideMenuDashboardDivition', {
templateUrl: "Main/Staff"
})
})
我已经将我的另一个 html 视图路由到 main.cshtml.这是该视图的 html。
Customer.cshtml
<html>
<body ng-app="customerTableApp">
<div ng-controller="safeCtrl">
<button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Add random item
</button>
<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate}}</td>
<td>{{row.balance}}</td>
<td>
<button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="~/Scripts/CustomerView.js"></script>
</body>
</html>
客户视图.js
var app = angular.module('customerTableApp', ['smart-table'])
app.controller('safeCtrl', ['$scope', function ($scope) {
var firstnames = ['Laurent', 'Blandine', 'Olivier', 'Max'];
var lastnames = ['Renard', 'Faivre', 'Frere', 'Eponge'];
var dates = ['1987-05-21', '1987-04-25', '1955-08-27', '1966-06-06'];
var id = 1;
function generateRandomItem(id) {
var firstname = firstnames[Math.floor(Math.random() * 3)];
var lastname = lastnames[Math.floor(Math.random() * 3)];
var birthdate = dates[Math.floor(Math.random() * 3)];
var balance = Math.floor(Math.random() * 2000);
return {
id: id,
firstName: firstname,
lastName: lastname,
birthDate: new Date(birthdate),
balance: balance
}
}
$scope.rowCollection = [];
for (id; id < 5; id++) {
$scope.rowCollection.push(generateRandomItem(id));
}
$scope.displayedCollection = [].concat($scope.rowCollection);
$scope.addRandomItem = function addRandomItem() {
$scope.rowCollection.push(generateRandomItem(id));
id++;
};
$scope.removeItem = function removeItem(row) {
var index = $scope.rowCollection.indexOf(row);
if (index !== -1) {
$scope.rowCollection.splice(index, 1);
}
}
}]);
我知道问题是ng应用程序路由到另一个ng应用程序。任何人都可以为此给我更好的解决方案。模板已传送到查看中。我的问题是我无法将值分配给第二个视图。客户视图显示在侧主视图中。但不显示分配的值。浏览器显示该类型的错误。
错误: [ng:areq] http://errors.angularjs.org/1.3.9/ng/areq?p0=safeCtrl&p1=not%20aNaNunction%2C%20got%20undefined 错误(本机) 在 https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:6:416 在 Qb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:19:417) 在SB (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:20:1) 在 https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:76:95 在 https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:57:257 在 S (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:7:408) 在 V (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:57:124) 处 在 G (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:52:9) 时 在 https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:51:118
它可能会帮助你!!
var app = angular.module('MyApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
templateUrl: 'index.html',
controller: 'IndexCtrl'
})
.state('index.test', {
url: '/',
templateUrl: 'test.html',
controller: 'TestCtrl'
})
.state('app', {
templateUrl: 'app.html',
controller: 'AppController'
})
.state('app.test2', {
url: '/test2',
templateUrl: 'test2.html',
controller: 'Test2Controller'
})
});
另一个例子
$stateProvider
.state('index', {
url: '/',
views: {
'@' : {
templateUrl: 'layout.html',
controller: 'IndexCtrl'
},
'top@index' : { templateUrl: 'tpl.top.html',},
'left@index' : { templateUrl: 'tpl.left.html',},
'main@index' : { templateUrl: 'tpl.main.html',},
},
})
.state('index.list', {
url: '/list',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
.state('index.list.detail', {
url: '/:id',
views: {
'detail@index' : {
templateUrl: 'detail.html',
controller: 'DetailCtrl'
},
},
});
我不完全确定你的问题是什么,但是
我要注意的第一件事是,您应该从状态传入控制器。你可以有.state('statename', { templateUrl: 'templateName', controller: controllerName });
此外,您还可以通过使用状态配置对象中的 url 标记来指定要与路由关联的 URL。
.state('sideMenuCustomerDivition', {
url: '/route1',
templateUrl: 'Main/Customer',
controller: 'safeCtrl'
});
现在,如果您导航到带有 url/route1 的路由,则应将模板插入到 ui-view 中
- 使用javascript将动态表从一个html页面打印到另一个html页
- 在chrome.tabs.onCreated之后加载HTML页面
- 如何在vs2002中调试html页面
- 使用angular重定向到html页面
- Html页面上的多个Base64图像和平滑加载
- 无法将数据从firebase获取到我的html页面
- 如何在chrome扩展中重定向到html页面
- 如何将值传递到上一个html页面
- AngularJS-需要在index.html页面中访问来自服务的数据
- 如何使用Node/Express显示有关特定错误的自定义html页面
- 如何在 html 页面中调用 jquery
- 加载存储在IndexedDB中的HTML页面
- 同一HTML页面中的两个不同版本的JQuery
- HTML页面如何提取通过表单传递的参数
- 在HTML页面上将URL解析为可读的json格式
- 使用jQuery插入HTML页面的第一个项目缺少结束标记
- 在HTML页面上显示node.js服务器中的数据
- 加载页面时更改html页面的位置
- Ajax调用返回当前html页面,而不是请求的文件
- css是从远程node.js添加的,但不适用于html页面