最简单的使用ng-include的方法

Simplest way to use ng-include

本文关键字：方法 ng-include 最简单      更新时间：2023-09-26

我一直在尝试写一个简单的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>

file extra.html包含要包含的元素

<h2>Inside</h2>
script.js是用来初始化angular 的文件。
(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-app、对angular文件的引用和几个描述插入点的标题。

在angular.js中使用ng-include最简单的方法是什么?
  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];

我有一些像菜单，改变在底部div的html。希望有帮助。

编辑(用于下面的评论):

你的错误是:

  1. 把你的ng-app属性放到

  2. 包含angular-resource.js(例如:<script src="https://code.angularjs.org/1.2.15/angular-resource.js"></script>)并将此依赖项添加到您的应用程序初始化:

    角。module('app'， ['ngResource'])…

  3. 不要把你的script.js代码放在(function(){})里面。如果你想这样做，调用

    function (function(){})();

这是你的工作代码: Plunker

相关文章：