【AngularJS探索之旅】入门篇

发布时间：2020-12-17 09:44:04 所属栏目：安全来源：网络整理

导读：AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。 AngularJS完全使用JavaScript编写的客户端技术.同其他历史悠久的Web技术（HTML、CSS和JavaScript）配合使用，使Web应用开发

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS完全使用JavaScript编写的客户端技术.同其他历史悠久的Web技术（HTML、CSS和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷.

什么是 AngularJS？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

AngularJS 指令

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者".
ng-model 指令把输入域的值绑定到应用程序变量 name.
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML.

ng-init 指令初始化应用程序数据

ng-repeat 指令会重复一个 HTML 元素

实例讲解:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://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>

1.当网页加载完毕,AngularJS自动开启

2.ng-app指令如果在div区域内,则表示管理的是页面的一部分

3.AngularJS 表达式写在双大括号内：{{ expression }},AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。AngularJS 将在表达式书写的位置"输出"数据。

4.双向绑定,在修改输入域的值时,AngularJS 属性的值也将修改.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div data-ng-app="" data-ng-init="names=['陈','晓','婵']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li data-ng-repeat="x in names"> {{ x }} </li> </ul> </div> </body> </html>

ng-repeat指令可以用在一个HTML元素或者是对象数组上.

优点:

1.动态视图：js可以扩展HTML的属性它替我们静态的HTML加了很多扩展性功能,有一种让HTML由死变活的感觉.
2.完善：是一个比较完善的前端MVVW框架，包含模板，数据双向绑定,路由,模块化,服务,依赖注入等所有功能,模板功能强大丰富,并且是声明式的,自带了丰富的 Angular 指令.
3.Google维护：AngularJS有Google来维护,无疑有了一个强大的后台,社区也非常活泼,能够很好促进它的发展.

（编辑：李大同）

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