AngularJS ng-view 不显示视图
AngularJS ng-view not showing view
我正在为前端开发一个带有 AngularJS 的网络应用程序,我正在尝试设置路由并显示视图,到目前为止,甚至 ng-include 和其他东西对我有用,但 ng 不行-看法
我在 visual studio 中开发,当我 运行 应用程序使用本地服务器 (localhost)
这是我的目录结构
- ASP.NET project
---- Css
---- Scripts
-------- App
-------- app.js
----------- Home
-------------- Controllers
------------------ index-controller.js
---- Views
------- Partials
---------- navbar.html
------- home.html
- index.html
这是米 index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scolaris</title>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="Content/materialize/css/materialize.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body ng-app="app_module">
<ng-include src="'Views/Partials/navbar.html'"/>
<div ng-view></div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Content/materialize/js/materialize.js"></script>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-route.js"></script>
<script type="text/javascript" src="Scripts/App/app.js"></script>
<script type="text/javascript" src="Scripts/App/Home/Controllers/index-controller.js"></script>
<script type="text/javascript" src="Scripts/initialization.js"></script>
</body>
</html>
这是我的 app.js
'use strict';
var app_module = angular.module('app_module', ['ngRoute']);
app_module.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/Views/home.html',
controller: 'indexController'
})
.otherwise({
redirectTo: '/'
});
}]);
/* tried with ../../Views/home.html, ../Views/home.html, etc and nothing */
当我加载网站时,它会正确加载,如果我看到请求,我可以清楚地看到它正在请求带有 304 状态代码的 home.html,那是带有 ng-view 的 div没有显示 home.html 中的 html,这是什么原因?
我通过将 <ng-include>
标签更改为 <div ng-include="srctoview">
标签解决了这个问题。如果有人遇到这个问题,我建议这样做,或者像这个答案中那样做 using a controller
感谢@Sourabh- 引导我找到答案。
正确关闭 <ng-include>
指令,因为浏览器正在将 <ng-view>
包装在 <ng-include>
中。它会解决问题。正如@pankaj 已经建议的那样。
我正在为前端开发一个带有 AngularJS 的网络应用程序,我正在尝试设置路由并显示视图,到目前为止,甚至 ng-include 和其他东西对我有用,但 ng 不行-看法 我在 visual studio 中开发,当我 运行 应用程序使用本地服务器 (localhost)
这是我的目录结构
- ASP.NET project
---- Css
---- Scripts
-------- App
-------- app.js
----------- Home
-------------- Controllers
------------------ index-controller.js
---- Views
------- Partials
---------- navbar.html
------- home.html
- index.html
这是米 index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scolaris</title>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="Content/materialize/css/materialize.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body ng-app="app_module">
<ng-include src="'Views/Partials/navbar.html'"/>
<div ng-view></div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Content/materialize/js/materialize.js"></script>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-route.js"></script>
<script type="text/javascript" src="Scripts/App/app.js"></script>
<script type="text/javascript" src="Scripts/App/Home/Controllers/index-controller.js"></script>
<script type="text/javascript" src="Scripts/initialization.js"></script>
</body>
</html>
这是我的 app.js
'use strict';
var app_module = angular.module('app_module', ['ngRoute']);
app_module.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/Views/home.html',
controller: 'indexController'
})
.otherwise({
redirectTo: '/'
});
}]);
/* tried with ../../Views/home.html, ../Views/home.html, etc and nothing */
当我加载网站时,它会正确加载,如果我看到请求,我可以清楚地看到它正在请求带有 304 状态代码的 home.html,那是带有 ng-view 的 div没有显示 home.html 中的 html,这是什么原因?
我通过将 <ng-include>
标签更改为 <div ng-include="srctoview">
标签解决了这个问题。如果有人遇到这个问题,我建议这样做,或者像这个答案中那样做 using a controller
感谢@Sourabh- 引导我找到答案。
正确关闭 <ng-include>
指令,因为浏览器正在将 <ng-view>
包装在 <ng-include>
中。它会解决问题。正如@pankaj 已经建议的那样。