angular uses ui-router and the content in the controller is not executed
This is the index page↓
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<p ui-view="commonHeader"></p>
<script src="js/jquery.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-ui-route.js"></script>
<script src="js/header.js"></script>
<script src="js/app.js"></script>
</body>
</html>
This is the public header page↓
<nav id="header" ng-controller="HeaderPage">
<p class="navbar navbar-fixed-top">
<p class="container">
<p class="navbar-header">
<a href="/demo/index.html" class="navbar-brand">
<img src="/demo/images/logo.png" height="40">
</a>
</p>
<ul class="nav navbar-nav navbar-right">
<li ng-repeat="item in navLists">
<a href="javascript:;" class="ng-binding">
{{ item.name }}
<span>{{ item.en }}</span>
</a>
</li>
</ul>
</p>
</p>
</nav>
This is the js of the public header↓
var header = angular.module('Header', []);
header.factory('HeaderFac', [function () {
var HeaderFac = {};
var lists;
HeaderFac.setNavList = function (navList) {
console.log(navList);
lists = navList;
console.log(lists);
};
HeaderFac.getNavList = function () {
return lists;
};
return HeaderFac;
}]);
header.controller('HeaderPage', ['$scope', '$state', '$http', 'HeaderFac', function ($scope, $state, $http, HeaderFac) {
$scope.$watch(HeaderFac.getNavList, function (newVal, oldVal, scope) {
$scope.navLists = newVal;
});
}]);
This is the js of index↓
var condition = "";
var getUserAdProgram = "";
var app = angular.module('app', ['ui.router', 'Header']);
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(condition);
$stateProvider.state('app', {
url: condition,
views: {
'commonHeader': {
templateUrl: '/demo/common/nav.html'
}
}
});
}]);
app.controller('Header', ['$scope', '$http', '$stateParams', 'HeaderFac', '$location', function ($scope, $http, $stateParams, HeaderFac, $location) {
HeaderFac.setNavList([
{
name: '首页',
en: 'HOME',
link: 'index.html'
}, {
name: '关于我们',
en: 'ABOUT US',
link: 'page/about.html'
}, {
name: '设计师风采',
en: 'STYLE',
link: ''
}, {
name: '作品展示',
en: 'SHOW',
link: ''
}, {
name: '教学与交流平台',
en: 'TEACHING',
link: ''
}, {
name: '更多选项',
en: 'MORE',
link: ''
}, {
name: '联系我们',
en: 'CONNECT',
link: ''
}
])
}]);
The code will be executed to app.controller('Header', ['$scope', '$http', '$stateParams', 'HeaderFac', '$location', function ($scope, $http, $stateParams , HeaderFac, $location) {} This line but the content in the function will not be executed
May I ask what the problem is
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This controller called Header does not have a corresponding page