【发布时间】：2016-10-29 03:49:35
【问题描述】：
我正在尝试编写一个简单的 Angular 应用程序，它使用 Angular ui-router 在我的应用程序中显示组件。
我可以使用模板和控制器让它工作，但是当我重构组件时，它们不会在屏幕上呈现。我也没有收到任何控制台错误。
这是我的应用程序，它基于 Angular 示例应用程序 Hello Solarsytem
app.js
var myApp = angular.module('materialThings', ['ui.router']);
myApp.config(function ($stateProvider) {
// An array of state definitions
var states = [
{
name: 'about',
url: '/about',
component: 'about'
}
]
// Loop over the state definitions and register them
states.forEach(function (state) {
$stateProvider.state(state);
});
});
myApp.run(function($rootScope) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="about.js"></script>
</head>
<body ng-app="materialThings">
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
</body>
关于.js
angular.module('materialThings').component('about', {
template: '<h3>Its the UI-Router<br>Hello Solar System app!</h3>'
})
【问题讨论】：
-
这是哪个版本的ui-router？
标签： angularjs angular-ui-router angularjs-components