无法让ng-controller在angular应用程序中工作

在Angular应用程序中，ng-controller是AngularJS框架中的一个指令，用于将控制器与视图绑定在一起。然而，在Angular中，ng-controller指令已经被弃用，不再推荐使用。

相反，Angular推荐使用组件化的方式来构建应用程序。组件是Angular的核心概念，它将视图、控制器和模型结合在一起，提供了更加灵活和可维护的开发方式。

要在Angular应用程序中使用组件，首先需要创建一个组件类，该类包含了组件的逻辑和数据。然后，在组件的模板中定义视图，并将组件类与模板进行关联。

下面是一个简单的示例，展示了如何在Angular应用程序中创建一个组件：

创建一个名为"my-component"的组件类：

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <h1>Hello, World!</h1>
  `
})
export class MyComponent {
  // 组件的逻辑和数据
}

在应用程序的模块中声明该组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MyComponent } from './my-component';

@NgModule({
  declarations: [MyComponent],
  imports: [BrowserModule],
  bootstrap: [MyComponent]
})
export class AppModule { }

在应用程序的主模板中使用该组件：

<!DOCTYPE html>
<html>
<head>
  <title>My Angular App</title>
</head>
<body>
  <my-component></my-component>
</body>
</html>

通过以上步骤，我们可以在Angular应用程序中创建一个组件，并将其显示在应用程序的主模板中。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（Mobile）：https://cloud.tencent.com/product/mobile

相关·内容

SignalR 在IE中无法工作 - Internet Explorer

运行基于SignalR的超线程上载器的代码，发现SignalR 在IE 9上居然没法工作了，提示如下：提示很明显，需要json2.js的支持。...使用Nuget 搜索json2.js 并安装：在引用之前引用json2.min.js <script src="Scripts/json2.min.js" type="text/javascript

3.3K10 0

AngularJS 模块

模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。...}; }); 模块和控制器包含在 JS 文件中通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。...AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。 ---- 什么时候载入库? 在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。...对于 HTML 应用程序，通常建议把所有的脚本都放置在元素的最底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。...在我们的实例中，AngularJS 在元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。

1.9K2 0

Angularjs基础(六)

现在你可以在AngularJS 应用中添加控制器，指令，过滤器等。添加控制器　　　　你可以使用ng-controller 指令来添加应用的控制器。　　　　...}；　　　　　　　　　　　　}) 　　　　　　　　模块和控制器包含在JS 文件中　　　　通常AngularJS 应用程序将模块和控制器包含在JavaScript文档中...AngularJS 模块让所有的函数的作用域在该模块下，避免了该问题。什么时候载入库？　　　　在我们的实例中，所有的AngularJS 库都在HTML 文档的头部载入。　　　　...在我们的多个AngularJS 实例中您将看到AngularJS库是在文档的区域被加载。　　　　...在我们的实例中，AngularJS在元素中被加载，因为对angular.module的调用只能在库加载完后才能进行。

3K8 0

Angularjs基础(九)

1.2K6 0

AngularJS 应用

应用程序讲解我的笔记... 元素定义了 AngularJS 控制器的作用域 (ng-controller=)。在一个应用可以有很多控制器。应用文件(my...App.js) 定义了应用模型代码。...---- 总结 - 它是如何工作的呢？ ng-app 指令位于应用的根元素下。...AngularJS 在 HTML DOMContentLoaded 事件中自动开始。如果找到 ng-app 指令， AngularJS 载入指令中的模块，并将 ng-app 作为应用的根进行编译。

1.2K1 0

【AngularJS】 # AngularJS入门

使用Scope 在AngularJS创建控制器时，可以将$scope对象当作一个参数传递 {...Scope作用范围根作用域：$rootScope 作用在 ng-app 指令包含的所有HTML元素中用 $rootScope 定义的值，可以在各个controller中使用 <div ng-app=...AngularJS控制器 ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。 5.1....外部文件中的控制器将标签中的代码复制到 **.js 的外部文件中 HTML中进行引入即可 <div ng-app="myApp" ng-controller="personCtrl...AngularJS 服务(service) 在 AngularJS 中，服务是一个函数或对象，可在 AngularJS 应用中使用。 7.1.

23.2K6 0

Angularjs基础(三)

$rootScope可作用域整个应用中，是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用。　　　　...AngularJS 控制器　　　　　　AngularJS 应用程序被控制器控制。　　　　　　ng-controller指令定义了应用程序控制器。　　　　　　...应用程序在内运行。　　　　　　　　　　ng-controller = "myCtrl" 属性是一个Angular 指令。用于定义一个控制器。　　　　　　　　　　...　　　　在大型的应用程序中，通常是把控制器存储在外部文件中。　　　　...只需要把标签中的代码复制到名为personController.js的外部文件中即可：　　　　　　实例：　　　　　　　　　　<div ng-app="myApp" ng-controller

3.1K5 0

4-进军 angular1.x 控制器和过滤器

4-控制器和过滤器 angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令，数据绑定 3-模型和作用域 scope 4-控制器和过滤器基本 AngularJS 应用程序被控制器控制...ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。...应用程序在内运行。 ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。 myCtrl 函数是一个 JavaScript 函数。...在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。...方法 "myApp" ng-controller="personCtrl"> 名: 姓: 姓名: {{fullName()}} var app = angular.module(

1.9K3 0

AngularJS 控制器

---- AngularJS 控制器 AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。...应用程序在内运行。 ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。 myCtrl 函数是一个 JavaScript 函数。...在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。...在大型的应用程序中，通常是把控制器存储在外部文件中。...只需要把标签中的代码复制到名为 personController.js 的外部文件中即可： AngularJS 实例 <div ng-app="myApp" ng-controller

1.2K2 0

【一起来烧脑】一步学会AngularJS系统

指令允许自定义指令 ng-model 指令把元素值绑定到应用程序 在输入框中输入：...ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </div ng-app 指令定义了 AngularJS 应用程序的...根元素 ng-init 指令为 AngularJS 应用程序定义了初始值 ng-model 指令绑定 HTML 元素到应用程序数据 ng-repeat 指令对于集合中（数组中）的每个项会克隆一次...course", "class", "coding"]; $rootScope.lastname = "w"; }); 控制器 AngularJS控制器控制AngularJS 应用程序的数据... var app = angular.module("myApp", []); <div ng-app="myApp" ng-controller="

5.6K2 0

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

Angular 中的数据绑定是自动从模型和视图间同步数据，Angular的这种数据绑定实现让你可以将应用中的模型和视图的数据看作一个源，视图在任何时候都是对模型的一个投影，当模型发生变化，相关的视图也会发生变化...（Angular APIs对这个操作是隐含的，所以在调用同步的任务不必刻意去调用apply，异步的工作例如http,timeout, Mutation observation / 变动的诊断处理在apply...查看ng-controller了解更多信息作用域$watch性能考虑作用域脏检查属性变动在angular中是一个常规的操作，所以脏检查函数需要尽可能的快。...一个显式的调用只有在实现自定义事件的会调用使用，或在工作在第三方的库的回调中。进入Angular执行上下文通过调用scope....在运行时阶段: 在input control上按下X键来让浏览器发出keydown事件。

13.2K2 0

【AngularJS】—— 2 初识AngularJs（续）

例如下面的代码，定义了一个应用程序的模块myApp，并定义了一个控制器myCtrl： {{ firstName...scope.firstName = "John"; $scope.lastName = "Doe"; }); 　　不过要提前加载angularjs的脚本，这样再script中...angular.module才可以使用。...关于AngularJS表单　　表单是web中重要的组成部分，如下面样例所示，可以很方便的获取到form中的数据 <div ng-app="" ng-controller="formController...　　创建AngularJS应用程序我的笔记 <textarea ng-model

2.2K8 0

7-进军 angular1.x 表单和事件、模块

现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等。...("myApp", []); app.directive("runoobDirective", function() { return { template : "我在指令构造器中创建...}; }); script> 复制代码模块和控制器包含在 JS 文件中通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。...在以下实例中， "myApp.js" 包含了应用模块的定义程序， "myCtrl.js" 文件包含了控制器： AngularJS 实例 script> {{

2.3K2 0

前端框架AngularJS入门

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。...ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。...ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。...ng-controller用于指定所使用的控制器。...注意：以下代码需要在tomcat中运行。

2.4K3 0

AngularJS系列(二)——作用域和控制器

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递: 当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。... {{greeting}}<...function(){ $scope.greeting= "hello " + $scope.name; } }); 当你修改输入框中的值时... 控制器(controller) AngularJS应用程序被控制器控制。 ng-controller定义控制器。控制器是标准的js对象，由标准的js对象的构造函数创建。...controller的@scope用来保存Angular Model controller定义model，view使用model。

4392 0

AngularJS 模块「建议收藏」

模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。...1 创建模块你可以通过 AngularJS 的 angular.module 函数来创建模块： ......现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等。...2 添加控制器你可以使用 ng-controller 指令来添加应用的控制器: { {...("myApp", []); app.directive("runoobDirective", function() { return { template : "我在指令构造器中创建

2203 0

AngularJS简介

地址：各个 angular.js 版本下载...AngularJS属性以ng-开头，但是您可以使用data-ng-来让网页对HTML5有效。什么是AngularJS?...AngularJS 可以在 HTML 元素”背后”添加代码。 AngularJS 支持输入验证。...ng-app指令定义了应用, ng-controller 定义了控制器。...是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

5K2 0

AngularJS浅谈-博客

具体过程： AngularJS 应用程序由 ng-app 定义。应用程序在内运行。 ng-controller=”myCtrl” 属性是一个 AngularJS 指令。...记住一点：在大型的应用程序中，通常是把控制器存储在外部文件中。...只需要把标签中的代码复制到名为 js文件.js 的外部文件中即可，然后在script中引用js文件：接下来说一下AngularJs中核心的集中特性吧！！先来个图！...在AngularJs作为MVC框架，在控制器中我们无需添加对于dom级的事件监听，这些在AngularJs中已经内置了。...在每一个HTML文档中，只能有一个AngularJS应用可以被自动启动，在HTML文档中第一个被找到定义在根元素上的ng-app指令将会作为自动启动的应用。

2.4K3 0

【AngularJS】—— 12 独立作用域

拼写正确后，网友发现报错，无法正常工作。这是因为模板中存在单标签，导致模板无法正确解析~ 再次感谢博友们提出的错误！独立作用域的作用　　为了便于理解，先看一下下面这个例子： <div ng-controller="MainController"...在指令的定义中，添加了scope:{say:'@'}这个键值对属性，也就是说，angular会识别say所绑定的东西是一个字符串。　　在模板中，使用表达式{{say}}输出say所表示的内容。...4 在xingoo标签中，又把这个name绑定到模板中的一个输入框内。　　最终两个输入框的内容被连接起来，无论改变哪一个输入框内的值，testname与name都会发生改变。 ? 　　...也就是说　　通过say在scope中的定义，angular知道了say对应的是个方法；　　通过{name:username}的关联，知道了传入的是username。

1.4K8 0

前端框架：第一章：AngularJS

dom对象，angularJS操作的是变量依赖注入依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建，只需要“吼一嗓子”，则此对象在创建时...作用是告诉子元素以下的指令是归angularJs的,angularJs会识别的,也是使用angularJS必须要使用的指令,是anguarJS的启动引擎 ng-app 指令定义了 AngularJS 应用程序的...ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。...>运算结果：{{add()}} 运行结果如下： ng-controller用于指定所使用的控制器。...注意：以下代码需要在tomcat中运行。

7.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云