AngularJS:MVx框架,把数据、表现、逻辑分离开
方便程序员——避免重复劳动(获取、事件)
版本:1.2.x 和 1.3.x
ng-bind 输出(不常用)
ng-app 范围
模板:{{}},输出
1、ng-app=" " 定义angularJS的使用范围;
2、ng-init="变量=值;变量='值'" 初始化变量的值,有多个变量时,中间用分号隔开;
3、ng-model="变量" 定义变量名;
4、ng-bind="变量" 绑定变量名,获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值,比如:{{变量}}。
ng-model 指令 绑定 HTML 元素 到应用程序数据。双向绑定
ng-model 指令也可以:
为应用程序数据提供类型验证(number、email、required)。
为应用程序数据提供状态(invalid、dirty、touched、error)。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
1.Angular和JavaScript不互通
2.盯住数据
<!doctype html> <!-- ng-app使用范围HTML --> <!-- 包含AngularJs不能直接运行,需要引导,最简单的方法是AnjularJs自定义的ng-app HTML属性 --> <html lang="en" ng-app=""> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 引用AngularJs库,一个封装好的JavaScript文件,不依赖其他库; --> <script src="angular.min.js"></script> </head> <body> <!-- ng-init:数据初始化 --> <div ng-init="a=0;b=0;json={a:12,b:4}"> <!-- ng-modle数据源 --> <input type="text" ng-model="json.a"> <input type="text" ng-model="json.b"> <!-- {{数据输出}} --> result:`json`.`a-json`.`b` </div> </body> </html>
2、class方法:ng-class
<!doctype html> <!-- ng-app使用范围HTML --> <html lang="en" ng-app=""> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <style type="text/css" media="screen"> .box {width: 200px;height: 300px;background: #CCC;} .box2 {width: 200px;height: 200px;background: red;} </style> </head> <body> <!-- ng-class:数组作为输入 --> <div ng-init="arr=['box','box2','active']" > <!-- class第一种方法 --> <input type="text" ng-model="cls"> <div class="`cls`"> class第一种方法 </div> <!-- class第二种方法 --> <div ng-class="arr" >class第二种方法</div> </div> </body> </html>
3、style方法:ng-style
<!doctype html> <!-- ng-app使用范围HTML --> <html lang="en" ng-app=""> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <style type="text/css" media="screen"> .box {width: 200px;height: 300px;background: #CCC;} .box2 {width: 200px;height: 200px;background: red;} </style> </head> <body> <div ng-init="json={width:'200px',height: '300px',background: '#CCC'};" > <!-- style第一种方法 --> <input type="text" ng-model="cls"> <div style="`cls`"> style第一种方法 </div> <!-- style第二种方法 --> <div ng-style="json"> style第二种方法 </div> </div> </body> </html>
4、ng-if
<!doctype html> <!-- ng-app使用范围HTML --> <html lang="en" ng-app=""> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <style type="text/css" media="screen"> </style> </head> <body> <div ng-init="show=true" > <div ng-if="show"> ng-if:false 不显示 <br> ng-if: true 显示 <br> </div> </body> </html>
5、三目运算符
<!doctype html> <!-- ng-app使用范围HTML --> <html lang="en" ng-app=""> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <style type="text/css" media="screen"> </style> </head> <body> <div ng-init="arr=[12,5,43,22,1]" > <div ng-repeat="(key, value) in arr" style="{{key%2==1?'background: yellow':'';}}"> ng-repeat:第一种写法 `key`:`value` </div> <br> <div ng-repeat="v in arr" style="{{v%2==1?'background:#CCC':''}}";> ng-repeat:第二种写法 `v` </div> </body> </html>
6、选项卡-angularjs
<!doctype html> <!-- ng-app使用范围HTML --> <html lang="en" ng-app="test"> <head> <meta <meta charset=" " set="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> #div1 input {background: #CCC;} #div1 input.active {background: yellow;} #div1 div {width: 200px;height: 200px;border: 1px solid #000;} </style> <script src="angular.min.js"></script> <script type="text/javascript"> var app=angular.module('test', []) app.controller('cont1', function($scope){ $scope.now=0 $scope.arr=[ {name:'TV',content:'PANDA'}, {name:'music',content:'JAY'}, {name:'sport',content:'CHINA'} ] $scope.fn=function(n){ $scope.now=n } }) </script> <style type="text/css" media="screen"> </style> </head> <body> <div id="div1" ng-controller="cont1"> <!-- ng-click与ng-repeat不能直接引用,需要通过函数使用 --> <input ng-repeat="(key, value) in arr" type="button" value="`value`.`name`" class="{{now==$index?'active':''}}" ng-click="fn($index)"> <div ng-repeat="(key, value) in arr" ng-show="now==$index"> `value`.`content` </div> </div> </body> </html>
7、$interval
<!doctype html> <!-- ng-app使用范围HTML --> <html lang="en" ng-app="test"> <head> <meta <meta charset=" " set="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> #div1 input {background: #CCC;} #div1 input.active {background: yellow;} #div1 div {width: 200px;height: 200px;border: 1px solid #000;} </style> <script src="angular.min.js"></script> <script type="text/javascript"> var app=angular.module('test', []) app.controller('cont1', function($scope,$interval){ $scope.a=0 var timer=$interval(function(){ $scope.a++ if ($scope.a==100) { $interval.cancel(timer) } },50) }) </script> <style type="text/css" media="screen"> </style> </head> <body ng-controller="cont1"> `a` </body> </html>
8、$watch
<!doctype html> <!-- ng-app使用范围HTML --> <html lang="en" ng-app="test"> <head> <meta <meta charset=" " set="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> #div1 input {background: #CCC;} #div1 input.active {background: yellow;} #div1 div {width: 200px;height: 200px;border: 1px solid #000;} </style> <script src="angular.min.js"></script> <script type="text/javascript"> var app=angular.module('test', []) app.controller('cont1', function($scope,$http){ $scope.str='' $scope.arr=[] $scope.$watch('str',function () { $http.jsonp('https://s.taobao.com/search', {params:{ q:$scope.str, cb:'JSON_CALLBACK' }}).success(function (json) { alert(json.q) }).error(function () { alert('fail') }) }) }) </script> <style type="text/css" media="screen"> </style> </head> <body ng-controller="cont1"> <input type="text" ng-model="str"> <ul> <li ng-repeat="s in arr">`s`</li> </ul> </body> </html>
9、$scope
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script src="angular.min.js"></script>
- <script type="text/javascript">
- var app=angular.module('test', [])
-
- //controller实际上为JavaScript函数,主要作用
- //1、可以提供模型的初始值,与ng-init作用相同
- //2、添加UI的函数
- app.controller('HelloCtrl', ['$scope', function ($scope) {
- //$scope可以加入与模板相关的数据和方法
- $scope.name="AnjularJs"
- $scope.getName=function(){
- return $scope.name
- }
- }])
- </script>
- </head>
-
- <body ng-app="test">
-
- <div ng-controller="HelloCtrl">
- <!--
- ng-model实际上是普通的JavaScript对象,可以使用当前存在的所有JavaScript类和对象;
- 前提,只需要将对象指派给$scope,AngularJs就可以确认它存在
- -->
- say hello to,<input type="text" ng-model="name"><br>
- <!-- $scope可以有效的操作View -->
- <h1>hello,{{getName()}}!</h1>
- </div>
- </body>
- </html>
10、深入理解$scope作用域
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script src="angular.min.js"></script>
- <script type="text/javascript">
- var app=angular.module('test', [])
-
-
- app.controller('WorldCtrl', ['$scope', function ($scope) {
-
- $scope.population=60
- $scope.countries=[
- {name:'China',population:12},
- {name:'USA',population:1.1}
- ]
- }])
- </script>
- </head>
-
- <body ng-app="test">
-
- <ul ng-controller="WorldCtrl">
- <!--
- 不同的DOM元素指向不同的作用域,并使用各自作用域中的变量渲染模板,所以不会造成命名冲突 ;
- 在例子中,<li>元素都有独自的作用域,分别定义各自的country变量
- -->
- <li ng-repeat="c in countries">
- `c`.`name` has population of `c`.`population`
- </li>
- <hr>
- World's population : `population` billions
- </ul>
-
- </body>
- </html>
11、{{}} 等同于 ng_bind
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script src="angular.min.js"></script>
- <script>
- var app=angular.module('', [])
- $scope.name="AngularJs"
- </script>
- </head>
- <body ng-app="">
- please input your name:<input type="text" ng-model="name"><br>
- <div ng-bind="name"></div>
- `name`
- </body>
- </html>