jacktn / test-angular Goto Github PK

https://angularjs.org/

001 Angular——MVC框架

Angular干啥——框架 1.帮你 2.限制你 统一、规范

Angular版本 V1.2及以下 不多 V1.3及以上 主流 V2.x V4.x

V1.6.x

80%——没用：重复 Angular.js——业务逻辑

002 Angular.js

MVC模式 M Model 模型-数据 V View 视图-表现层 HTML/CSS C Controller 控制器-业务逻辑

1.M和V耦合度高 2.C特别臃肿

MVP M V P Presenter 主持人

1.M和V没有耦合 2.P特别特别臃肿

MVVM

M V VM ViewModel 1.M和V没有耦合 2.MV还好

MVC 经典 MVP 解除耦合；P臃肿 MVVM 一部分简单逻辑放到HTML里面 取消臃肿 直接、粗暴

Angular.js MVVM

MVvm Mvvp

MV*

003

Angular.js 1.双向绑定 ng-model 数据变了<->视图变化 V <-> M

*自动同步数据和视图

ng-model 双向绑定 ng-bind 输出 单向 数据->视图 ng-app 范围

ng-model 双向绑定 数据、视图自动同步

ng-bind 单向绑定(输出) 数据->视图

ng-app 范围 ?

004

ng-model ng-bind ng-app

ng-bind不太好用

{{表达式}}

M-V-VM

1.方便 2.任何地方

ng-model 数据绑定 ng-bind {{}} ng-app

Angular的核心是数据

ng-init 初始值

指令 1.系统 2.自定义

Angular——增强HTML的功能

{{表达式}} ng-init 初始化

005

循环

1.重复 Angular出于性能考虑 数据 <-> 元素

解决： 不用解决：

ng-repeat 1.重复 2.数组/json

ng-repeat——数组、json 1.重复 track by 不大 2.两种写法 val in xxx (k,v) in xxx

006

1.Angular核心——数据 2.MV*框架 数据

Angular环境和js环境不互通的 ng空间 js空间

打通ng、js环境

ng环境、JS环境——不互通 *打通

it.kaikeba.com

007

Controller

M ng-model model数据 V ng-bind {{}} 表现 C *核心

模块化： 重用

模块： 1.写模块 angular.module(名字, [依赖])

2.用模块 ng-app="名字"

Controller 核心、大段 module angular.module(); ng-app=""

1.写 angular.module(名字, [依赖]) mod.controller(名字, function (){ //代码 ... })

2.用 ng-app="模块名" ng-controller="Controller名字"

008

模块 controller

写、引

ng和js不互通

打通ng和js环境

controller——逻辑核心、大段代码

$scope——angular的作用域(所有的Angular里面的东西，都在$scope上) $scope

009-

数据->UI自动重新渲染

基础知识

Angular特性： 1.双向绑定 ng-model 数据 <-> UI $scope <-> HTML

*意义：

2.依赖注入(依赖反转) 要什么参数，就能得到什么参数 方便

名词： “属性” 指令 ng- “参数” 依赖 $