1、AngularJs简介、指令、表达式及其作用

阅读() @2018-01-07 22:20:25

一、什么是AngularJs?它的作用是什么?

AngularJS是一个JavaScript框架。它可通过 标签添加到HTML页面。通过指令扩展了HTML,且通过表达式绑定数据到HTML。AngularJS 使得开发现代的单一页面应用程序变得更加容易。目前很多大型网站例如阿里云都在用Angular构建应用。

1、把应用程序数据绑定到HTM 元素;

2、可以克隆和重复HTML元素;

3、可以隐藏和显示HTML元素;

4、可以在 HTML 元素"背后"添加代码;

5、支持输入验证

测试代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/angular.min.js"></script>
</head>
<body>
<div ng-app='zym' ng-controller='ctrl'>
    <input type="text" ng-model='name' />
    <h1 ng-bind='name'></h1>
</div>
<script type="text/javascript">
var m = angular.module('zym', []);
m.controller('ctrl', ['$scope', function($scope){
  $scope.name = '赵一鸣';
}]);
 </script>
</body>
</html>

点击下载:AngularJs框架

二、AnjularJs的指令:

AngularJS 指令是以 ng 作为前缀的 HTML 属性。当网页加载完毕,AngularJS 自动开启。

1、ng-app指令定义一个 AngularJS 应用程序,告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者";

2、ng-controller指令指定控制器名称,表示这个html元素里边的view数据是通过这个控制器传输的;

3、ng-model指令把元素值(比如输入域的值)绑定到应用程序变量 name;

4、ng-bind 指令把应用程序数据绑定到 HTML 视图,即某个段落的 innerHTML。

如果移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。

三、AngularJS 表达式:

1、写在双大括号内:{{ expression }};

2、表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙;

3、将在表达式书写的位置"输出"数据;

4、AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量,比如:{{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

微信二维码