未注册'EmployeeCntrl'的角度布线错误

这就是为什么我收到错误，因为"EmployeeCntrl"未注册。

我的应用.js

/// <reference path="angular.js" />
/// <reference path="angular-route.js" />
var app = angular.module('MyApp', ['ngRoute'])
app.controller('HomeCtrl', function ($scope) {
$scope.msg = "This is MyApp....";
})
app.config(function ($locationProvider, $routeProvider) {
$routeProvider
.when('/Employee', {
templateUrl: '/Html/Employee/Employee.html',
controller: 'EmployeeCntrl'
})
.when('/Contact', {
controller:'ContactCtrl',
templateUrl: '/Html/Contact/Employee.js'
})
})

马瑟佩奇.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/angular-route.js"></script>
<script src="../../Script/MyApp.js"></script>
<link href="../CSS/Master.css" rel="stylesheet" />
</head>
<body ng-app="MyApp" ng-controller='HomeCtrl'>
<!--// {{msg}}-->
<div id="RightDiv" class="">
<a href="#!/Employee">Employee</a><br />
<a href="#!/Contact">Contact</a>
</div>
<div>
<ng-view></ng-view>
</div>
</body>
</html>

这是我的员工.js代码在这里我实现了来自MyApp的EmployeeCntrl.js员工.js

/// <reference path="F:DesignPatternWebApiClientScript/angular.js" />
/// <reference path="F:DesignPatternWebApiClientScript/angular-route.js" />
/// <reference path="F:DesignPatternWebApiClientScript/MyApp.js" />
app.controller('EmployeeCntrl', function ($scope) {
$scope.Emp="Hello Employee..."
})

在这里我实现了员工.js代码

员工.html

<script src="Employee.js"></script>
<div ng-controller="EmployeeCntrl">
<p>This is Employee</p>
{{Emp}}
</div>

首先将Employee.js添加到root html file。

母版页.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/angular-route.js"></script>
<script src="../../Script/MyApp.js"></script>
<script src="../../Script/Employee.js"></script>
<link href="../CSS/Master.css" rel="stylesheet" />
</head>
<body ng-app="MyApp" ng-controller='HomeCtrl'>
<!--// {{msg}}-->
<div id="RightDiv" class="">
<a href="#!/Employee">Employee</a><br />
<a href="#!/Contact">Contact</a>
</div>
<div>
<ng-view></ng-view>
</div>
</body>
</html>

其次，由于您在路由中采用了控制器引用，因此无需单独获取 html，

员工.html

<div>
<p>This is Employee</p>
{{Emp}}
</div>

由于您已经在配置中为模板定义了控制器，因此无需在模板中再次提及。

此外，最好在母版页本身中引用必要的控制器文件。

<link href="../CSS/Master.css" rel="stylesheet" />
<script src="../../Script/angular.js"></script>
<script src="../../Script/angular-route.js"></script>
<script src="../../Script/MyApp.js"></script>
<script src="Employee.js"></script>

相关内容

最新更新

热门标签：