Question

您好我试图让ngRoute工作但发现关于ui-route的帖子。我按照这个例子here但我无法正常工作，因为我在控制台中没有错误信息。

我正在尝试纯文本部分atm。

index.html：

<!DOCTYPE html>
<html lang="fr" ng-app="todoList">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">

    </head>
     <!--   <script src="js/jquery.js"></script>
            <script src="js/angular-route.js"></script>-->
        <script src="js/angular.js"></script>

        <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
        <script src="js/todolist.js"></script>
        <script src="js/controller.js"></script>
    <!-- App Script -->

    <body>
       <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
              <div class="container-fluid" >
                <div class="navbar-header">
                  <a class="navbar-brand" ui-sref="index">Pense-bête</a>
                </div>
                 <div class="navbar navbar-right" id="myNavbar" >
                    <ul class="nav navbar-nav">
                        <li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button></li>
                        <li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
                            <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                        </button></li>
                        <li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
                            <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
                        </button></li>                            
                    </ul>
                </div>                    
            </div>
        </nav>
        <div class="row">

        </div>    
        <div class="row" id="menu" ng-controller='navCtrl'>
            <div class="col-sm-3 cold-md-2" id="left-menu">
                <ul class="nav nav-pills nav-stacked">
                    <li ng-class="{active: menu=='inbox'}"><a ui-sref="inbox" ng-click="menu='inbox'"><span class="glyphicon glyphicon-inbox">
                    </span> Boite de réception</a></li>
                    <li ng-class="{active: menu=='today'}"><a ui-sref="today" ng-click="menu='today'"><span class="glyphicon glyphicon-calendar"></span> Aujourd'hui</a></li>               
                    <li><a href="#"><span class="glyphicon glyphicon-calendar"></span> Cette semaine</a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-pushpin"></i> Important </a></li>
                    <li><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-cutlery"></span>
                        Repas</a></li>
                    <li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-shopping-cart"></span>
                        Courses</a></li>
                    <li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-list"></span>
                        Perso</a></li>
                    <li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-plus"></span>
                        Nouvelle liste</a></li>
                </ul>

            </div>
            <div class="col-sm-9 cold-md-10" id='main-view'>

                <div ui-view>

                </div>


            </div>

        </div>

    </body>

</html>

todolist.js：

var todoList = angular.module('todoList', ["ui.router"])

    todoList.config(function($stateProvider){

    $urlRouterProvider.otherwise("/inbox");
    $stateProvider
        .state('inbox', {
            url: "/inbox",
            templateUrl: "partials/inbox.html"

        })
        .state('today', {
            url: "/today",
            templateUrl: "partials/today.html"
        })
    })

controller.js：

var todoListController= angular.module('todoList', []);


todoListController.controller('todoCtrl',['$scope',
    function ($scope) {
        var todos = $scope.todos = [];
        $scope.addTodo = function () {
            var newTodo = $scope.newTodo.trim();
            if (!newTodo.length) {
                return;
            }
            todos.push({
                title: newTodo,
                completed: false
            });
            $scope.newTodo = '';
        };
        $scope.removeTodo = function (todo) {
            todos.splice(todos.indexOf(todo), 1);
        };
        $scope.markAll = function (completed) {
            todos.forEach(function (todo) {
                todo.completed = !completed;
            });
        };
        $scope.clearCompletedTodos = function () {
            $scope.todos = todos = todos.filter(function (todo) {
                return !todo.completed;
            });
        };
    }]);

    todoListController.controller('todayCtrl', function($scope) {
        $scope.message = 'Everyone come and see how good I look!';
    });


    todoListController.controller('navCtrl', function($scope) {
       $scope.menu = 'inbox';
    });

Answer 1

我更新了插件。以下更正。

将angularjs脚本移动为第一个脚本。
包括angular-ui-router.min.js，后跟angularjs
控制器有一个不同的变量todoListController。不是todoList
script.js

<强>的script.js

var todoList = angular.module('todoList', ["ui.router"])
todoList.config(function($stateProvider, $urlRouterProvider){

$urlRouterProvider.otherwise("/inbox");
$stateProvider
    .state('inbox', {
        url: "/inbox",
        templateUrl: "inbox.html"

    })
    .state('today', {
        url: "/today",
        templateUrl: "today.html"
    })
})

<强>的index.html

    <!DOCTYPE html>
<html lang="fr" ng-app="todoList">

  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" ui-sref="index">Pense-bête</a>
        </div>
        <div class="navbar navbar-right" id="myNavbar">
          <ul class="nav navbar-nav">
            <li>
              <button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
              </button>
            </li>
            <li>
              <button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
                <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
              </button>
            </li>
            <li>
              <button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
                <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="row"></div>
    <div class="row" id="menu" ng-controller="navCtrl">
      <div class="col-sm-3 cold-md-2" id="left-menu">
        <ul class="nav nav-pills nav-stacked">
          <li ng-class="{active: menu=='inbox'}">
            <a ui-sref="inbox" ng-click="menu='inbox'">
              <span class="glyphicon glyphicon-inbox"></span>


 Boite de réception</a>
          </li>
          <li ng-class="{active: menu=='today'}">
            <a ui-sref="today" ng-click="menu='today'">
              <span class="glyphicon glyphicon-calendar"></span>


 Aujourd'hui</a>
          </li>
          <li>
            <a href="#">
              <span class="glyphicon glyphicon-calendar"></span>


 Cette semaine</a>
          </li>
          <li>
            <a href="#">
              <i class="glyphicon glyphicon-pushpin"></i>


 Important </a>
          </li>
          <li>
            <a href="#profile" data-toggle="tab">
              <span class="glyphicon glyphicon-cutlery"></span>



                        Repas</a>
          </li>
          <li>
            <a href="#messages" data-toggle="tab">
              <span class="glyphicon glyphicon-shopping-cart"></span>



                        Courses</a>
          </li>
          <li>
            <a href="#messages" data-toggle="tab">
              <span class="glyphicon glyphicon-list"></span>



                        Perso</a>
          </li>
          <li>
            <a href="#messages" data-toggle="tab">
              <span class="glyphicon glyphicon-plus"></span>



                        Nouvelle liste</a>
          </li>
        </ul>
      </div>
      <div class="col-sm-9 cold-md-10" id="main-view">
        <div ui-view></div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script src="script.js"></script>
    <script src="controller.js"></script>
  </body>

</html>

<强> controller.js

todoList.controller('todoCtrl',['$scope',
    function ($scope) {
        var todos = $scope.todos = [];
        $scope.addTodo = function () {
            var newTodo = $scope.newTodo.trim();
            if (!newTodo.length) {
                return;
            }
            todos.push({
                title: newTodo,
                completed: false
            });
            $scope.newTodo = '';
        };
        $scope.removeTodo = function (todo) {
            todos.splice(todos.indexOf(todo), 1);
        };
        $scope.markAll = function (completed) {
            todos.forEach(function (todo) {
                todo.completed = !completed;
            });
        };
        $scope.clearCompletedTodos = function () {
            $scope.todos = todos = todos.filter(function (todo) {
                return !todo.completed;
            });
        };
    }]);

    todoList.controller('todayCtrl', function($scope) {
        $scope.message = 'Everyone come and see how good I look!';
    });


    todoList.controller('navCtrl', function($scope) {
       $scope.menu = 'inbox';
    });

AngularJS / ui-routing无法正常工作：没有msg错误

1 个答案: