AngularJs教程（二）

爱被打了一巴掌 2022-08-18 02:48 177阅读 0赞

## 1.XMLHTTPRequest ##

$http是AngularJs的一个核心服务，用于读取远程服务器上的数据。

json文件内容如下

[
    {type:"apple", weight:"3kg"},
    {type:"orange", weight:"2kg"}
    ]

index.html文件

<div ng-app="myApp" ng-controller="fruitCtrl"> 
    
    <ul>
      <li ng-repeat="x in tips">
        {
       {x.type + ' ' + x.weight}}
      </li>
    </ul>
    
    </div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('fruitCtrl', function($scope, $http) {
        $http.get("data_json.php")
        .success(function(response) {$scope.tips = response.records;});
    });
    </script>

$http.get()从服务器上面获取静态json数据

控制器对象有一个属性$scope.tips,加载json数据时，变成一个数组，用于存数据。

## 2.跨域HTTP请求 ##

如果需要从不同的服务器上获取数据，那么就需要使用跨域HTTP请求

可以用以下代码进行跨域请求（PHP）

header("Access-Control-Allow-Origin: *");

## 3.AngularJs HTML DOM ##

AngularJs为HTML DOM的属性提供了绑定应用数据的指令

### 3.1 ng-disabled指令 ###

ng-disabled值为true or false

该指令绑定了HTML的disabled属性

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf8">
    </head>
    <body>
    
    <div ng-app="" ng-init="switch=true">
     	<input type="button" value="click on me" ng-disabled="switch">
    </div>
    
    <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
    
    </body>
    </html>

按钮显示为不可点状态

### 3.2 ng-show ###

ng-show指令隐藏或显示HTML元素

也可以用表达式来计算布尔值

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf8">
    </head>
    <body>
    
    <div ng-app="" ng-init="weight=200">
    	<p ng-show="true">you can see me!</p>
    	<p ng-show="false">you cant see me!ha ha!</p>
    	<p ng-show="weight<300">the weight less than 300,so you can see me!</p>
    </div>
    
    <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
    
    </body>
    </html>

![Center][]

### 3.3 ng-hide ###

ng-hide指令同样用来隐藏或显示html元素

## 4.AngularJs事件 ##

### 4.1 ng-click ###

ng-click指定了AngularJs点击事件

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf8">
    </head>
    <body>
    
    <div ng-app="" ng-init="count=0">
    	<input type="button" ng-click="count=count+1" value="每点击一次下方数字就会加上一">
    	<p>{
        {count}}</p>
    </div>
    
    <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
    
    </body>
    </html>

点击按钮五次的效果

![Center 1][]

### 4.2 隐藏/显示html元素 ###

下面的例子中用到了控制器的方法

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf8">
    </head>
    <body>
    
    <div ng-app="myapp" ng-controller="showCtrl">
    	<input type="button" ng-click="toggle()" value="show/hide">
    	<p ng-hide="flag">text........</p>
    </div>
    
    <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
    
    <script type="text/javascript">
    	var app = angular.module('myapp', []);
    	app.controller('showCtrl', function($scope){
    		$scope.flag = false;
    		$scope.toggle = function(){
    			$scope.flag = !$scope.flag;
    		};
    	});
    </script>
    </body>
    </html>

效果如下

![Center 2][]

点击按钮

下方文字隐藏

![Center 3][]

## 5.AngularJs模块 ##

上面的例子中也可以将js文件外部引用

//包含模块定义程序
    <script type="text/javascript" src="myapp.js"></script>
    //包含了控制器
    <script type="text/javascript" src="ctrl.js"></script>

myapp.js

var app = angular.module('myapp', []);

\[\]参数用于定义模块的依赖关系

如有依赖关系，则在\[\]中写入模块的名称

ctrl.js

app.controller('showCtrl', function($scope){
    		$scope.flag = false;
    		$scope.toggle = function(){
    			$scope.flag = !$scope.flag;
    		};
    	});

ps:AngularJs让所有的函数的作用域在该模块下，有效避免了JavaScript中全局函数被覆盖的问题

##     ##

参考：

[AngularJs教程（二）][AngularJs]

[Center]: /images/20220731/827a2f840a524cee83d6e40881149376.png
[Center 1]: /images/20220731/fd1419b90cf7414e8e0aff8acb35ac1e.png
[Center 2]: /images/20220731/26cc5e906f7f4807bc152162d36e1df0.png
[Center 3]: /images/20220731/681d45795b7d43038f32a4714b86b675.png
[AngularJs]: http://blog.csdn.net/sinat_27350883/article/details/50180749