如何使用AngularJS在HTML页面上重新加载主页面

时间:2017-06-17 04:43:39

标签: html angularjs

在我的应用程序中,我在Master.html中声明了ng-app并在其中添加了所有脚本,样式表引用 这是我的主页

<html  ng-app="mainApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Dashboard</title>

    <script src="../Angular/angular.min.js"></script>
    <script src="../Angular/angular-route.js"></script>
    <script src="../Scripts/AngularServices/App.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
                       <li><a href="/main/Group"><i class="fa fa-circle-o"></i>Group</a></li>
                                    <li><a href="/main/Member"><i class="fa fa-circle-o"></i>Member</a></li>
 <section class="content">
                              <div ng-view></div>
                            </section>

</body>
</html>

App.js

var mainApp = angular.module("mainApp", ['ngRoute'])

mainApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/main/Group', { templateUrl: '/Portal/Group.html', controller: 'GroupController' }),
    $routeProvider.when('/main/Member', { templateUrl: '/Portal/Member.html', controller: 'MemberController' });
    $locationProvider.html5Mode(true);
});

// group 
mainApp.controller('GroupController', function ($scope, $http) {
    $http.get('/api/APIGroup/GetGroupDetails').then(function (result) {
        $scope.group = result.data;
    });
});

Group.html

<div ng-controller="GroupController">
    <div class="row">
<h1>Welcome to group</h1>
my content here
 </div>
</div>  

当我执行母版页时,如果点击组链接group.html表单在母版页内打开我的网址就像这样

http://localhost:50810/main/chitGroup

但是如果在这里重新加载页面会出现错误

Server Error in '/' Application.
The resource cannot be found.

母版页不适用于如何解决此问题

1 个答案:

答案 0 :(得分:0)

angular.app ngRoute中,您Single Page Application处理创建ngRoute的状态。

ng-href="#!/main/Group"需要正确地将状态名称作为ngRoute传递,因为当您使用http://localhost:50810/#!/时,网址会自动更改为Server Error in '/' Application. The resource cannot be found.

http://localhost:50810
  

此错误是因为您重定向到/main/Group以查找不存在的 [Errors][1]