angular ui-router 官方教程



1.hello World
2.hello solar system
3.hello galaxy

UI-Router for angularJS(1.x)- Hello World



现在我们 要开始要用ui-router 写一个hello world 应用程序,她有两个页面(helloabout),每一个页面都有自己的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很重要,不然会报错

推荐阅读更多精彩内容