AngularJS如何使用ng-app指令?用法示例

2021年3月19日17:16:14 发表评论 773 次浏览

ng-app指令AngularJS中的"语言"用于定义AngularJS应用程序的根元素。该指令在页面加载时自动初始化AngularJS应用程序。它可以用来在AngularJS应用程序中加载各种模块。

语法如下:

<element ng-app=""> Contents... </element>

范例1:本示例使用ng-app指令定义默认的AngularJS应用程序。

< html >
      
< head >
     < title >AngularJS ng-app Directive</ title >
  
     < script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
     </ script >
</ head >
  
< body style = "text-align:center" >
      
     < h2 style = "color:green" >ng-app directive</ h2 >
      
     < div ng-app = "" ng-init = "name='lsbin'" >
         < p >{{ name }} is the portal for geeks.</ p >
     </ div >
</ body >
  
</ html >

输出如下:

ng-app

范例2:本示例使用ng-app指令定义默认的AngularJS应用程序。

< html >
      
< head >
     < title >AngularJS ng-app Directive</ title >
  
     < script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
     </ script >
</ head >
  
< body ng-app = "" style = "text-align: center" >
  
     < h1 style = "color:green" >lsbin</ h1 >
     < h2 >ng-app Directive</ h2 >
      
     < div >
         < p >Name: < input type = "text" ng-model = "name" ></ p >
         < p >You entered: < span ng-bind = "name" ></ span ></ p >
     </ div >
</ body >
  
</ html >

输出如下:

ngapp

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: