javascript - AngularJS 模板未正确加载-6ren

javascript - AngularJS 模板未正确加载

转载作者：行者123 更新时间：2023-11-30 11:57:35

25

4

我最近开始自学网络开发基础知识，目前，我尝试从 AngularJS 入手。但不幸的是，我的第一个项目不会成功。我试图自己修复它，但我找不到问题所在。在我看来，我只是没有以正确的方式包含或导入 Angular 代码。

我的问题:它没有计算 angular 脚本 app.js 的结果，而是显示:{{ here should be Angular related stuff }}

希望您能帮我解决烦人的调试问题。我也很想听听关于我的第一个代码的其他反馈，哪些东西没用，或者我还需要做什么或考虑什么。

非常感谢您的帮助和时间。

我的文件夹树:

应用程序
- 应用程序.js
bower_components
- Angular
- 自举
- d3
- jquery
CSS
- 样式.css
js
- index.js
节点模块
bower.json
index.html

// Define the `SmartIndustryInterfaceApp` module
var smartIndustryInterface = angular.module('SmartIndustryInterface', []);

smartIndustryInterface.controller('WaelzlagerListController', 
    function WaelzlagerListController($scope) {
        $scope.WaelzlagerList[
    {
      name: 'Nexus S',
      snippet: 'Fast just got faster with Nexus S.'
    }, {
      name: 'Motorola XOOM™ with Wi-Fi',
      snippet: 'The Next, Next Generation tablet.'
    }, {
      name: 'MOTOROLA XOOM™',
      snippet: 'The Next, Next Generation tablet.'
    }
  ];
});

<html lang="de" ng-app="SmartIndustryInterface">
    <head>
        <title>Smart Industry Interface</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
        <!-- angular material-->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
        <link rel="stylesheet" href="../css/style.css">
        
        <!-- Angular -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <!-- Bower -->
        <script src="/bower_components/angular/angular.js"></script>
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <!-- D3 -->
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <!-- local -->
        <script src="App/app.js"></script>
    </head>
        
    <body>
        <div>
        <p id="dynamischerHTML">Dieser Text wird noch geladen... ... ... ... </p>
        </div>
        
        <div ng-controller="WaelzlagerListController">
        <ul>
            <li ng-repeat="waelzlager in WaelzlagerList">
                <span>{{waelzlager.name}}</span>
                <p>{{waelzlager.snippet}}</p>
            </li>
        </ul>
        </div>
            
        <div>
        <p ng-controller="testing"> {{firstName + "" + lastName}} </p>
        <script> var app = angular.module("SmartIndustryInterface", []);
                 app.controller("testing", function($scope) {
                    §scope.firstName = "John";
                    $scope.lastName = "Doe"; 
                 });
        </script>
        </div>
        
        <!--<md-list>
            <md-list-item class="md-2-line" ng-repeat="item in todos">
                <md-checkbox ng-model="item.done"></md-checkbox>
                <div class="md-list-item-text">
                    <h3>{{item.title}}</h3>
                    <p>{{item.description}}</p>
                </div>
            </md-list-item>
        </md-list>-->
        
        <script src="js/index.js"></script>
    </body>
</html>

最佳答案

主要问题是:

1 - 错误的字符 § 应该是 $。

§scope.firstName = "John";

应该是

$scope.firstName = "John";

2 - $scope.WaelzlagerList = [...] 中缺少等号

我通过将内联 Controller 与第一个 Controller 一起移动来稍微清理一下代码。

// Define the SmartIndustryInterfaceApp module
var smartIndustryInterface = angular.module('SmartIndustryInterface', []);

smartIndustryInterface.controller('WaelzlagerListController', 
    function ($scope) {
        $scope.WaelzlagerList = [
    {
      name: 'Nexus S',
      snippet: 'Fast just got faster with Nexus S.'
    }, {
      name: 'Motorola XOOM with Wi-Fi',
      snippet: 'The Next, Next Generation tablet.'
    }, {
      name: 'MOTOROLA XOOM',
      snippet: 'The Next, Next Generation tablet.'
    }
  ];
});
smartIndustryInterface.controller("testing", function($scope) {
                    $scope.firstName = "John";
                    $scope.lastName = "Doe"; 
                 });

//angular.element(document).ready(function () {
//    angular.bootstrap(document, ['SmartIndustryInterface']);
//});

<html lang="de" ng-app="SmartIndustryInterface">
    <head>
        <title>Smart Industry Interface</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
        <!-- angular material-->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
        <link rel="stylesheet" href="../css/style.css">
        
        <!-- Angular -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <!-- Bower -->
        <script src="/bower_components/angular/angular.js"></script>
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <!-- D3 -->
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <!-- local -->
        <script src="App/app.js"></script>
    </head>
        
    <body>
        <div>
        <p id="dynamischerHTML">Dieser Text wird noch geladen...</p>
        </div>
        
        <div ng-controller="WaelzlagerListController">
        <ul>
            <li ng-repeat="waelzlager in WaelzlagerList">
                <span>{{waelzlager.name}}</span>
                <p>{{waelzlager.snippet}}</p>
            </li>
        </ul>
        </div>
            
        <div>
        <p ng-controller="testing">{{firstName + ' ' + lastName}}</p>
        </div>

        <script src="js/index.js"></script>
    </body>
</html>

关于javascript - AngularJS 模板未正确加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37503813/

25

4

0

文章推荐： ios - 单击搜索栏时降低行高

文章推荐： java - 如何将 PDF 转换为 XML

文章推荐： ios - unicode 到字符串的快速转换

c++ - 模板的特化模板的定义
namespace std { template <> class hash{ public : size_t operator()( cons
javascript - 出于 SEO 原因，对相同内容使用 Django 模板 + Vue 模板
我正在构建一个 Javascript 交互性有限的 Django 应用程序，并且正在研究如何将 Vue 模板与 Django 模板合并以实现相同的内容。想象一个无限滚动的页面，其中 SEO 非常重要
javascript - 外部类调用 LitElement 组件方法(传递 html 模板)，组件方法更新其 html 模板
我需要一个由游戏逻辑组成的外部类，调用 LitElement 组件，并向其传递一个 html 模板文字，该组件将使用该文字来更新其自己的 html 模板文字的一部分。在下面的代码中，您将看到组件的一
ember.js - 是否可以使用脚本标签加载 Handlebars 模板？或者在 Ember.js 中以编程方式定义 Handlebars 模板
很简单，我不想在 html 文件中定义所有 Handlebars 模板我试过了但这并没有奏效。我是否可以不以编程方式定义模板，甚至只是加载 Handlebars 文件，以便我可以重用，而且我觉得
templates - JQuery 1.5 模板 : JQuery 1. 5 未呈现我的模板。如何调用 JQuery 1.5 模板？
在此代码中，j 正确地成为对象:j.name、j.addr、j.city、j.state 和 j.zip。但是，成功函数有一个 JavaScript 错误 .tmpl() 不是函数。 {{t
Django 模板
Django模板不会？点进来，总结了模板语法传值取值、过滤器和自定义过滤器、模板标签的分类、中间件403报错如何解决、如何继承模板~👆 Django 模板模板传值取值后端传值键值对形式：{‘n
C++模板
哈喽大家好，我是鹿九丸 \color{red}{鹿九丸}鹿九丸，今天给大家带来的是C++模板。如果大家在看我的博客的过程中或者学习的过程中以及在学习方向上有什么问题或者想跟我交流的话可以加我的企
PHP 模板
我正在用 PHP 编写一个简单的模板层，但我遇到了一些困难。目前它是这样工作的: 首先，我使用 fetch_template 从数据库中加载模板内容 - 这可行(如果您有兴趣，我会在启动时收集所有模板
Django 模板
我正在制作有关模板的 Django 教程。我目前处于此代码: from django.template import Template, Context >>> person = {'name': '
Jquery 模板
我正在使用 Jquery 模板来显示传入的 JSON 数据我想将模板加载到可缓存的外部文件中。我该怎么做？更新 http://encosia.com/2010/12/02/jquery-templa
Python 模板
这是我的观点.py: from django.http import HttpResponse from django.template.loader import get_template from
JavaScript 模板
我试图说服一位同事在项目的前端使用 Mustache/Hogan，我提出了以下建议: 有一个 templates.js 文件，大致如下所示: var tpl_alert = '{{msg}}'; va
函数中的c++模板
我想创建一个通用的数组函数。在我的 API 中，我有一个通用容器，我需要将其转换为正确的类，但我想让它通用 template void UT::printArray(CCArray* arr, T t
JavaScript 模板
有谁知道是否有办法在 Genshi 中创建 javascript 模板？我的意思是，我需要一个 .js 文件，可以在其中使用等指令。等等。有什么想法吗？谢谢! 最佳答案你可以直接在html中这
HTML 模板
我想知道是否可以设置某种 HTML 模板系统，基本上我有 3 个不同的文件: - header.html - footer.html - landing.html(landing.html 是包含页面
HTML 模板
我正在尝试构建以下 HTML 模板: 这很简单，如果我使用红色容器 1-4，语法如下: 1 2 3 4 5 6 7 8 9 https://jsfi
模板的c++模板
#include "boost/numeric/ublas/matrix.hpp" using namespace boost::numeric::ublas; template class Lay
类中的c++模板
我在一个类中有一个函数，它传递了一个函数及其参数，然后将它们绑定(bind)到一个函数调用中并调用该函数等。这已经被快速组合在一起以测试我知道代码不是很好的概念。 class Profiling {
用于十进制和任意基数之间转换的c++模板
是否有一个 c++ 结构或模板(在任何库中)允许我在十进制和任何其他基数之间进行转换(很像 bitset 可以做的)？最佳答案是的，你可以使用unsigned int: unsigned int
C++泛型一：模板
数据类型给程序设计带来的困扰及解决方案 int maxt(int, int); double maxt(double, double); 若有一种占位符T，能够代替类型，便可以简化代码的冗余编写

首页

博学

6Ren·AI

商城

javascript - AngularJS 模板未正确加载