I am trying to load a template with ui-router in angular js. These are my html and js files.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS UI Routing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body ng-app="app">
<a href='#/first-msg'>link</a>
<div ui-view></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script src="application.js"></script>
</body>
</html>
application.js
var app = angular.module('app', []);
app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('firstMessage', {
url: '/first-msg',
template: '<strong>hi this is 1st message</strong>'
});
}])
You need to inject ui.router to the module,
var app = angular.module('app', [ui.router]);
DEMO
var app = angular.module('app', ['ui.router']); app.config(['$stateProvider', function($stateProvider) { $stateProvider.state('firstMessage', { url: '/first-msg', template: '<strong>hi this is 1st message</strong>' }); }])
<!DOCTYPE html> <html> <head> <title>AngularJS UI Routing</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body ng-app="app"> <a href='#/first-msg'>link</a> <div ui-view></div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.