Ng-view или ui-view, не отображающий html-страницу

Я относительно новичок в Angularjs и создаю сайт. Когда я пытаюсь ввести todo.html в теги тела index.html ничего не происходит. Я не получаю никаких ошибок в консоли. Я прочитал много подобных сообщений в шахте, и уже пыталисьNg-view или ui-view, не отображающий html-страницу

Удалите нг-включать от тела index.html
Переехал ссылки для angualrjs и начальной загрузки из тело index.html к голове
Первоначально я использовал Ng-маршрут, но он не работает, поэтому я реализовал UI-маршрутизатор

Я пробовал как 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/[email protected]/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 = {}; 
    } 

}]);

источник

2017-01-26 Sean McGrath

Почему ваш url пуст. Вместо «/» вы должны использовать иначе. И я думаю, это ваша проблема. –

Может ли написать jsFiddle с этим кодом? –

Вы определили TodoController –

Вы должны использовать otherwis е, чтобы заставить первое состояние, чтобы быть загружен как показано ниже

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

источник

2017-01-26 22:38:34 Aravind

это то, что вы искали? – Aravind

Спасибо за ваш быстрый ответ. Я добавил свой код в свой проект, но он все еще не работает. –

есть ли у вас ошибки? – Aravind

Я добавил код, отправленный @Aravind в мой проект который, как я считаю, был улучшен сам по себе и был правильным. Но проблема была в пути к файлу todo.html. Путь к файлу в оригинале был просмотров/todo.html
правильный путь приложение/просмотров/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('/'); 
});

источник

2017-01-26 23:47:31

Ng-view или ui-view, не отображающий html-страницу

ответ

Смежные вопросы