Angularjs笔记(一)
<script type="text/javascript"> //这些参数不能修改名字 function Aaa($scope,$rootScope){ $scope.name="hello"; //name挂载到$scope，$scope是一个局部作用域，对应的控制器也是局部的 $scope.age="20"; //$rootScope是全局，在Bbb下能找到 $rootScope.sel="sel"; } function Bbb($scope){ $scope.name="hi" } </script> <body> <!--第一种方式--> <div ng-controller="Aaa"> <p>{{name}}</p> <p>{{age}}</p> </div> <div ng-controller="Bbb"> <p>{{name}}</p> <p>{{sel}}</p> </div> <!--第二种方式--> <div ng-controller="Aaa"> <p>{{name}}</p> <p>{{age}}</p> <!--如果model是指向Bbb的他就会来这里找，要是没有他就会向上找也就是向Aaa这里找--> <div ng-controller="Bbb"> <p>{{name}}</p> <p>{{sel}}</p> </div> </div> </body>
依赖注入
<script type="text/javascript"> //angular是没有传参的，要传参是通过这$scope, $rootScope这些就是依赖注入 //$scope注入的局部的，$rootScope注入的是全部的 //这些参数统称叫服务，服务是由$开头的后台跟名字 function Aaa($scope, $rootScope) { $scope.name = "hello"; } </script> <body> <div ng-controller="Aaa"> <p>{{name}}</p> <p>{{age}}</p> </div> </body>
指令
<html ng-app>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function Aaa($scope, $rootScope) {
$scope.name = "hello";
}
</script>
<body>
<!--这些以ng-开头的叫做指令,html上的ng-app就是初始化指令,ng-app是可以写到任何地方-->
<div ng-controller="Aaa">
<p>{{name}}</p>
</div>
</body>
</html>
双向数据绑定(MVVM设计模式，数据改变影响视图，视图改变影响数据)
//改变数据影响视图
<script type="text/javascript"> function Aaa($scope,$timeout) { $scope.name = "hello"; // setTimeout(function(){ // 两秒过后数据改变，下面视图是成ha了，不过原生的定时器是不具备刷新视图的功能， // 所以看不到,等要用angular提供的定时器功能$timeout // $scope.name="ha"; // },2000); $timeout(function(){ $scope.name="hi"; },2000); } </script> <body> <div ng-controller="Aaa"> <p>{{name}}</p> </div> </body>
//视图影响数据
<script type="text/javascript"> function Aaa($scope,$timeout) { $scope.name = "hello"; } </script> <body> <div ng-controller="Aaa"> <!--ng-model是上面的数据--> <input type="text" ng-model="name" /> <p>{{name}}</p> </div> </body>
也可以在视图里直接点击改变name值，也可用个函数
<div ng-controller="Aaa" ng-click="name='hi'"> <p>{{name}}</p> </div>
<script type="text/javascript"> function Aaa($scope,$timeout) { $scope.name = "hello"; $scope.show=function(){ $scope.name="hi"; } } </script> <body> <div ng-controller="Aaa" ng-click="show()"> <p>{{name}}</p> </div> </body>
过滤器，比如货币格式过滤器
<!--表达式里是可以支持符号的--> <!--过渡器的操作是在后面加个 |在加过滤器名 currency--> <p>费用：<span>{{iphone.money * iphone.num | currency:"￥"}}</span></p>
<script type="text/javascript"> function Aaa($scope,$timeout) { $scope.iphone={ money:5, num:1 } //表达式如果显的臃肿，可以写到这里 $scope.sum=function(){ //这里要把$scope加上 return $scope.iphone.money * $scope.iphone.num; } } </script> <body> <div ng-controller="Aaa"> <p>价格：<input type="text" ng-model="iphone.money"></p> <p>个数：<input type="text" ng-model="iphone.num"></p> <!--这里调方法--> <p>费用：<span>{{ sum()| currency:"￥"}}</span></p> </div> </body>
监听数据变化的变化$watch，他接收三个参数,前两个是必选，他是挂载到$scope下的
<script type="text/javascript"> function Aaa($scope,$timeout) { $scope.iphone={ money:5, num:1, fre:10 } $scope.sum=function(){ return $scope.iphone.money * $scope.iphone.num; } //$watch他只能监听单值，如果要监听全部最后一个参数要为true $scope.$watch("iphone",function(newVal,lodVal){ console.log(newVal); console.log(oldVal); },ture); //他不但可以监听字符串也可以监听函数 //function回调也接收三个形参，第一个是新的值，第二个老的值 $scope.$watch($scope.sum,function(newVal,lodVal){ // console.log(newVal); // console.log(oldVal); $scope.iphone.fre=newVal>=100?0:10; }); } </script>
angular模块化开发(1、可以减少变量之间的污染，2、可以做到依赖)
angular.module()接收两个参数，第一个是字符串，第二个是数组
<script type="text/javascript"> //创建模块,上面的ng-app要指写下面的模块哪个为初始模块如：ng-app="myApp" var m1=angular.module('myApp',[]); //建立控制器，这样就成模块化了 m1.controller("Aaa",function($scope){ $scope.name="yan"; }); m1.controller("Bbb",function($scope){ $scope.name="wen"; }); var m2=angular.module('myApp2',[]); var m3=angular.module('myApp3',[]); // function Aaa($scope) { // $scope.name="yan"; // } // function Bbb($scope) { // $scope.name="wen"; // } </script> <body> <div ng-controller="Aaa"> <p>{{name}}</p> </div> <div ng-controller="Bbb"> <p>{{name}}</p> </div> </body>
上面这个是本地开发的版本，要是上传到线上的话会进行压缩，那到时$scope会找不到
他提供了一种方式可以避免被压缩找不到
<script type="text/javascript"> var m1=angular.module('myApp',[]); m1.controller("Aaa",['$scope',function($scope){ $scope.name="yan"; }]); m1.controller("Bbb",['$scope',function($scope){ $scope.name="wen"; }]); var m2=angular.module('myApp2',[]); var m3=angular.module('myApp3',[]); </script>
angular提供了很多工具方法如：angular.bind,angular.copy,angular.extend
function show(){alert(this);}
angular.bind(document,show)();//改变this指向类似于jquery的$.proxy
var a={name:"hello"}
var b={age:"20"}
var c=angular.copy(a);//拷贝对象
var c=angular.copy(a,b);//a全部的覆盖b
angular.extend(b,a);//这个是继承的操作
var a=[];
angular.isArray(a);//判断是否是数组，返回true和false
angular.isDate;//判断是不是时间对象
angular.isDefined;//判断一个元素是否存在，返回undefined是真
angular.isUndefined;//判断一个元素是不是undefined 是true
angular.isFunction;//判断是不是函数
angular.isNumber;//判断是不是数字
angular.isObject;//判断是不是对象
angular.isString;//判断是不是字符串
angular.isElement;//判断是不是元素（节点）
angular.version;//判断angular当前的版本
angular.equals;//判断两个元素是否相等,数组相等，NaN也相等，传两个参数
angular.forEach;//遍历操作，接收三个参数
var values=["a","b","c"];
var result=[];//得到结果
angular.forEach(values,function(value,i){//第一个参数是值，第二个是下标
this;//这个this是结果
},result);//结果写到这里
angular.formJson;//相当于原生的JSON.parse()
var str='{"name":"yan","age":"20"}';//严格模式的JSON形式
angular.formJson(str);
angular.toJson;//相当于原生的JSON.stringify();
var str={"name":"yan","age":"20"};//严格模式的JSON形式
angular.toJson(str,true);//这里的true是格式化JSON便于阅读
angular.identity;//参数是什么就返回什么
angular.noop;//空函数
angular.lowercase;//转小写
angular.uppercase;//转大写
angular.bootstrap;//初始化和np-app一样
浙公网安备 33010602011771号