anjuarjs常用ng指令有哪些？新手必学指南

AngularJS 作为一款经典的前端框架，其核心魅力在于通过指令（Directives）扩展 HTML 的功能，实现声明式的数据绑定和动态视图更新，掌握常用 ng 指令是高效开发 AngularJS 应用的基础，以下将详细介绍几个最核心且常用的 ng 指令，涵盖数据绑定、条件渲染、列表渲染、事件处理、表单操作及模块加载等多个方面。

数据绑定指令：ng-app 与 ng-model

数据绑定是 AngularJS 的基石，而 ng-app 和 ng-model 是实现绑定的起点。

ng-app 用于初始化 AngularJS 应用，定义应用的根作用域，它可以加在任何 HTML 元素上，AngularJS 会自动解析该元素及其子元素中的指令。

<div ng-app="myApp">  
    <p>AngularJS 应用已启动</p>  
</div>  

ng-app 可以指定模块名（如 ng-app="myApp"），也可不指定让 AngularJS 自动创建匿名模块。

ng-model 则用于在 HTML 控件（如输入框、下拉框）与 AngularJS 作用域的变量之间建立双向绑定，当控件值变化时，作用域变量同步更新；反之亦然。

<input type="text" ng-model="username">  
<p>你好，{{ username }}！</p>  

当用户在输入框中输入内容时,下方的 <p> 标签会实时显示输入的值。ng-model 还支持绑定到对象属性（如 ng-model="user.name"），适用于复杂数据结构。

条件渲染指令：ng-if、ng-show 与 ng-hide

条件渲染是动态控制元素显示/隐藏的核心功能，AngularJS 提供了多种指令实现这一需求。

ng-if 会根据表达式的值 true/false 来决定是否创建或销毁 DOM 元素，当表达式为 false 时，元素及其子节点会被从 DOM 中移除；为 true 时重新创建。

<button ng-click="toggleShow()">切换显示</button>  
<div ng-if="isVisible">这是一个条件渲染的元素</div>  

配合 $scope.isVisible = true/false 控制显示状态。

ng-show 和 ng-hide 则通过 CSS 的 display 属性控制元素可见性。ng-show 在表达式为 true 时显示元素（display: block），false 时隐藏（display: none）；ng-hide 的逻辑与之相反，两者不会移除 DOM 元素，仅切换样式，适合频繁切换的场景。

列表渲染指令：ng-repeat

ng-repeat 是 AngularJS 中最常用的列表渲染指令，用于遍历数组或对象，动态生成 HTML 元素，其基本语法为 ng-repeat="item in collection"，item 是遍历项的变量名，collection 是数组或对象。

遍历数组渲染列表：

<ul>  
    <li ng-repeat="fruit in fruits">{{ fruit.name }}</li>  
</ul>  

JS 中定义 $scope.fruits = [{name: '苹果'}, {name: '香蕉'}]，即可动态生成列表项。

ng-repeat 还支持多个内置变量，如 $index（当前索引）、$first（是否第一项）、$last（是否最后一项）、$middle（是否中间项），便于实现复杂的列表逻辑。

<li ng-repeat="(key, value) in user" ng-if="$index < 3">  
    {{ key }}: {{ value }}  
</li>  

遍历对象时,key 为属性名，value 为属性值。

需注意,ng-repeat 会为每个重复元素添加唯一的 track by 表达式（如 track by $id(item)），避免因重复项导致渲染错误，尤其在数据源包含唯一 ID 时推荐使用。

事件处理指令：ng-click 与 ng-change

交互功能离不开事件处理,ng-click 和 ng-change 是最常用的事件指令。

ng-click 用于绑定点击事件，当元素被点击时执行指定表达式。

<button ng-click="count = count + 1">点击次数：{{ count }}</button>  

点击按钮时,$scope.count 的值加 1，页面实时更新。

ng-change 则在绑定控件的值发生变化时触发（需配合 ng-model 使用）。

<input type="text" ng-model="searchText" ng-change="handleSearch()">  
```  时，`handleSearch()` 方法会被调用，适合实时搜索、表单验证等场景。  
### 五、表单操作指令：`ng-form`、`ng-submit` 与 `ng-required`  
AngularJS 对表单提供了强大的支持，通过一系列指令简化表单处理。  
`ng-form` 用于创建嵌套表单，解决多个表单组嵌套时的作用域问题。  
```html
<form name="userForm">  
    <div ng-form="nameForm">  
        <input type="text" name="username" ng-model="user.name" ng-required>  
    </div>  
</form>  

可通过 userForm.nameForm.$valid 访问嵌套表单的验证状态。

ng-submit 用于绑定表单提交事件，阻止默认的提交行为，转而执行 AngularJS 的方法。

<form ng-submit="submitForm()">  
    <input type="text" ng-model="formData.name" ng-required>  
    <button type="submit">提交</button>  
</form>  

点击提交按钮时,submitForm() 方法会被调用，避免页面刷新。

ng-required 是表单验证指令，用于设置输入项为必填，当表达式为 true 时，输入项必须填写才能通过验证。

<input type="text" ng-model="email" ng-required="true">  

ng-pattern（正则验证）、ng-minlength/ng-maxlength（长度验证）等指令可组合使用，实现复杂的表单验证逻辑。

模块与加载指令：ng-include 与 ng-cloak

实际开发中,模块化加载和视图优化是提升用户体验的关键。

ng-include 用于加载外部 HTML 模板并插入到当前 DOM 中，支持字符串路径或表达式。

<div ng-include="'header.html'"></div>  

需注意,被包含的文件需与当前页面同源（或服务器配置允许跨域），且模板内容需符合 AngularJS 语法。

ng-cloak 用于解决 AngularJS 初始化时页面闪烁问题，在 AngularJS 加载完成前，带有 ng-cloak 的元素会被隐藏（通过 CSS ng-cloak { display: none; }），加载完成后自动显示，避免用户看到未解析的模板（如 {{ username }}）。

<div ng-cloak>  
    {{ username }}  
</div>  

AngularJS 的常用 ng 指令构成了其核心功能体系：ng-app 初始化应用，ng-model 实现数据双向绑定，ng-if/ng-show 控制条件渲染，ng-repeat 遍历列表，ng-click/ng-change 处理事件，ng-form/ng-submit 管理表单，ng-include 加载模块，ng-cloak 优化视图渲染，熟练掌握这些指令，能够高效构建动态、交互性强的单页应用，为后续深入学习 AngularJS 的高级特性（如自定义指令、依赖注入、路由等）奠定坚实基础。