AngularJS（一）_angularjs分支-CSDN博客

本文链接：https://blog.csdn.net/qq_43278421/article/details/106614020

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的指定属性和方法可以在多个控制器中共享

<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 方法可以监听$ 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>