AngularJS学习（一）------AngularJS简介

来源：互联网发布：windows清理垃圾命令编辑：程序博客网时间：2024/05/18 15:51

AngularJS简介

一、什么是AngularJS

AngularJS是 Google 开源出来的一套 js 工具，是一个 JavaScript 框架。它可通过 <script> 标签（标签应该置于页面底部，避免加载angularjs而阻挡HTML加载）添加到 HTML 页面。AngularJS是一个为动态WEB应用设计的结构框架，创新点在于，利用数据绑定和依赖注入，使你不用再写大量的代码。

二、AngularJS的特点

双向数据绑定——从界面的操作能实时反映到数据，数据的变更能实时展现到界面;
模板——在angularjs中，模板相当于html文件被浏览器解析到DOM中，angularjs遍历这些DOM，也就是说把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。
MVVM —— 吸收了传统的MVC设计模式但又不是传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。
依赖注入 —— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
指令 —— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。

三、为什么用AngularJS

1.AngularJS提供了强大的模板功能，提供很多的AngularJS的指令，还可以自定义指令；

2.不需要直接操作元素，而是基于DOM操作；

3.实现了依赖注入；

四、使用AngularJS

1.创建AngularJS的index.html

<html> <html ng-app="myApp">   <head>     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>     <script src="js/main.js"></script>   </head>   <body>   </body> </html>

2.创建所需的main.js

在main.js文件里来定义我们的AngularJS模块：

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

应用的名字作为ng-app指令的值，我们就可以在index.html页面上实例化我们的应用（模块）

<html ng-app="myApp">

我们可以把ng-app设在任何DOM元素上，然后该元素就会成为AngularJS启动运行我们应用的地方

例：

<h2>I am not inside an AngularJS app</h2><div ng-app="myApp">   <h3>Inside an AngularJS app</h3></div>

以上是 AngularJS基本的介绍和操作，下节我们在深入理解。

1 0