Google 开源的 前端 JS 结构化 框架

动态展示页面数据, 并与用户进行交互

AngularJS 特性(优点)

  • 双向数据绑定
  • 声明式依赖注入
  • 解耦应用逻辑, 数据模型和视图
  • 完善的页面指令
  • 定制表单验证
  • Ajax 封装

入门 Demo

语法详解

1
2
3
4
ng-app(指令) : 告诉 angular 核心它管理当前标签所包含的整个区域,并且会自动创建$rootScope根作用域对象  
ng-model : 将当前输入框的值与谁关联(属性名:属性值), 并作为当前作用域对象($rootScope)的属性  
ular 核心它管理当前标签所包含的整个区域,并且会自动创建$rootScope根作用域对象  
ng-model : 将当前输入框的值与谁关联(属性名:属性值), 并作为当前作用域对象($rootScope)的属性
  1.   表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算，
  2.   语句：通常表示一个完整的执行单位，一段完整的 js 可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。
  3.   区别：语句用封号结尾，有些语句我们没有加封号，比如 console.log 虽然我们没有加封号，但也是语句，因为 js 引擎会自动解析并且加上封号。
  4.   特例：if 语句，就不用加封号   可也是完整的语句。

入门案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<!-- 设置 ng-app 接管的区域 -->
<body ng-app>
<!-- ng-model 实现双向绑定 -->
<input type="text" ng-model="username">
<div>你输入的用户名为：{{username}}</div>
<script src="../js/angular-1.5.5/angular.js"></script>
</body>
</html>