angularjs入门

AngularJS 快速入门

时间:2015-08-07 16:48来源:网络整理 作者:KKWL 点击:
1、什么是 AngularJS 一套结构框架,用于构建动态的Web App 通过指令对HTML语法进行扩展 2、基本概念 angular 组成.png 概念说明 模板(Template)带有Angular扩展标记的HTML 指令(Directive)用于通过自

1、什么是 AngularJS

一套结构框架,用于构建动态的Web App
通过指令对HTML语法进行扩展

2、基本概念

angular 组成.png


angular 组成.png

概念 说明

模板(Template) 带有Angular扩展标记的HTML

指令(Directive) 用于通过自定义属性和元素扩展HTML的行为

模型(Model) 用于显示给用户并且与用户互动的数据

作用域(Scope) 用来存储模型(Model)的语境(context)。模型放在这个语境中才能被控制器、指令和表达式等访问到

表达式(Expression) 模板中可以通过它来访问作用域(Scope)中的变量和函数

编译器(Compiler) 用来编译模板(Template),并且对其中包含的指令(Directive)和表达式(Expression)进行实例化

过滤器(Filter) 负责格式化表达式(Expression)的值,以便呈现给用户

视图(View) 用户看到的内容(即DOM)

数据绑定(Data Binding) 自动同步模型(Model)中的数据和视图(View)表现

控制器(Controller) 视图(View)背后的业务逻辑

依赖注入(Dependency Injection) 负责创建和自动装载对象或函数

注入器(Injector) 用来实现依赖注入(Injection)的容器

模块(Module) 用来配置注入器

服务(Service) 独立于视图(View)的、可复用的业务逻辑

3、数据绑定(Data Binding)

自动同步模型(Model)中的数据和视图(View):

  • 采用实时模板来代替视图
  • 我们可以将视图理解为模型状态的映射,一旦模型发生变化,对应视图就反映出这些变化
  • 数据绑定.png


    数据绑定.png

    4、作用域($scope)

    作用域本质上是一个JS对象,用来储存应用数据模型,是视图渲染的数据的唯一来源

    script.js

    作用域1.png


    作用域1.png

    index.html

    作用域2.png


    作用域2.png

    5、控制器

    控制器本质上是一个JS构造函数,目的是为了增强 $scope的功能:

  • 初始化$scope对象
  • 为$scope对象添加特定的行为
  • 控制器应当只包含业务逻辑,其他部分可以封装到服务、过滤器中
    控制器的嵌套:自控制器如果找不到某个对应的属性,就会在父作用域中进行查找,以此类推

    index.html

    控制器1.png


    控制器1.png

    controller.js


    6、表达式(Expression)

    模板中可以通过它来访问作用域(Scope)中的变量和函数,通用格式 {{ expression }},例如,
    <p> 1+2= {{1+2}} </p>

    AngularJS的表达式中不允许使用流程控制语句( (a ? b : c)),而且如果要在表达式中使用window对象,则需要引用$window

    7、过滤器(Filter)

    负责格式化表达式(Expression)的值,以便呈现给用户
    格式: {{ 表达式 | 过滤器:参数1:参数2:... }}

    过滤器.png


    过滤器.png

    8、指令(Directive)

    用于通过自定义属性和元素扩展HTML的行为。也就是说,我们在HTML上附加一些自定标记,然后AngularJS的HTML编译器($compile) 就会在对应元素上附加某些指定的行为

    index.html

    指令1.png


    指令1.png

    script.js

    ------分隔线----------------------------