AngularJS知识概括

最新推荐文章于 2023-11-12 18:01:21 发布

VIP文章 GeorgeLin98

最新推荐文章于 2023-11-12 18:01:21 发布

阅读量2k

点赞数 4

分类专栏：前端文章标签： angular

本文链接：https://blog.csdn.net/weixin_41005188/article/details/113733492

版权

AngularJS知识概括

AngularJS简介
AngularJS使用
数据绑定与依赖注入
MVC与MVMM
作用域、控制器、模块
表达式和指令
过滤器
服务(Service)
provider(供应商)
ngRoute 模块
H5本地存储技术

AngularJS简介

AngularJS是什么：

Google开源的前端JS结构化框架
动态展示页面数据, 并与用户进行交互
官网

AngularJS特性和优点：

双向数据绑定
声明式依赖注入
解耦应用逻辑, 数据模型和视图
完善的页面指令
定制表单验证
Ajax封装

与jQuery的比较：

jQuery
①JS函数库
②封装简化dom操作
angular
①JS结构化框架
②主体不再是DOM, 而是页面中的动态数据

AngularJS能做什么项目：

构建单页面(SPA)Web应用或Web App应用
应用：
①饿了吗: https://www.ele.me/home/
②微信网页版: https://wx.qq.com/
③知乎周报: https://zhuanlan.zhihu.com/Weekly
④后台管理应用: 阿里云, 土豆后台, 唯品会…

AngularJS使用

步骤：

引入AnaularJS

<script type='text/javascript' src="../../vendor/angular/angularjs.js"></script>

使用AngularJS
①导入angular.js, 并在页面中引入
②在<html><body>中ng-app指令
③定义ng-model=‘xxx’/{ {xxx}}
例子：
①ng-app
②ng-model
③{ { }}

<!DOCTYPE html>
<html ng-app="">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" placeholder="用户名" ng-model="username">
    <p>你输入的用户名为: {
  {username}}</p>
</body>
<script type='text/javascript' src="../../vendor/angular/angularjs.js"></script>
</html>

对比jQuery

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<script type="text/javascript" src="../../vendor/jQuery/jquery-1.11.1.js"></script>
<script type="text/javascript">
    $(function () {
    
        $('#name').keyup(function () {
    
            var name = this.value;
            $('#resultSpan').html(name);
        });
    });
</script>
&

最低0.47元/天解锁文章

GeorgeLin98

关注

4
点赞
踩
38

收藏

觉得还不错? 一键收藏
1
评论
AngularJS知识概括

AngularJS知识概括AngularJS简介AngularJS使用四个重要概念三个重要对象两个页面语法AngularJS简介AngularJS是什么：Google开源的前端JS结构化框架动态展示页面数据, 并与用户进行交互官网AngularJS特性和优点：双向数据绑定声明式依赖注入解耦应用逻辑, 数据模型和视图完善的页面指令定制表单验证Ajax封装与jQuery的比较：jQuery①JS函数库②封装简化dom操作angular①JS结构化框架②主体不再是D
复制链接

扫一扫