新手学AngularJs之ng-app

前端之家收集整理的这篇文章主要介绍了新手学AngularJs之ng-app前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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,且带有属性,那么在页面初始化加载的时候,是没有办法完成自动加载的。

原文链接:https://www.f2er.com/angularjs/149227.html

猜你在找的Angularjs相关文章