1.hello World
2.hello solar system
3.hello galaxy
UI-Router for angularJS(1.x)- Hello World
现在我们 要开始要用ui-router 写一个hello world 应用程序，她有两个页面（
hello 和about），每一个页面都有自己的URL，我们能通过点击链接在两个页面之间切换，处于激活状态的那个链接将会高亮。
Full Source Code(源代码)
index.html
<html>
<head>
<script src="lib/angular.js"></script>
<script src="lib/angular-ui-router.js"></script>
<script src="helloworld.js"></script>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>
</html>
helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
建立一个Hello World 应用程序
按照以下步骤
- 安装ui-router
使用npm: npm install --save angular-ui-router@next
使用bower: bower install angular-ui-router@1.0.0-beta.3
直接从npmcdn下载
- 添加script 标签
注意：在引入angular.js后面再引入angular-ui-router.js，再创建一个helloworld.js
<head>
<script src="lib/angular.js"></script>
<script src="lib/angular-ui-router.js"></script>
<script src="helloworld.js"</script>
</head>
引入angular.js后面再引入angular-ui-router.js很重要，不然会报错
网友评论