AngularJS_简介、特性及基本使用

AngularJS

Google 开源的前端 JS 结构化框架,主体是 页面中的动态数据,与内存的读取

相较于 jQuery

jQuery 是前端函数库,封装简化 DOM 操作

应用

构建单页面 SPA Web 应用____Single Page Application

将所有的活动局限于一个 html 页面 (即使页面跳转了,也是在本页面跳转)

当页面中有部分数据发生了变化,不会刷新整个页面,而是局部刷新

利用的就是 ajax 技术,路由

Web App 应用

饿了么微信网页版

后台管理应用: 阿里云、土豆后台、唯品会... ...

特性:

双向数据绑定

声明式依赖注入

解耦应用逻辑, 数据模型和视图

完善的页面指令

定制表单验证

Ajax 封装

老版本 angular-1.2.xx

 

新版本 angular-1.5.xx

 

输入框的内容,实时显示到下方:

  • $(function(){
        $('input').keyup(function(){    // 不能使用 change,在失去焦点时触发
            $('span').html(this.value);
        });
    });
    
    /*************** angular-1.2***************/

angularJS 不必写一行 js 代码,即可实现,且速度更快

使用:

1. 引入 angular.js

<script src='./js/angular-1.2.29/angular.js'></script>

2. ng-app 指令,通常 <body ng-app>____使用 插件 ng-inspector 进行数据查看

告诉 angular 核心,管理 当前标签 所包含的整个区域

并且自动创建 $rootScope 根作用域对象

3. 在管理的标签区域内使用 angularJS

ng-model    将当前输入框的值 与 xx 关联(属性名: 属性值),并且作为当前作用域对象 $rootScope 的属性

{{表达式}}    显示数据,从 当前作用域对象 $rootScope 的指定属性名上取

通常有一个返回值,可以放到任何需要的位置,

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

猜你喜欢

转载自www.cnblogs.com/tianxiaxuange/p/10223134.html