使用Angularjs和ui.router的单页应用程序
[英]Single page application using Angularjs and ui.router
问题描述
I'm trying to make a single page application using Angularjs and ui.router, but my code not working. 
我正在尝试使用Angularjs和ui.router创建一个单页应用程序，但是我的代码无法正常工作。
index.html: index.html：
<html>
<head>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
<script src="uirouter.js"></script>
<script src="route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ui-view></div>
<script src="NABHController.js"></script>
<script src="nabh1Controller.js"></script>
<script src="nabh2Controller.js"></script>
</body>
</html>
route.js: route.js：
var compliance=angular.module('ikomplianzNABH',['ui.router']);
compliance.run(function($rootScope, $state) {
$rootScope.$state = $state;
});
compliance.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('/', { /*....This state defines All type of user login...*/
url: '/',
templateUrl: 'NABH.html',
controller: 'NABHController'
})
.state('.nabh1', { /*....This state defines All type of user login...*/
url: '/nabh1',
templateUrl: 'nabh1.html',
controller: 'nabh1Controller'
})
.state('.nabh2', { /*....This state defines All type of user login...*/
url: '/nabh2',
templateUrl: 'nabh2.html',
controller: 'nabh2Controller'
})
});
Here when user is typing the URL http://localhost/test/ the NABH.html page should render. 在此，当用户键入URL http://localhost/test/ ，应呈现NABH.html页面。 inisde this file there is one link to route to another page but this page should render inside that NABH.html ui-view instead of index page. 在此文件中，有一个链接可以路由到另一页，但是此页应在该NABH.html ui-view而不是索引页内呈现。
NABH.html: NABH.html：
<div>
<div ui-view>
<div class="clecklist">
<a ui-sref=".nabh2">Click Me</a>
</div>
</div>
</div>
When user will click on Click Me the nabh2.html should render into this page. 当用户单击“ Click Me ， nabh2.html应该呈现到此页面中。
nabh2.html: nabh2.html：
h1>{{msg}}</h1>
In my case nothing is happening. 就我而言，什么都没有发生。 Here only I need to set NABH.html as parent view and both nabh1.html,nabh2.html should used as its child view. 在这里，只有我需要将NABH.html设置为父视图nabh1.html,nabh2.html应将nabh1.html,nabh2.html都用作其子视图。 My full Plunkr code is here. 我的完整Plunkr代码在这里。
2 个解决方案
解决方案1
0 2017-10-24 12:06:19
Just a suggestion for an alternative: Another option entirely is using ng-include . 只是一个替代建议：另一个选择是完全使用ng-include 。
Index.html: Index.html：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="nabhController">
<div>
<label>{{message}}</label>
</div>
<div ng-view></div>
</div>
</body>
</html>
NABH.html: NABH.html：
<div ng-controller="nabhController">
<div class="checklist">
<div>
<button ng-click="showNabh =! showNabh">Click Me</button>
</div>
<div ng-show="showNabh">
<div ng-include="'nabh1.html'"></div>
</div>
<div ng-show="!showNabh">
<div ng-include="'nabh2.html'"></div>
</div>
</div>
</div>
NABH1.html NABH1.html
<div ng-controller="nabh1Controller">
{{message}}
</div>
NABH2.html NABH2.html
<div ng-controller="nabh2Controller">
<h1>{{message}}</h1>
</div>
Controller 控制者
var app = angular.module('myApp', []);
app.controller('nabhController', function($scope) {
$scope.message = "Welcome";
$scope.showNabh = false;
});
app.controller('nabh1Controller', function($scope){
$scope.message = "Nabh1"
});
app.controller('nabh2Controller', function($scope){
$scope.message = "Nabh2"
});
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: 'nabh.html',
controller: 'nabhController'
})
.otherwise({
redirectTo: '/'
});
});
解决方案2
0 2017-11-28 12:39:57
You can do it in one of two ways: 您可以通过以下两种方式之一进行操作：
First Way: 第一种方式：
var compliance=angular.module('ikomplianzNABH',['ui.router', 'ngSanitize']);
compliance.run(function($rootScope, $state) {
$rootScope.$state = $state;
});
compliance.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('/', { /*....This state defines All type of user login...*/
url: '/',
templateUrl: 'NABH.html',
controller: 'NABHController'
})
.state('.nabh1', { /*....This state defines All type of user login...*/
url: '/nabh1',
templateUrl: 'nabh1.html',
controller: 'nabh1Controller'
})
.state('.nabh2', { /*....This state defines All type of user login...*/
url: '/nabh2',
templateUrl: 'nabh2.html',
controller: 'nabh2Controller'
})
});
var app = angular.module('myApp', []);
app.controller('nabhController', function($scope) {
$scope.$sce = $sce;
$scope.message = "Welcome";
$scope.showNabh = false;
});
app.controller('nabh1Controller', function($scope){
$scope.message = "Nabh1"
});
app.controller('nabh2Controller', function($scope, $sce){
$scope.message = "Nabh2"
});
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: 'nabh.html',
controller: 'nabhController'
})
.otherwise({
redirectTo: '/'
});
});
<div>
<div ui-view>
<div class="clecklist">
<a ng-bind-html="$sce.trustAsHtml(.nabh2.html)">Click Me</a>
</div>
</div>
</div>
Second Way : 第二种方式 ：
<div>
<div ui-view>
<div class="clecklist">
<a ng-click="TakeMeToLink()">Click Me</a>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('nabhController', function($scope, $location) {
$scope.$sce = $sce;
$scope.message = "Welcome";
$scope.showNabh = false;
$scope.TakeMeToLinh = function() {
$location.path("/nabh2");
};
});
app.controller('nabh1Controller', function($scope){
$scope.message = "Nabh1"
});
app.controller('nabh2Controller', function($scope, $sce){
$scope.message = "Nabh2"
});
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: 'nabh.html',
controller: 'nabhController'
})
.otherwise({
redirectTo: '/'
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.