新手学AngularJs之ng-app

发布时间：2020-12-17 10:04:31 所属栏目：安全来源：网络整理

导读：ng-app ng-app:是angular的一个指令，使用ng-app或者ng-app=”“来标记一个dom节点，让框架会自动加载，换言之也就是说ng-app是可以带属性的，用ng-app来标记了某一个dom节点，就表示要告诉angular，当前标记的这个节点的所有元素都是angularJS的所有者。那

ng-app

ng-app:是angular的一个指令，使用ng-app或者ng-app=”“来标记一个dom节点，让框架会自动加载，换言之也就是说ng-app是可以带属性的，用ng-app来标记了某一个dom节点，就表示要告诉angular，当前标记的这个节点的所有元素都是angularJS的所有者。
那么对于标记ng-app小节了下面几种情况？
1、不写ng-app
如果不屑ng-app，那么就无法加载对应的代码，说土了就是没有告诉angular那一部分代码是归它管。
如下一段html代码，没有标记ng-app

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../js/angular.js"></script> </head> <body> <div> <p>姓名21111：{{1+2}} </p> </div> </body> </html>

加载结果：angularjs表达式里的代码并没有运算。
姓名21111： {{1+2}}
2、标记了两个ng-app
加载的结果是：angularjs只会自动加载第一个，且ng-app不带属性。
如下范例代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../js/angular.js"></script> </head> <body> <div data-ng-app=""> <p>姓名21111：{{1+2}} </p> </div> <div data-ng-app=""> <p>姓名33333：{{2+2}} </p> </div> </body> </html>

加载的效果：
姓名21111：3
姓名33333：{{2+2}}
ps:ng-app可以看作java里的main方法，只能存在一个。
3、如果标记了ng-app，但是ng-app带了属性会是什么结果？
如下范例代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../js/angular.js"></script> </head> <body> <div data-ng-app="app"> <p>姓名21111：{{1+2}} </p> </div> </body> </html>

加载效果： 姓名21111：{{1+2}} ps:如果标记了ng-app，且带有属性，那么在页面初始化加载的时候，是没有办法完成自动加载的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!