黑马程序员技术交流社区

标题: web前端培训教程之AngularJs教程：第三天 [打印本页]

---

作者: 童瑞凯老师    时间: 2017-6-14 17:33
标题: web前端培训教程之AngularJs教程：第三天

安装Node.js （建议使用nvm）

在全局环境安装grunt + http-server

命令行中定位到NG源码目录

执行grunt webserver启动服务

浏览器打开http://localhost:8000/build/docs/api

$scope（上下文模型）

视图和控制器之间的桥梁

用于在视图和控制器之间传递数据

利用$scope暴露数据模型

表达式（Expression）

作用：

使用 表达式 把数据绑定到 HTML。

语法：

表达式写在双大括号内：{{ expression }}。

比较：

表达式作用类似于ng-bind指令

建议更多的使用指令

AngularJS表达式很像JavaScript表达式

它们可以包含文字、运算符和变量

如 {{ 5 + 5 }} 或 {{firstName + ‘-’ +lastName }}

数字    {{100 + 100 }}

字符串     {{'hello' + 'angular' }}

对象    {{zhangsan.name }}

数组    {{students[10] }}

对比 JavaScript 表达式

相同点：

AngularJS 表达式可以包含字母，操作符，变量。

不同点：

AngularJS 表达式可以写在 HTML 中。

AngularJS 表达式不支持条件判断，循环及异常。

AngularJS 表达式支持过滤器。

指令（Directive）

AngularJS有一套完整的、可扩展的、用来帮助Web应用开发的指令集

在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行

在AngularJS中将前缀为ng-这种属性称之为指令，其作用就是为DOM元素调用方法、定义行为绑定数据等

简单说：当一个Angular.js应用启动，Angular编译器就会遍历DOM树来解析HTML，根据指令不同，完成不同操作

HTML5 允许扩展的（自制的）属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5有效。

二者效果相同。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2