（二）Angular的特性，AngularJS语法特点，创建AngularJS应用

最新推荐文章于 2025-01-08 14:09:14 发布

原创最新推荐文章于 2025-01-08 14:09:14 发布 · 966 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular #angularjs #mvc

angular 专栏收录该内容

11 篇文章

订阅专栏

本文介绍AngularJS的基本概念，包括MVC架构原理、如何搭建AngularJS开发环境及创建首个应用。通过实例演示了数据绑定、指令和过滤器等核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular的特性
MVC原理
AngularJS实现MVC模式
M (model 模型) 视图模型：由控制器传给视图的数据和领域模型：一般指数据库里的数据
C (controller 控制器) 连接模型和视图的渠道
V (view 视图) 将数据呈现给用户

创建AngularJS应用

搭建angular应用开发环境：
在https://angularjs.org/或http://www.bootcdn.cn/angular.js/下载最新版本的angular文件压缩包，解压缩后放到网站的根目录，将其中的angualr.js文件引入到HTML页面。
完成以后，就可以使用angular开发web应用了。

编写第一个Angular应用

<html ng-app>
  <head></head>
  <body>
     {{"现在开始学习Angular"}}
  </body>
</html>

当网页加载完毕，AngularJS 自动开始执行；
HTML 页面中 ng-xxx 的属性称之为指令（Directive）；
ng-app 指令告诉 AngularJS，元素是 AngularJS 应用程序管理的边界；
{{ }} 双花括号里面的叫做数据绑定表达式，可以是任何有效的JavaScript值、变量或语句。而在页面上显示的是表达式计算后的结果值。
| 管道符号可以给表达式添加过滤器，如 | number:2， |currency

{{}} 双花括号内的表达式

表达式可以包含字母，操作符，变量。
可以写在 HTML 中。
表达式不支持条件判断if，循环for及异常。
表达式支持过滤器。

ng-model

请输入你的名字：<input type="text" id="username" ng-model="name">
你的名字是： <span>{{name}}</span>

ng-model 指令把文本框的值绑定到变量 name 上；
{{ name }} 表达式就是把应用程序变量 name 绑定到某个dom元素的innerHTML

AngularJS语法特点
Angular 最大程度的减少了页面上的 DOM 操作；
让 JavaScript 中专注业务逻辑的代码；
通过简单的指令结合页面结构与逻辑数据；
通过自定义指令实现组件化编程；
代码结构更合理；
维护成本更低；
Angular 解放了传统 JavaScript 中频繁的 DOM 操作