1.hello World
2.hello solar system
3.hello galaxy
UI-Router for angularJS(1.x)- Hello World
現(xiàn)在我們 要開(kāi)始要用ui-router 寫(xiě)一個(gè)hello world 應(yīng)用程序，她有兩個(gè)頁(yè)面（
hello 和about），每一個(gè)頁(yè)面都有自己的URL，我們能通過(guò)點(diǎn)擊鏈接在兩個(gè)頁(yè)面之間切換，處于激活狀態(tài)的那個(gè)鏈接將會(huì)高亮。
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);
});
建立一個(gè)Hello World 應(yīng)用程序
按照以下步驟
- 安裝ui-router
使用npm: npm install --save angular-ui-router@next
使用bower: bower install angular-ui-router@1.0.0-beta.3
直接從npmcdn下載
- 添加script 標(biāo)簽
注意：在引入angular.js后面再引入angular-ui-router.js，再創(chuàng)建一個(gè)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很重要，不然會(huì)報(bào)錯(cuò)
