AngularJS初识

发布时间：2020-12-17 08:25:00 所属栏目：安全来源：网络整理

导读：概念 AngularJS是比较新的技术。Google公司于2009年着手开发，并于2012年发布1.0版本。 AngularJS是JavaScript框架，是一个由js编写的库。它可通过 script 标签添加到 HTML 页面。 AngularJS通过指令扩展了HTML，且通过表达式绑定数据到 HTML。 AngularJS指

概念

　　AngularJS是比较新的技术。Google公司于2009年着手开发，并于2012年发布1.0版本。
　　AngularJS是JavaScript框架，是一个由js编写的库。它可通过<script> 标签添加到 HTML 页面。
　　AngularJS通过指令扩展了HTML，且通过表达式绑定数据到 HTML。
　　AngularJS指令是以 ng 作为前缀的 HTML 属性。
　　AngularJS表达式：

AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。<h1>Hello {{name}}</h1>
AngularJS 将在表达式书写的位置”输出”数据。如：<p>我的第一个表达式： {{ 5 + 5 }}</p>
AngularJS 表达式很像JavaScript 表达式：它们可以包含文字、运算符和变量。

实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> </body> </html>

实例讲解

　　当网页加载完毕，AngularJS 自动开启。
　　ng-app 指令告诉 AngularJS，<div>元素是 AngularJS 应用程序的”所有者”。　　ng-model 指令把输入域的值绑定到应用程序变量 name。　　ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!