适合初学者的任何好的 Angular UI 路由器演练答案

【问题标题】：Any Good Angular UI Route walk through's for beginners适合初学者的任何好的 Angular UI 路由器演练
【发布时间】：2014-09-23 12:35:17
【问题描述】：

早安，

过去几个月我一直在使用 angularjs，现在想开始扩展到 ui 路由器框架，以便我可以开始构建更流畅和功能更强大的应用程序。

谁能指出一些好的教程的正确方向。我在谷歌上看过一些，但很遗憾，它们中的大多数都有些令人困惑。

如果那里有一步一步的基本指南，那就太好了。

这是我的html：

<DOCTYPE! html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--<link rel="stylesheet" href="\css\custom.css">-->
</head>
<body ng-app="testApp">

<section class="row">   
            <section class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                      <section class="container">
                            <section class="navbar-header">
                              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                              </button><!--End on the menu button-->
                              <a class="navbar-brand" ui-sref="#">Test APP</a>
                            </section><!--End of Nav Header-->
                            <section class="navbar-collapse collapse">
                              <ul class="nav navbar-nav">
                                <li class="active"><a ui-sref="home">Home</a></li>
                                <li><a ui-sref="about">FX News</a></li>
                                <li><a ui-sref="contact">Test News</a></li>
                                <li><a ui-sref="about">Contact Us</a></li>
                                <li><a ui-sref="contact">Meet Test</a></li>
                                <li><a ui-sref="about">Logout</a></li>
                              </ul>
                            </section><!--End of the nav-collapse menu-->
                      </section><!--End of the container section-->
            </section><!--End of the navMenu section-->
</section><!--End of the Nav row-->

<section class="row" style="padding-top:2em;"><!--Main content area for the app-->
        <section class="col-xs-12">
            <section ui-view></section>
        </section>
</section><!--End of the main content are of the app-->

</body>
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script><!--jquery-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script><!--bootstrap js-->
    <script src="http://code.angularjs.org/1.2.13/angular.js" type="text/javascript"></script><!--angular js-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"  type="text/javascript"></script><!--UI Route-->
    <script src="js/app.js" type="text/javascript"></script><!--Custom js for the app-->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js" type="text/javascript"></script><!--angular animation-->

</html>

这是 app.js：

// app.js
var testApp = angular.module('testApp', ['ui.test']);

testApp.config(function($stateProvider, $urltestProvider) {

    $urltestProvider.otherwise('/home');

    $stateProvider

        // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            // we'll get to this in a bit       
        });

});

这是我的 partial-home.html：

<section class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates <span class="text-danger">nested</span> views.</p>    
</section>

提前致谢，

Noob Angular 的家伙。

【问题讨论】：

如果正在寻找一些资源，请查看answer 以获取有关 ui-router 核心知识的链接列表

标签： angularjs angular-ui

【解决方案1】：

Pluralsight 有一些很好的 angularJs 教程。我从这里学到的-

PluralSight

我认为第 4 个模块有路由视频教程。

【讨论】：

【解决方案2】：

this article from scotch.io 是我的起点。

最好的学习方法是开始尝试...所以下面的代码应该可以帮助您入门：

    // app.js 
   var routerApp = angular.module('routerApp', ['ui.router']);

 routerApp.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/home');

$stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
    .state('home', {
        url: '/home',
        templateUrl: 'partial-home.html'
    })

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
    .state('about', {
        // we'll get to this in a bit       
    });

});

【讨论】：