Самый простой способ использовать ng-include

Я пытался написать простое приложение angular.js, которое включает в себя другой файл, используя ng-include. Я, должно быть, что-то сделал / что-то пропустил, чтобы включенный файл не был включен. Должно быть, я делаю что-то в корне неправильно, но не вижу, что это такое.

Вот Index.html

<!DOCTYPE html>
<html>
<head ng-app="app">
    <title>Demo</title>
    <script data-require="angular.js@1.2.0" data-semver="1.2.0"     src="http://code.angularjs.org/1.2.0/angular.js"></script>
    <script data-require="angular-resource@1.2.0" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular-resource.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div ng-controller="appctrl">
        <h1>Airports</h1>
        <div ng-include="'extra.html'"></div>
        <h1>Airports</h1>
    </div>
</body>
</html>

файл extra.html содержит элемент для включения

<h2>Inside</h2>

и script.js - это файл для инициализации угловых

(function () { 
    'use strict';

    var app = angular.module('app', []);
    app.run(['$route',  function ($route) {  // Include $route to kick start the router.
    }]);        

    angular.module('app').controller('appctrl', [function AppCtrl() { }]);
});

Я создал для Plunk, чтобы продемонстрировать, что я имею в виду. Там не так много: определено приложение ng, ссылки на угловые файлы и пара заголовков для определения точки вставки. Ничего не показано между.

Какой самый простой способ использовать ng-include в angular.js?

Источник

2 ответа

  1. Место ng-app в разделе вашего тела.
  2. Включают angular-route.js (например. <script src="http://code.angularjs.org/1.2.0/angular-route.js"></script>) и добавьте эту зависимость в инициализацию вашего приложения (var app = angular.module('app',['ngRoute'])
  3. Не помещайте свой код script.js внутрь (function(){}), (Если вы хотите сделать это, вызовите эту функцию (function(){})();)

Ваш код с изменениями: http://plnkr.co/edit/k1dFPeb9E2B2pjTthi1K?p=preview

Источник

Это мой сценарий:

HTML:

<div id="superhero-nav-container">
    <ul id="superhero-nav">
        <li><a ng-click='template = templates[0]'>Biography & Stats</a></li>
        <li><a ng-click='template = templates[1]'>History</a></li>
        <li><a ng-click='template = templates[2]'>Powers</a></li>
        <li><a ng-click='template = templates[3]'>Enemies</a></li>
    </ul>
</div>
<div class="superhero-templates" ng-include src='template.url'></div>

JS в контроллере:

    $scope.templates = [
        { url: '/views/superheroes/biography.html' },
        { url: '/views/superheroes/history.html' },
        { url: '/views/superheroes/powers.html' },
        { url: '/views/superheroes/enemies.html' }
    ];
    $scope.template = $scope.templates[0];

У меня есть что-то вроде меню, которое изменяет HTML в нижнем div. Надеюсь, это поможет.

РЕДАКТИРОВАТЬ (для комментария ниже):

Ваши ошибки были:

  1. Положить ваши ng-app атрибут в теге html документа не в заголовке

  2. Включить angular-resource.js (например, <script src="https://code.angularjs.org/1.2.15/angular-resource.js"></script>) и добавьте эту зависимость к инициализации вашего приложения:

    angular.module ('app', ['ngResource'])...

  3. Не помещайте свой код script.js внутрь (function(){}). Если вы хотите сделать это, позвоните

    function (function(){})();

Вот ваш рабочий код: Plunker

Источник
Другие вопросы по тегам