2015-05-13 4 views
2

Угловой работает, как я могу видеть {{ text }}, но я не могу получить ng-view для отображения.Angular.js routing not working

Мой код:

index.html:

<!DOCTYPE html> 
<html ng-app="app"> 
    <head> 
    <script src="https://code.angularjs.org/1.3.5/angular.js"></script> 
    <script src="https://code.angularjs.org/1.3.5/angular-route.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 
    <body ng-app='app'> 
    <div class="main_container" ng-controller="MainController"> 
    <span ng-cloak>{{text}}</span> 
    <div ng-view></div> 
    </div> 

    <!-- modules --> 
    <script src='app.js'></script> 
    <!-- controllers --> 
    <script src='MainController.js'></script> 
    <script src='home.js'></script>  
    </body> 
</html> 

home.js:

app.controller('home', function($scope) { 
    $scope.words = 'It works!'; 
}); 

MainController:

app.controller('MainController',function($scope){ 
    $scope.text = 'Hello World!'; 
}); 

home.html:

<div ng-controller="home"> 
    <h3>{{ words }}</h3> 
</div> 

app.js:

var app = angular.module('app', ['ngRoute']); 
app.config(function($routeProvider, $locationProvider){ 
    $routeProvider. 
     when('/index',{ 
      templateUrl: 'home.html', 
      controller: 'home' 
     }). 
     otherwise({ 
      redirectTo: '/index' 
     }); 
    //$locationProvider.html5Mode(true); 
}); 

редактировать: Это похоже на работу в plunker, но когда я открываю файл в хроме я получаю следующее сообщение об ошибке:

"XMLHttpRequest cannot load {{file location}}. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."

+1

Вам не нужно жестко программировать ваш контроллер в 'home.html', он уже загружен с представлением. Любые ошибки в консоли? – Michelangelo

+0

Ваш домашний контроллер должен называться HomeController, чтобы вы были согласованы. – Luca

ответ

0

Ваш кодекс работающ отлично !! может возникнуть проблема с загрузкой файла первым, поэтому, пожалуйста, позаботьтесь о порядке файлов, добавленных в ваш HTML.

Вот рабочий плункер с вашим кодом. здесь нг ракурса нагрузки без проблем

http://embed.plnkr.co/oNADizOltrGitbWTWNXf/preview

Надежда это помогает !!!

1

Вам не нужен атрибут ng-controller в корневом элементе home.html, поскольку вы уже определяете контроллер для этого шаблона при настройке $routeProvider. Кроме того, ваш код выглядит хорошо. Если вы действительно хотите опередить игру, я бы рекомендовал использовать UI Router, если вы планируете сделать какую-либо расширенную маршрутизацию в своем приложении. Он намного надежнее и удобнее в работе, чем у Angular ngRoute, широко используется и хорошо документирован.