没有合适的资源?快使用搜索试试~ 我知道了~
如何使用angularJs
0 下载量 42 浏览量
2020-12-02
10:58:54
上传
评论
收藏 120KB PDF 举报
温馨提示
本期更新,博主将给大家分享一些AngularJs常用的一些属性和方法,AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这个库。AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。因此,有一定JavaScript基础的朋友会更容易理解,其中的一些用法也可参照Javascript的使用方法。 一、AngularJS入门之指令与表达式 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑
资源推荐
资源详情
资源评论
如何使用如何使用angularJs
本期更新,博主将给大家分享一些AngularJs常用的一些属性和方法,AngularJS 是由 Google 的员工 Miško Hevery 从 2009
年开始着手开发。这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这个
库。AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。因此,有一定JavaScript基础的朋友会更容易理
解,其中的一些用法也可参照Javascript的使用方法。
一、一、AngularJS入门之指令与表达式入门之指令与表达式
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
【【AngularJS常用指令】常用指令】
1、ng-app:声明Angular所管辖的区域。一般写在body或html上,原则上一个页面只有一个;
<body ng-app=""></body>
2、ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中。
<input type="text" ng-model="name"/>
3、ng-bind:把应用程序变量中的数据绑定到 HTML视图中。可用表达式{{ }}替代;
<div ng-bind="name"></div>
<div>{{name}}</div>
4、ng-init:初始化 AngularJS应用程序中的变量。
<body ng-app="" ng-init="name=123">
5、表达式: {{}} 绑定表达式,可以包含文字、运算符和变量。但表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=""替代
{{ 5 +""+ 5 + ',Angular'}}
【基本概念】【基本概念】
1、指令:AngularJS中,通过扩展HTML的属性提供功能。所以,ng-开头的新属性,被我们成为指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS入门</title>
</head>
<body ng-app="" ng-init="name=123">
<input type="text" id="input" ng-model="name"/>
<div id="div" ng-bind="name+',Angular'">{{name}}</div>
<input type="text" id="input2" ng-model="name"/>
<p>我的第一个表达式: {{ 5 +""+ 5 + ',Angular'}}</p>
</body>
<script src="libs/jquery-3.1.1.js"></script>
<script src="libs/angular.js"></script>
<script type="text/javascript">
// var input1 = document.getElementById("input");
// var div = document.getElementById("div");
//
// input1.onkeyup = function(){
// div.innerHTML = input1.value;
// }
// $("#input").keyup(function(){
// $("#div").html($("input").val());
// });
</script>
</html>
二、二、AngularJS中的中的MVC与作用域与作用域
[MVC三层架构三层架构]
1、Model(模型模型)::应用程序中用于处理数据的部分。(保存或修改数据到数据库、变量等)。AngularJS中的Model特指的是:
数据
View(视图视图)::用户看到的用于显示数据的页面;
Controller(控制器控制器)::应用程序中处理用户交互的部分。负责从视图读取数据,控制用户输入,并向模型发送数据。
2、工作原理工作原理: 用户从视图层发出请求,controller接收到请求后转发给对应的model处理,model处理完成后返回结果给
controller,并在view层反馈给用户。
主要用于CRUD类应用,不适合游戏开发和DOM操作
创建一个Angular模块,即ng-app所绑定的部分,需传递两个参数:
① 模块名称,即ng-app所需要绑定的名称。ng-app=”myApp”
② 数组:需要注入的模块名称,不需要可为空。
var app = angular.module("myApp",[]);
在Angular模块上,创建一个控制器Controller,需要传递两个参数
① Controller名称,即ng-controller需绑定的名称。ng-controller=”myCtrl”
② Controller的构造函数:构造函数可以传入多个参数,包括$scope/$rootScope以及各种系统内置对象;
[AngularJS中的作用域中的作用域]
① $scope:局部作用域,声明在$scope上的属性和方法,只能在当前Controller中使用;
② $rootScope:根作用域,声明在$rootScope上的属性和方法,可以在ng-app所包含的任何区域使用(无论是否同一
Controller,或是否在Controller包含范围中)。
>>> 若没有使用$scope声明变量,而直接在html中使用ng-model绑定的变量作用域为:
1.如果ng-model在某个ng-controller中,则此变量会默认绑定到当前Controller的$scope上;
2.如果ng-model没有在任何一个ng-controller钟,则此变量将绑定在$rootScope上;
app.controller("myCtrl",function($scope,$rootScope){
//$scope.name = "name1";
$rootScope.age = 14;
$scope.classes = {
name:"H51701",
num:"33"
};
});
app.controller("myCtrl1",function(){
});
三、三、Angular过滤器过滤器
AngularJS中,过滤器可以使用一个管道字符(|)添加到表达式和指令中。
>>> 系统内置过滤器:
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
剩余10页未读,继续阅读
资源评论
weixin_38516270
- 粉丝: 3
- 资源: 1011
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功