Question

我对Angularjs相对较新，正在建立一个网站。当我尝试将 todo.html 注入 index.html 的正文标记时，没有任何反应。我在控制台中没有收到任何错误。我已经阅读了很多与我相似的帖子，并且已经尝试了

从index.html正文中删除ng-include
将angualrjs和bootstrap的链接从index.html的主体移动到头部
最初我使用的是Ng-route但是没有用，所以我实现了ui-router

我尝试了ng-route和ui-router，两者都运行没有任何错误。我认为它与之无关。

的index.html

    <html ng-app="todoApp">
<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

    <title>Todo App</title>
    <!-- Angular ans JS links-->
    <script src="vendor/angular/angular.min.js"></script>
    <script src="vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/services/todo.service.js"></script>       
    <script src="app/controllers/todo.controller.js"></script>

     <!-- <script src="vendor/angular-route/angular-route.min.js"></script>-->

    <!--Jquery and Bootstrap Links-->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU"
    crossorigin="anonymous"></script>
    <!-- css links  -->
    <link href="vendor/bootstrap-css-only/css/bootstrap.min.css" rel="stylesheet"><!-- load bootstrap -->
    <link rel="stylesheet" href="assets/css/todoApp.css">
    <link rel="stylesheet" type="text/css" href="assets/css/Header-Picture.css">
</head>
<body >

    <div ng-include="'app/views/header.html'"></div>


    <!--<div ng-include="'app/views/footer.view.html'"></div>
    -->
    <ui-view></ui-view>
   <!--<div ui-view></div>-->
  </body>
  </html>

App.js

var todoApp = angular.module('todoApp', [
    'ui.router'
]);
todoApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('todo', {
        url: "/",
        templateUrl: 'views/todo.html',
        controller: 'TodoController'
    })});

todo.controller.js

todoApp.controller('TodoController', ['$scope', 'Todos', function TodoController($scope, Todos) {

    $scope.formData = {};
    console.log("in the TodoController");
    // when landing on the page, get all todos and show them
    Todos.get()
    .success(function(data) {
        $scope.todos = data;
    });

    // when submitting the add form, send the text to the spring API
    $scope.createTodo = function() {
        if(!$scope.todoForm.$valid) {
            return;
        }
        Todos.create($scope.formData)
        .success(function(data) {
            $scope.formData = {}; // clear the form so our user is ready to enter another
            $scope.todos.push(data);
        });
    };

    // delete a todo after checking it
    $scope.deleteTodo = function(id) {
        Todos.delete(id)
        .success(function(data) {
            angular.forEach($scope.todos, function(todo, index){
                if(todo.id == id) {
                    $scope.todos.splice(index, 1);
                }
            });
        });
    };

    // when submitting the add form, send the text to the node API
    $scope.saveTodo = function(todo) {
        Todos.update(todo)
        .success(function(data) {
            $scope.editedTodo = {};
        });
    };

    $scope.editedTodo = {};

    $scope.editTodo = function(todo) {
        $scope.editedTodo = todo;
    }

    $scope.revertTodo = function() {
        $scope.editedTodo = {};
    }

}]);

Answer 1

您应该使用其他方式强制加载第一个状态，如下所示

app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('todo', {
        url: "/",
        templateUrl: 'todo.html',

    })
    $urlRouterProvider.otherwise('/');
});

您的index.html看起来像

<div ng-include="'app/views/header.html'"></div>   
     <ui-view>

     </ui-view>

<强> LIVE DEMO

Answer 2

我将@Aravind发布的代码添加到我的项目中，我相信这是我自己的改进并且是正确的。但问题是todo.html的文件路径。原始文件路径为 views / todo.html
正确的路径是 app / views / todo.html

我的原始代码：

todoApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('todo', {
        url: "/",
        templateUrl: 'views/todo.html',
        controller: 'TodoController'
    })});

当前工作代码

todoApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('todo', {
        url: "/",
        templateUrl: 'app/views/todo.html',

    })
    $urlRouterProvider.otherwise('/');
});

Ng-view或ui-view不显示html页面

2 个答案: