AngularJS - 指令

AngularJS指令 - 从简单和简单的步骤学习AngularJS，从基本到高级概念，包括概述，环境设置，MVC架构，第一个应用程序，指令，表达式，控制器，过滤器，表，HTML DOM，模块，表单，包含，Ajax ，视图，范围，服务，依赖注入，自定义指令，内部化，ToDo应用程序，记事本应用程序，Bootstrap应用程序，登录应用程序，上载文件，在线应用程序，导航菜单，切换菜单，订单表格，搜索选项卡，拖动应用程序，购物车申请，翻译申请，图表申请，地图申请，分享申请，天气申请，计时器申请，传单申请，Lastfm申请。

AngularJS指令用于扩展HTML.它们是以 ng -prefix开头的特殊属性.让我们讨论以下指令 :

ng-app : 该指令启动AngularJS应用程序.
ng-init : 该指令初始化应用程序数据.
ng-model : 该指令定义了可在AngularJS中使用的变量模型.
ng-repeat : 该指令为集合中的每个项重复HTML元素.

ng-app指令

ng-app指令启动AngularJS应用程序.它定义了根元素.当加载包含AngularJS Application的网页时，它会自动初始化或引导应用程序.它还用于在AngularJS Application中加载各种AngularJS模块.在以下示例中，我们使用< div>的ng-app属性定义默认的AngularJS应用程序.元素.

...

ng-init指令

ng-init指令初始化AngularJS应用程序数据.它用于为变量赋值.在以下示例中，我们初始化一组国家/地区.我们使用JSON语法来定义国家/地区数组.

...

ng-model directive

ng-model指令定义要在AngularJS Application中使用的模型/变量.在以下示例中，我们定义名为 name 的模型.

   ...   Enter your Name:

ng-repeat指令

ng-repeat指令为集合中的每个项重复HTML元素.在下面的示例中，我们遍历国家/地区数组.

   ...   List of Countries with locale:
                     {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

示例

以下示例显示了所有上述指令的使用.

testAngularJS.htm

         AngularJS Directives               Sample Application
                      Enter your Name: 
         Hello !
         List of Countries with locale:
                                          {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

输出

在Web浏览器中打开文件 testAngularJS.htm .输入你的名字并查看结果.