AngularJS是一个基于MVC(模型-视图-控制)的JS框架。
这次我选择直接在线导入,不再尝试下载到本地了,反正效果对于我来说差不多
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
这是在线导入的语句
先是一个简单的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body ng-app>
商品价格:<input type="number" min="50" max="100" ng-8model="price" /><p>
商品数量:<input type="number" min="0" ng-model="num" /><p>
总价:{{price*num}}
</body>
</html>
ng-app:该指令用于设置AngularJS应用,这意味着所有AngularJS应用处于该元素内,在该元素内可以使用其他AngularJS的指令,也可以用{{}}来输出表达式
ng-model:用来对某个变量进行双向绑定,这里他就是绑定了price和num,完后双向绑定后,当html输入元素的值发生改变时,AngularJS应用中绑定的变量也会随之改变
ng-init可以声明变量
<div ng-init="num=5">
<div ng-init="f={name:'x',numaber:'y'}"> //初始化了一个对象f,再赋值两个属性
<div ng-init="f=[{name:'x',age:20}],[{name:'y',age:11}]"> //初始化了一个数组对象
AngularJS容错性强,如果对象为空,就解析为空,不会被报错
AngularJS和js的区别在于可以直接写在html中,用{{}}括起来就可以
AngularJS不支持分支、循环和异常处理,但是支持大量功能的过滤器
AngularJS的表达式变量是基于$scope的,但js的表达式的变量通常是全局变量。即基于window对象
模块
模块是AngularJS页面的最重要的组成单元,每个模块相当于一个独立的AngularJS应用,模块是一系列服务(service、指令、控制器、过滤器、配置信息)的集合,而控制器则是他的下一级程序单元。
模块的加载分为两种
1.匿名模块,ng-app未指定属性值,此时可以自动加载并创建AngularJS模块
2.命名模块,ng-app指定了属性值,此时必须调用angular对象的module()方法来穿件模块
命名模块创建格式:
angular.module(name,[requires],[configFn])
参数解析:
name:模块名,这个模块名你之前ng-app=什么就是什么了
requires:数组形式,指定创建该模块时需要依赖的模块
configFn:用于传入配置函数
<body ng-app="fkApp" ng-controller="ma">
<div type="text" ng-model="name">
{{name}}
</div>
<script type="text/javascript">
var app = angular.module("fkApp",[]);
app.value("name","zzby"); //变量
app.constant("xxx","200"); //常量
app.controller("ma",function(name,xxx){
console.log(name);
console.log(xxx);
});
</script>
</body>
模块可以通过controller()方法注册控制器
如果一个页面含有多个AngularJS模块,默认只会启动第一个,因此必须调用angular对象的bootstrap()方法来启动指定模块。
<div id="userDiv">
用户名:<input type="text" ng-model="name" /><p></p>
密码:<input type="password" ng-model="pass" /><p></p>
用户名为:{{name}}
密码为:{{pass}}
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
angular.bootstrap(document.getElementById("userDiv"),["myApp"]);
</script>
MVC
模型对应js
视图对应html
控制器对应模块的controller()
$scope的用法
<body>
<div ng-app="fkApp" ng-controller="fkCtrl">
<button ng-click="onclick();">点击就送</button>
<p></p>
一共点击了{{count}}次;
</div>
<script type="text/javascript">
var app = angular.module("fkApp",[]);
app.controller("fkCtrl",function($scope){
$scope.count=0;
$scope.onclick = function(e){
$scope.count++;
console.log(e);
}
});
</script>
</body>
不管是双向绑定的变量还是表达式输出的变量都是属于$scope作用域的
除了普通的scope外,还有一种 r o o t s c o p e 作 用 域 对 应 整 个 应 用 , 因 此 通 过 rootscope作用域对应整个应用,因此通过 rootscope作用域对应整个应用,因此通过rootScope的指定属性和方法可以在多个控制器中共享
<body ng-app="fkApp">
<div ng-controller="fkCtrl">
书名:<input type="text" ng-model="bookName"><p></p>
</div>
<div ng-controller="myCtrl">
{{theName}}
</div>
<script>
var app = angular.module("fkApp",[]);
app.controller("fkCtrl",function($scope,$rootScope){
$scope.bookName="111";
$rootScope.theName = $scope.bookName;
});
app.controller("myCtrl",function($scope,$rootScope){
});
</script>
</body>
使用 w a t c h 方 法 可 以 监 听 watch方法可以监听 watch方法可以监听scope作用域内的属性变化,可以让$rootScope作用域内的theName随着bookName变化
<body ng-app="fkApp">
<div ng-controller="fkCtrl">
书名:<input type="text" ng-model="bookName"><p></p>
</div>
<div ng-controller="myCtrl">
{{theName}}
</div>
<script>
var app=angular.module("fkApp",[]);
app.controller("fkCtrl",function($scope,$rootScope){
$scope.bookName = 'xxxx';
$rootScope.theName = $scope.bookName;
$scope.$watch("bookName",
function(newValue,oldValue){
if(newValue !==oldValue){
$rootScope.theName=$scope.bookName;
}
});
});
app.controller("myCtrl",function($scope,$rootScope){
}); //21+22+22+22+19+89+17+150
//=43+44+36+89=87+125+150=212+150=362
</script>
</body>
过滤器
使用管道字符 ‘’ | ‘ 可以见过滤器添加到表达式或者指令中,过滤器可以对表达式、指令值做进一步的转化处理。
内置过滤器有如下:
1.currency
将数值转换为货币字符串
{{currency_expression|currency:symbol:fractionSize}}
symbol为指定货币符号 ,fractionSize小数的位数
2.date
将日期对象转换为字符串
{{date_expression|date:format:timezone}}
format指格式化模板,timezone指时区
3.filter
将集合中的元素进行过滤,只保留符合条件的元素
{{filter_expression|filter:expression:comparator:anyPropertyKey}}
expression指过滤条件,可以是字符串、对象、函数,comparator指判断相当的比较函数,anyPropertyKey指执行比较的属性名
4.json
将js对象转换成json字符串
{{json_expression|json:spacing}}
其中spacing指定json的缩进字符数,2
5.limitTo
截取数组、类数组、字符串等数据的中间一段
{{limitTo_expression|limitTo:limit:begin}}
limit指定截取的总字符数,正数从头数起,负数从尾数起,begin是开始点,不包括开始点,包括空格符号之类的
6.lowercase
把字符串转换为小写形式
{{lowercase_expression|lowercase}}
7.number
把数值转换为字符串
{{number_expression|number:fractionSize}}
fractionSize指的是格式化后小数部分的位数
8.orderBy
拥抱对数组、类数组结构的元素进行排序
{{orderBy_expression|orderBy:expression:reverse:comparator}}
expression指排序规则,reverse指是否为反序排列,comparator用于指定自定义的大小比较函数
9.uppercase
把字符串转换为大写形式
{{uppercase_expression|uppercase}}
下面是对number和currency的尝试代码:
<body ng-app="fkApp">
<div ng-controller="fkCtrl">
价格:<input type="text" ng-model="price"><p></p>
默认格式:{{price|number}}<p></p>
保留两位:{{price|number:2}}<p></p>
不要小数:{{price|number:0}}<p></p>
默认货币:{{price|currency}}<p></p>
美国:{{price|currency:"USD$"}}<p></p>
美国(不要小数):{{price|currency:"USD$":0}}<p></p>
</div>
<script>
var app = angular.module("fkApp",[]);
app.controller("fkCtrl",function(){
});
</script>
</body>
还有js和html中的不同作用
<body ng-app="fkApp" ng-controller="fkCtrl">
转换小写:{{s| lowercase}}<p></p>
获取前四个字符:{{s|limitTo:4}}<p></p>
从第二个开始获取四个:{{s|limitTo:4:2}}<p></p>
<script type="text/javascript">
var app = angular.module("fkApp",[]);
app.controller("fkCtrl",function($scope,$filter){
$scope.s="dad is COMing!";
console.log($filter("uppercase")($scope.s));
console.log($filter("limitTo")($scope.s,-4));
});
</script>
</body>
orderBy和filter
<body ng-app="fkApp" ng-controller="fkCtrl">
根据age排序:{{arr|orderBy:'age'|json}}<p></p>
根据name属性排序:{{arr|filter:'悟':null:'name'}}<p></p>
<script type="text/javascript">
var app=angular.module("fkApp",[]);
app.controller("fkCtrl",function($scope){
$scope.arr=[{name:'孙悟空',age:500},
{name:'猪八戒',age:420},
{name:'悟湖',age:200},];
});
</script>
</body>
今天注意力有点不集中,写错了好多细节导致一直报错