javascript – $routeProvider与templateURL无法正常工作
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – $routeProvider与templateURL无法正常工作，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3971字，纯文字阅读大概需要6分钟。
内容图文
我在AngularJS中使用带有templateURl的$routeProvider,我的问题是没有任何反应,在开发工具(Chrome或Firefox)上的控制台和网络选项卡上都没有显示.如果我使用模板它的工作原理.
Bellow遵循hmtl和js文件.
mainPainelAdmin.html(dir：view / admin /)
<!DOCTYPE html>
<html ng-app="adminCondominio">
<head>
<meta http-equiv="content-type" content="charset=UTF-8">
<title>Condomínio Ilha de Bari - Painel Administrador</title>
<!-- Font Awesome CSS available via CDN; version 4.3.0 used here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Angular Material CSS now available via Google CDN; version 0.10 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script type="text/javascript" src="../../js/app.js"></script>
<script type="text/javascript" src="../../js/controllers/admin/mainPainelAdmin.js"></script>
<script type="text/javascript" src="../../js/controllers/admin/menuPainelAdmin.js"></script>
<script type="text/javascript" src="../../js/controllers/admin/mainAdmin.js"></script>
<link rel="stylesheet" href="../../css/admin/mainPainelAdmin.css">
<link rel="stylesheet" href="../../css/admin/menuPainelAdmin.css">
</head>
<body>
<div ng-controller="MainPainelAdminCtrl">
<md-content>
<md-toolbar class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings">
<md-icon class="fa fa-bars fa-lg"></md-icon>
</md-button>
<h2>
<span>Condomínio Ilha de Bari - Administrador</span>
</h2>
<span flex></span>
<md-button class="md-raised md-warn" aria-label="Sair" style="padding-right: 5%" ng-click="logOff()">
<md-icon class="fa fa-sign-out fa-lg" style="color: white; padding-left: 50%"> Sair </md-icon>
</md-button>
</md-toolbar>
<section layout="row" flex ng-controller="MenuPainelAdmin">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="true">
<md-list>
<md-list-item class="mouseOver" ng-repeat="item in menuItens">
<p class="menuItemBotao {{item.icon}}" ng-click="go(item.ref)"> {{ item.name }} </p>
</md-list-item>
</md-list>
</md-sidenav>
<md-content flex layout-padding>
<div layout="column" layout-fill layout-align="top center">
<div ng-view></div>
</div>
<div flex></div>
</md-content>
</section>
</md-content>
</div>
</body>
</html>
app.js(dir：js /)
var app = angular.module('adminCondominio',['ngMaterial', 'ngRoute']);
menuPainelAdmin.js(dir：js / controllers / admin /)
app.controller('MenuPainelAdmin', function($scope, $location){
$scope.menuItens = [
{name: 'Início', icon:'fa fa-home fa-lg', ref:'home'},
{name: 'Administra??o', icon:'fa fa-briefcase fa-lg', ref:'admin'},
{name: 'Configura??es', icon:'fa fa-cogs fa-lg', ref:'configs'}
];
$scope.go = function ( path ) {
$location.path( path );
};
});
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateURL: 'inicioAdmin.html',
controller: 'MainAdmin'
})
.when('/admin', {
templateURL: 'administracaoAdmin.html'
})
.when('/configs', {
templateURL: 'configuracaoAdmin.html'
})
.otherwise({
redirectTo: '/home'
});
}]);
mainAdmin.js(dir：js / controllers / admin /)
app.controller('MainAdmin', function($scope){
$scope.message="testeeeeee"
});
inicioAdmin.html(dir：view / admin /)
<h1>{{ message }}</h1>
我错过了什么吗？谢谢.
解决方法:
templateURL应该是路由配置中的templateUrl.
{templateUrl：’some / page.html’}
内容总结
以上是互联网集市为您收集整理的javascript – $routeProvider与templateURL无法正常工作全部内容，希望文章能够帮你解决javascript – $routeProvider与templateURL无法正常工作所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。