2015-12-25 7 views
1

простой угловой пример ui не работает. В консоли нет ошибок.Невозможно отображать содержимое с помощью углового ui

Вот пример:

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
      <title>Home</title> 
     </head> 

     <script> 
      window.onload = function() 
      { 
       var myApp = angular.module('myApp', ['ui.router']); 

       myApp.controller('MainCtrl', function ($scope) { 
       }); 

       myApp.config(function ($stateProvider, $urlRouterProvider) { 

        // default route 
        $urlRouterProvider.otherwise("/first"); 

        // ui router states 
        $stateProvider 
          .state('first', { 
           url: "/first", 
           views: { 
            header: { 
             template: '<h1>First header</h1>', 
             controller: function ($scope) { 
             } 
            }, 
            content: { 
             template: '<p>First content</>', 
             controller: function ($scope) { 
             } 
            }, 
            footer: { 
             template: '<div>First footer</div>', 
             controller: function ($scope) { 
             } 
            } 
           } 
          }); 
       }); 
      } 
     </script> 
     <body ng-controller="MainCtrl"> 
      <ul> 
       <li><a href="#" ui-sref="first">First</a></li> 
       <li><a href="#" ui-sref="second">Second</a></li> 
      </ul>  

      <div ui-view="header"></div> 
      <div ui-view="content"></div> 
      <div ui-view="footer"></div> 

      <!-- Bootstrap core JavaScript + Angular Js 
     ================================================== --> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script> 
     </body> 
    </html> 

Я включил все ресурсы, используя внешнюю CDN. Содержимое шаблона, записанное в угловом формате, не отображается. Я делаю это правильно?

Вот plunker: Plunker

ответ

1

Вы не упомянули имя приложения в любой точке зрения.

<html lang="en" ng-app="myApp"> 

Здесь работает Plunker

+0

Я использовал щий маршрутизатор только для загрузки общего заголовка и нижних колонтитулов, используя angluar. Я не уверен, что это правильный подход? Конечно, заголовок имел бы вход/выход на основе состояния входа – Satyadev

1

Удалить window.onload. Убедитесь, что скрипты с угловым и ui-router загружены до вашего скрипта. И добавьте отсутствующий в элемент html.

Plunkr: http://plnkr.co/edit/XaR3KD2hJ1jOVZ2mWi5H?p=preview

+0

что отличает мой ответ? – Sajeetharan

+0

Не так много, кроме некоторых объяснений. Почему вы думаете, что это должно быть иначе? Существует не так много способов исправления кода OP. Мы просто писали наш ответ одновременно. –

+0

Собирался сказать, что «одновременно» – Satyadev

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