Angularjs(一)
Angularjs(一)
1.什么是angular?
Angular诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller ;模块化-视图-控制器）.
angular的一些特性:模块化、自动化双向数据绑定、语义化标签、依赖注入等等.
2.定义控制器:
controller(“控制器名字”,[“依赖”,function(形参){
}]}
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" >
[ng-cloak]{display:none;} //使用ng-clock时要在style中引入这个属性样式,否则有时会不起作用
</style>
</head>
<body>
<ul ng-controller="controllerTest">
<li>{{name}}</li>
// 解决双花括号闪烁的方法
<li ng-bind="name"></li>
<li ng-cloak>{{name}}</li>
<li ng-bind-template="{{name}}"></li>
</ul>
<script src="public/libs/angular/angular.min.js"></script> //引入angular,js
<script>
var App = angular.module("App",[]);
// 定义控制器
App.controller("controllerTest",['$scope',function(akshfksdjhf){ //依赖的服务，把依赖的服务注入到处理函数中去
akshfksdjhf.name = "jack"
}])
</script>
3.事件
<div ng-controller="controllerTest">
<button ng-click="fclick()" ng-dbl-click="fdbclick()">单击</button>
<button ng-dblclick="fdbclick()">双击</button>
聚焦:<input type="text" name="" ng-focus = "ffocus()">
失焦:<input type="text" name="" ng-blur = "fblur()">
<button ng-mouseover = "fmouseover()">移入</button>
<button ng-mouseleave = "fmouseleave()">移出</button>
</div>
<script src="public/libs/angular/angular.min.js"></script>
<script>
var App = angular.module("App",[]);
// 定义控制器
App.controller("controllerTest",['$scope',function($scope){
// 都是往$scope这个对象上面去添加属性和方法
$scope.fclick = function (){
alert("单击")
}
$scope.fdbclick = function (){
alert("双击")
}
$scope.ffocus = function (){
alert("聚焦")
}
$scope.fblur = function (){
alert("失焦")
}
$scope.fmouseover = function (){
alert("移入")
}
$scope.fmouseleave = function (){
alert("移出")
}
}])
</script>
4.ng-init指令
ng-init指令可以初始化模块model的数据
<div ng-controller="controllerTest" ng-init="name='jack';age=40"> <h1>{{name}}</h1> //jack <h1>{{age}}</h1> //40 </div> <script src="public/libs/angular/angular.min.js"></script> <script> var App = angular.module("App",[]); // 定义控制器 App.controller("controllerTest",['$scope',function($scope){ $scope.name = "mack"; }]) </script>
5.数据绑定
<div ng-controller="controllerTest">
<ul>
<li ng-repeat="value in arr1">{{value.name}}{{value.age}}</li> <!--遍历数组 -- >
</ul>
<ul>
<li ng-repeat="val in arr2" ng-switch on="val">
<span ng-switch-when="css">{{val}}</span> <!--当val=css时显示-->
</li>
</ul>
</div>
<script src="public/libs/angular/angular.min.js"></script>
<script>
var App = angular.module("App",[]);
// 定义控制器
App.controller("controllerTest",['$scope',function($scope){
$scope.arr1 = [
{name : "jack",age : "20"},
{name : "jack1",age : "21"},
{name : "jack2",age : "22"}
];
$scope.arr2 = ["html","css","js"]
}])
</script>
6.内置过滤器
内置过滤器 9个:
1. currency (货币处理),如果不传递参数，默认是美元符
2. date (日期格式化)
3. filter(匹配子串)
4. json(格式化json对象) 跟stringify相同 没有参数
5. limitTo(限制数组长度或字符串长度)
6. lowercase(小写) 没有参数
7. uppercase(大写) 没有参数
8. number(格式化数字) [参数]
9. orderBy(排序) [name,boolean]
1 <div ng-controller="controllerTest"> 2 <ul> 3 <li>{{num1|currency:"￥"}}</li> 4 <li>{{ndate|date:"yyyy/MM/dd hh:mm:ss EEE"}}</li> 5 <li>{{arr|filter:"1" }}</li> 6 <li>{{arrobj|filter:{age:12} }}</li> 7 <li>{{arrobj|json}}</li> 8 <li>{{str|limitTo:2}}</li> 9 <li>{{num1|number:4}}</li> 10 <li>{{str|uppercase|lowercase}}</li> 11 <li>{{arrobj|orderBy:age:false }}</li> 12 <li>{{num1 |zdy}}</li> 13 </ul> 14 </div> 15 16 17 18 <script src="public/libs/angular/angular.min.js"></script> 19 <script> 20 var App = angular.module("App",[]); 21 // 定义控制器 22 23 App.controller("controllerTest",['$scope',function($scope){ 24 $scope.num1 = 456; 25 $scope.ndate = new Date(); 26 $scope.arr = ["111","128","895","54"] 27 $scope.arrobj = [ 28 {name:"jack",age:12,phone:"456789112"}, 29 {name:"jack5",age:142,phone:"456789112"}, 30 {name:"3",age:188,phone:"456789112"}, 31 ] 32 $scope.str = "hello" 33 $scope.str2 = "wwww" 34 }]) 35 App.filter("zdy",function(){ 36 return function(num1){ 37 console.log(num1) 38 return "hello" + num1; 39 } 40 }) 41 </script>
7.依赖注入
声明式依赖注入:
App.controller("controllerTest01",['$scope',function($scope){
//写在这个数组里面的称为服务，依赖了一系列的服务，当你需要用到的时候就依赖，然后注入到处理函数中去
}])
推断式依赖注入:(不推荐,影响效率)
App.controller("controllerTest01",function($scope,$http,$log){
//依赖的完整名称，系统会根据实参数进行查找
})
8.内置服务:
–定时器:$timeout,$interval
<div ng-controller="controllerTest">
<ul>
<li>{{taday}}</li>
<li>{{now|date:"yyyy/MM/dd hh:mm:ss EEE"}}</li>
</ul>
</div>
<script src="public/libs/angular/angular.min.js"></script>
<script>
var App = angular.module("App",[]);
// 定义控制器
App.controller("controllerTest",function($scope,$timeout,$interval){
$scope.taday = "你好"
$timeout (function(){
$scope.taday = "现在是什么时间?"
$interval (function(){
$scope.now = new Date()
},100)
},1000)
})
</script>
–$location
<div ng-controller="controllerTest01">
<ul>
<li>绝对路径：{{absurl}}</li>
<li>服务：{{host}}</li>
<li>查询字符串(参数)：{{search}}</li>
<li>端口号：{{port}}</li>
<li>协议:{{protocol}}</li>
<li>哈希（锚点）：{{hash}}</li>
</ul>
</div>
<script src="public/libs/angular/angular.min.js"></script>
<script>
var App = angular.module("App",[]);
App.controller("controllerTest01",['$scope','$location',function($scope,$location){
console.log($location)
$scope.absurl = $location.absUrl();
$scope.host = $location.host();
$scope.port = $location.port();
$scope.search = $location.search(); //对http有要求
$scope.protocol = $location.protocol();
$scope.hash = $location.hash();
}])
</script>
–$log:(对console的封装)
<script src="public/libs/angular/angular.min.js"></script>
<script>
var App = angular.module("App",[]);
App.controller("controllerTest01",['$scope','$location','$timeout','$interval',"$log",function($scope,$location,$timeout,$interval,$log){
$log.log("普通输出");
$log.warn("警告");
$log.error('错误')
$log.info("普通")
}])
</script>
–$filter:
<div ng-controller="controller01">
<ul>
<li>{{price}}</li>
<li>{{str}}</li>
<li>{{str1}}</li>
</ul>
</div>
<script src="public/libs/angular/angular.min.js"></script>
<script>
var App = angular.module("App",[]);
App.controller("controller01",['$scope','$filter',function($scope,$filter){
// $filter可以引入九种内置的过滤器，这个是过滤器的第二种用法
$scope.price = 99.99;
var currency = $filter('currency');
$scope.price = currency($scope.price);
$scope.str = "hello angular";
var uppercase = $filter('uppercase');
$scope.str = uppercase($scope.str);
$scope.str1 = $filter('limitTo')($scope.str,5)
}])
</script>
-$http:
<div ng-controller="controller01">
<ul>
</ul>
</div>
<script src="public/libs/angular/angular.min.js"></script>
<script>
var App = angular.module("App",[]);
App.controller("controller01",['$scope','$filter','$http',function($scope,$filter,$http){
// $http 本质是对ajax的封装，放到服务底下运行
// 1.5以上使用then方法，类似于promise中的then
// 1.5以下就直接使用success方法和error方法
$http({
method: 'GET',
url: './02.json',
params : { //get请求的参数
uname : 'aaaa',
age : 30
}
}).then(function(data){
console.log(data); //封装过的，该对象底下的data属性放的是数据
console.log(data.data);
},function(err){
console.log(err)
});
$http({
method : "POST",
url : "/sendData",
headers : { //post请求最好设置请求头
"content-type" : "application/x-www-form-urlencoded"
},
data : { //post请求的参数
uname : "aaa",
age : 30
}
}).then(function(data){
console.log(data)
console.log(data.data.data); //想要的后台的数据
},function(err){
console.log(err);
})
}])
</script>
版权声明：本文为1234wu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。