AngularJS

時間 2019-11-08

原文原文鏈接

一、ng-app=" " 定義angularJS的使用範圍；php

二、ng-init="變量=值;變量='值'" 初始化變量的值，有多個變量時，中間用分號隔開；css

三、ng-model="變量" 定義變量名；html

四、ng-bind="變量" 綁定變量名，獲取該變量的數據。這裏的變量就是第3條的變量名。可是通常都用雙重花括號來獲取變量的值，好比：{{變量}}。angularjs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

ng-init 指令初始化 AngularJS 應用程序變量。服務器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="firstName='John'">

<p>姓名爲 <span ng-bind="firstName"></span></p>

</div>

</body>
</html>

AngularJS 應用

AngularJS 模塊（Module） 定義了 AngularJS 應用。app

AngularJS 控制器（Controller） 用於控制 AngularJS 應用。spa

ng-app指令指明瞭應用, ng-controller 指明瞭控制器。code

<div ng-app="myApp" ng-controller="myCtrl">
 
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

ng-repeat 指令會重複一個 HTML 元素cdn

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
 
<p>循環對象：</p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
 
</div>

Scope(做用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。htm

Scope 是一個對象，有可用的方法和屬性。

Scope 可應用在視圖和控制器上。

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}} 家族成員:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

$http 是 AngularJS 應用中最經常使用的服務。服務向服務器發送請求，應用響應服務器傳送過來的數據。

<div ng-app="myApp" ng-controller="siteCtrl"> 
 
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
  .then(function (response) {$scope.names = response.data.sites;});
});
</script>

使用 angular 顯示錶格是很是簡單的：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>
 
<div ng-app="myApp" ng-controller="customersCtrl"> 
 
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("/try/angularjs/data/Customers_JSON.php")
    .then(function (result) {
        $scope.names = result.data.records;
    });
});
</script>

ng-show 指令可用於設置應用中的一部分是否可見。

ng-show="false" 能夠設置 HTML 元素 不可見。

ng-show="true" 能夠以設置 HTML 元素可見。

如下實例使用了 ng-show 指令:

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隱藏/顯示</button>

<p ng-show="myVar">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。