Angular 基础语法

本文最后更新于：2024年3月18日 凌晨

Angular 基础语法

边界指令ng-app

  • 描述:AngularJS框架在使用的时候除了需要引入框架文件之外，还需要为框架指明一个边界，告知框架在哪个范围内生效。
  • 如果不使用边界指令进行声明，则AngularJS框架引入失败。
  • 习惯上写在html标签之内，表示在当前页面中angularJS都能正常使用。

语法:

1
<html ng-app></html>

注意：边界指令是使用NG框架必须使用的一个指令，不写一定使用错误。

呈现指令{{}}` - **描述**:NG框架规定`{{}}嵌套双花括号用来表示内容呈现功能。

  • 在{{}}`中可以书写NG语法规则下的变量，字符串甚至表达式。 - **注意**：呈现指令内只能书写合乎NG语法规则的内容，任何不符合的输入都不能保证最终的呈现结果，这种写法坚决禁止：`{{var num = 1;}}

信息指令ng-model

  • 描述:NG框架规定ng-model用来对input或textarea这类用于收集用户信息的标签进行数据绑定。
  • ng-model所赋的值，即为保存有用户输入内容的NG变量。

语法:

1
<textarea ... ng-model='userInfo'></textarea>

绑定指令ng-bind

  • 描述:NG框架中提供了一个用于对非输入性的标签使用的类似于{{}}呈现指令的辅助指令，即为ng-bind
  • 作用：能够将NG变量绑定到想要显示的标签之上，并且在NG框架加载失败的时候，也不会直接将语法错误暴露出来。
  • 语法:
1
<span ng-bind='message'><span>

初始化指令ng-init

  • 描述:NG框架中规定使用本指令来对边界内部的数据模型（NG变量）进行初始化操作。
  • ng-init并没有规定具体的必须摆放位置，但习惯上放在body上会在页面加载后，自动对内部规定的数据模型进行初始化操作。

语法:

1
<body ng-init='message="hello AngularJS"'></body>

angular.module()方法

  • 描述：本方法是NG框架中提供，用来生成页面数据模型的方法。

语法:

1
var 模型名称 = angular.module('边界名称', [注入信息])
  • 说明：因为现在还没有涉及到注入内容，因此暂时空置即可。

实例

1
var myApp_module = angular.module('app', []);

声明控制器指令ng-controller

  • 描述：本指令用来在页面中声明哪一个元素为控制器。
  • 控制器，就是用来操作数据和视图的部件。

语法:

1
<html ng-controller='mainController'>...</html>
  • 注意：只要声明一个标签拥有控制器，这个控制器在脚本中就必须写出。

实现控制器方法*.controller()

  • 描述：本方法是NG框架在script脚本中提供，用来生成[页面控制器]的方法。

语法:

1
页面数据模型名称.controller('控制器名称', ['$scope', function ($scope){...}]);

实例

1
app.controller('mainController', ['$scope', function ($scope){...}]);

遍历指令ng-repeat

  • 描述：本指令用来遍历NG变量，并根据其进行构建页面html元素。

语法:

1
<E ng-repeat='任意变量名 in NG变量 track by $index'>{{任意变量名}}</E>
  • 说明：track by $index 表示允许有重复内容存在，如果不写出现重复内容会报错。

例子:

1
<li ng-repeat='pname in names track by $index'>{{pname}}</li>

注意:ng-repeat指令必须在controller中对NG变量赋值之后才会生效，单独的ng-repeat毫无用处，因为NG变量不存在，没法赋值。

Software FrontEnd Augular

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！