内裤总动员之AngularJS应用

        各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,今天给大家分享一个新的东西就是.AngularJS.

---

angularjs 有四大特性

第一个例子: MVC

第二个例子:模块化

第三个例子:指令系统

第四个例子:双向数据绑定.

首先先给大家来说一下第一个例子,MVC

---

MVC

MVC是 model  view   controller  三个单词的缩写.

model : 数据模型层

view: 视图层 负责展示

controller: 业务逻辑和逻辑控制

好处:职责清晰, 代码模块化

---

angularjs简介

Angularjs通过 ng-directives扩展了html.

ng-app指令定义一个angularjs应用程序

ng-model指令把元素值(比如输入域的值)绑定到应用程序   ; 此命令个人理解为 mvc中的m,也就是数据模型.

ng-bind指令把应用程序数据绑定到html视图.

ng-model

实例讲解:

当王爷加载完毕,angularjs自动开启.

ng-app指令告诉angularjs, div元素是angualrjs 应用程序的 "所有者".

ng-model指令把输入域的值绑定到应用程序变量name.

ng-bind指令把应用程序变量name绑定到某个段落的innerHTML.

ng-init指令初始化angularjs应用程序变量

ng-init  ng-bind

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

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

data-ng

---

AngularJS表达式

AngularJS表达式写在双大括号内: {{expression}}.

AngularJS表达式把数据绑定到HTML,这与ng-bind指令有一异曲同工之处.

AngularJS表达式书写的位置"输出"数据.

AngularJS表达式 很想  JS 表达式.  他们可以包含文字 . 运算符和变量.

10

---

AngularJS应用

AngularJS模块 (module)定义了angularjs应用.

AngularJS控制器(controller)用于控制AngularJS应用.

ng-app指令定义了应用.

ng-controller定义了控制器

angularjs应用

在这里 AngularJS模块定义应用:

模块

AngularJS 控制器控制应用:

控制器