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>

Angularjs(一)相关推荐

AngularJS和DataModel
通常,在AngularJS中使用JSON作为存储数据的模型.我们可能这样在controller中写model: app.controller('BookController',['$scope',fu ...
AngularJS 杂项知识点
1.要用ngChange要同时使用ngModel,下拉选择获取当前选中值. 2.打包代替动态加载(js文件) requirejs真正的价值在于模块化,不是动态加载,angularjs本身有模块化机制, ...
angularjs post 跨域
web api搞好了:用Ajax妥妥的:但是前端用的AngulagJS,也懒得再换为Ajax了: 但是问题来了:提示: 已拦截跨源请求:同源策略禁止读取位于 http://x.x.x.x:port/a ...
AngularJS 指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
【12】AngularJS 事件
AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <div ng-app=&qu ...
Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法，强制刷新数据渲染
在Javascript代码里,都是按照一定顺序来执行的,当轮到一个代码片段执行的时候,浏览器就只会去执行当前的片段,不会做任何其他的事情.所以有时候一些做得不是很好的网页,当点击了某个东西之后会卡住, ...
AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
angularjs 学习笔记简单基础
angularjs是谷歌公司的一个项目,弥补了hml在构建方面的不足,通过指令(directive)来扩展html标签,可以使开发者使用html来声明动态内容. angularjs主要用来开发单页应用 ...
Angularjs集成第三方js插件之Uploadify
有时候需要用一些第三方插件,比如datepicker,slider,或者tree等.以前的做法是直接通过jquery取得某个元素,然后调用某个方法即可.但在angularjs中,不能直接这么写,必须写 ...