AngularJS中ng-app的赋值问题

最新推荐文章于 2024-10-17 07:08:38 发布

原创最新推荐文章于 2024-10-17 07:08:38 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #ng-app

AngularJS 专栏收录该内容

1 篇文章

订阅专栏

本文通过一个具体的AngularJS示例，介绍了如何正确地定义和使用AngularJS模块，特别是在使用ng-app指令时需要注意的问题。作者分享了自己在学习过程中遇到的一个常见错误，并提供了修正后的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 学习AngularJS的时候看了很多文档，觉得自己缺少实践，就开始写demo强化。真的不写不知道，一写吓一跳，发现虽然文档看了很多，但是还是有很多小的细节没有掌握。

 最重要的ng-app，只要看过一点AngularJS，就一定见过它。

 本来是没有发现的，但是学到AngularJS的视图复用时，却踩了一个坑，半天没有走出来。

模块代码如下：

  <div ng-app="hello">
    <input ng-model="greeting.text">
    <p>{{greeting.text}},angular</p>
</div>

`

JS代码：

function helloAngular(

scope) { $scope) {$ scope.greeting={ text:'hi' } }

“`

报错如下：
这里写图片描述

效果如下：
这里写图片描述

错误显示：
名为hello的模块加载出错，没找到。

找了很久，才发现自己JS代码是写的函数，没有写模块，但是给出了模块名，所以就出现了模块出错问题。

如果不想改JS代码，直接写ng-app即可，不用赋值。
做复用时，不建议这种写法，只用给出模块加controller就好。

改正后效果：
这里写图片描述

当我们使用ng-app指令不给其赋值时，浏览器会默认加载这个为ng应用。

当我们为ng-app赋值时，我们要在js中声明这个模块

问题虽小，还是多实践，避免踩坑。