Question

Morning Folks，

我最近几个月一直在使用angularjs，现在想开始分支到ui路由器框架，这样我就可以开始构建更流畅，更实用的应用程序了。

有人能指出我正确指导一些好的教程吗？我在google上看了一些，但是大部分都是令人困惑的。

如果有一步一步的基本指南那就很棒。

这是我的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 1

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       
    });

});

Answer 2

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

PluralSight

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

任何Good Angular UI Route都适合初学者

2 个答案: