Angular.js-開發前筆記

時間  2019-11-17
標籤 angular.js angular 開發 筆記 欄目 AngularJS 简体版
原文   原文鏈接

angular.js 類庫下載地址  http://www.runoob.com/try/angularjs/1.2.5/angular.min.jsjavascript

功能:php

  • AngularJS 把應用程序數據綁定到 HTML 元素。   綁出數據css

  • AngularJS 能夠克隆和重複 HTML 元素。            複製html

  • AngularJS 能夠隱藏和顯示 HTML 元素。            js處理java

  • AngularJS 能夠在 HTML 元素"背後"添加代碼。   行內處理node

  • AngularJS 支持輸入驗證。                               表單功能jquery

ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序 的"全部者"。angularjs

ng-model 指令把輸入域的值綁定到應用程序變量 name。                綁入數據web

ng-bind 指令把應用程序變量 name 綁定到某個段落的 innerHTML。  綁出數據ajax

 

一.表達式

<!DOCTYPE html>
<head>
<title>AngularJS 表達式</title>
<meta charset="utf-8" />
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
</head>
<body ng-app="" >
<h3>AngularJS 表達式</h3>
<pre>
ngularJS 表達式寫在雙大括號內：{{ expression }}。
AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有殊途同歸之妙。
AngularJS 將在表達式書寫的位置"輸出"數據。
AngularJS 表達式 很像 JavaScript 表達式：它們能夠包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
</pre>
<h3>AngularJS 數字</h3>    
<div ng-init="quantity=1;cost=5">
<p>總價： {{ quantity * cost }}</p>
</div>
<h3>AngularJS 字符串</h3>    
<div ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
<h3>AngularJS 對象</h3>    
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓爲 {{ person.lastName }}</p>
</div>
<h3>AngularJS 數組</h3>    
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值爲 {{ points[2] }}</p>
</div>
</body>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 //init
 //alert(1);
 //end  
});
</script>
<script type="text/javascript" src="js/angular.min.js"></script>
</html>

標籤的 ng-app="" 屬性，簡單理解就是運用angularjs了  ，要想使用ng，這個是必須屬性，這個頁面調用，咱們能夠添加在html或者body上！

ng-init="firstName='John';lastName='Doe'"   ng提供的指令，簡單理解就是，我ng要作init這種處理了

ng-init的處理，就是初始化變量而且可選賦值賦值

參考理解：js的對應處理就是 var firstName='John',lastName='Doe';

{{ firstName + " " + lastName }}   ng提供的表達式，表達式要放在 {{  //code  }}  2對花括號內，

參考理解：js的對應處理就是 console.log(firstName + " " + lastName );

js對應處理僅僅爲了理解，固然是不健全的，ng的表達式支持運算等，

ng-init 初始變量，支持全部js的類型，咱們運行代碼，顯示結果以下：

AngularJS 數字

總價： 5

AngularJS 字符串

姓名： John Doe

AngularJS 對象

姓爲 Doe

AngularJS 數組

第三個值爲 19

{{ helloworld}}    這樣寫，也是一樣能夠輸出內容的，這種寫法就屬於畫蛇添足了，咱們去掉表達式一樣能夠實現！

 

二.指令

<!DOCTYPE html>
<head>
<title>AngularJS 指令</title>
<meta charset="utf-8" />
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
</head>
<body ng-app="" >
<h3>AngularJS 指令</h3>
<pre>
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。
ng-app 指令初始化一個 AngularJS 應用程序。 （當前頁面爲ng頁面）
ng-init 指令初始化應用程序數據。 （變量初始化，初始賦值）
ng-model 指令把元素值（好比輸入域的值）綁定到應用程序。  （ng 數據模型綁入數據，綁入標籤數據）
</pre>
<h3>表達式綁出變量數據</h3>
<div ng-init="firstName='John'">
  <p>在輸入框中嘗試輸入：</p>
  <p>姓名：<input type="text" ng-model="firstName"></p>
  <p>你輸入的爲： {{ firstName }}</p>
</div>
<h3>ng-bind指令綁出變量數據，綁出到標籤</h3>
<div ng-init="firstName2='John'">
  <p>在輸入框中嘗試輸入：</p>
  <p>姓名：<input type="text" ng-model="firstName2"></p>
  <p>你輸入的爲： <span ng-bind="firstName2"></span></p>
</div>
</div>
<h3>重複 HTML 元素 ng-repeat 指令對於集合中（數組中）的每一個項會 克隆一次 HTML 元素。</h3>
<div 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>
</body>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 //init
 //alert(1);
 //end  
});
</script>
<script type="text/javascript" src="js/angular.min.js"></script>
</html>

表達式中咱們已經運用 ng-init 指令了。ng的全部指令前綴都是 ng-

ng-app     ng程序開啓指令，運用ng                                      相似<script></script>

ng-init       初始化變量指令                                                   參考：var aa="123";var arr=[123,456,789];

ng-model  元素值綁入指令，<input type="text" ng-model="firstName2"> ，model至關於創造一個變量  firstName2，而且firstName2等於input的時時值                                  參考  var firstName2=$("input").val();

ng-bind     綁出數據，輸入ng-init變量值或者ng-model的綁定值(表達式也能夠)   參考 console.log(aa)

ng-repeat   重複指令 ，對集合循環遍歷指令，和for循環相似       

參考：  var arr=[123,456,789,999];   for(var i in arr){console.log(arr[i])}

總結：4大指令都作了什麼，

第一個，開啓ng，相似一對script標籤，用於運行js代碼

第二個，創造變量，用於初始值和存值，相似 var aa

第三個，創造變量，綁如標籤數據，相似var aa;aa=$("input").val()

第四個，輸出數據 相似console.log(aa);

第五個，相似for循環

注意 ng-model="a1",個人第一個input添加了這個指令，下面還有一個input也添加了這個指令，這時的model不僅僅會綁入數據，一樣會輸出數據，

運行代碼結果以下：

 

 

表達式綁出變量數據

在輸入框中嘗試輸入：

姓名：

你輸入的爲： John

ng-bind指令綁出變量數據，綁出到標籤

在輸入框中嘗試輸入：

姓名：

你輸入的爲： John

重複 HTML 元素 ng-repeat 指令對於集合中（數組中）的每一個項會 克隆一次 HTML 元素。

循環對象：

  • Jani, Norway

  • Hege, Sweden

  • Kai, Denmark

 

 

三.控制器、過濾器

<!DOCTYPE html>
<head>
<title>AngularJS 過濾器</title>
<meta charset="utf-8" />
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
</head>
<body ng-app="" >
<h3>AngularJS 過濾器</h3>
<pre>
 過濾器可使用一個管道字符（|）添加到表達式和指令中。
 AngularJS 過濾器
AngularJS 過濾器可用於轉換數據：
過濾器 描述
currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。
</pre>
<h3>向表達式添加過濾器</h3>
<div ng-controller="personController">
<p>姓名爲 {{ person.lastName | uppercase }}</p>
</div>
<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
}
</script>
<h3>currency 過濾器</h3>
<div ng-init="quantity=12;price=5">
數量：<input type="number" ng-model="quantity">
價格：<input type="number" ng-model="price">
<p>總價 = {{ (quantity * price) | currency }}</p>
</div>
<h3>向指令添加過濾器</h3>
<div ng-init="names=[{name:'aaaa',country:'4444'},{name:'bbb',country:'9999'},{name:'cccc',country:'7777'}]">
<p>循環對象：</p>
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
<h3>過濾輸入</h3>
<div ng-init="names2=[{name:'aaaa',country:'4444'},{name:'bbb',country:'9999'},{name:'cccc',country:'7777'}]">
<p>循環對象：</p>
<ul>
  <li ng-repeat="x in names2 | filter:name | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>
<div>
</body>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 //init
 //alert(1);
 //end  
});
</script>
<script type="text/javascript" src="js/angular.min.js"></script>
</html>

ng-controller 指令定義了應用程序控制器。

   一段控制器代碼：

<div ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script>

有些複雜啊，咱們一眼能夠看出ng-controller是定義一個控制器，起了一個名字，叫personController

在script標籤內給  personController定義了一個函數，相似的js處理就是   var personController=function(){};

原來ng-controller就是在定義一個函數名；如咱們從下往上看的話，也許是在調用一個函數，

有函數了，看來這個是重點，咱們簡單分析

函數有一個參數叫 $scope

函數內部，基於$scope參數添加了person屬性，而且這個屬性等於{firstName: "John",lastName: "Doe"};

如此，那麼這個 $scope 就應該是一個object了，否則不能這樣處理的

參考js：var $scope={};$scope..person = {firstName: "John",lastName: "Doe"};

能夠這樣，那就能夠無數花樣，$scope.fun1= function(){alert(1)};

ng的控制器函數裏面就應該這樣了

<div ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
$scope.fun1= {
alert(1)
};
}
</script>

咱們看html部分代碼，

<div ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>

{{person.firstName + " " + person.lastName}}的ng表達式會輸出   John Doe

咱們控制器函數，給參數掛上了一個person，發現控制器指定的html部分輸出函數裏person的賦值內容了

看來ng-controller是調用函數了，$scope作了處理，

咱們用js簡單模擬重寫這部分代碼，

html:

<div classs="personController">

    <span></span>

</div>

js:

var personController=function(name){

    var person={firstName: "John"};

    $(name).find("span").html(person.firstName);

}

 personController("personController");

我是模擬啊，人家那個是構造函數，不可能這樣的，不過實現結果是相似的

其實這些寫在ng-init也是能夠的，不過還能夠加方法，那樣寫在標籤裏就在low了，其實看到這裏，咱們就能夠想到ajax了，

ajax就是請就到數據，而後經過js代碼插入html裏面

這裏，咱們創造了控制器函數，假如咱們的person={}此次不用寫死的，而是讓他等於用ajax請求的數據呢？

如同 $scope.person=[{},{},{},] 的json數據格式（ajax返回），而且ng-repent作html部分的輸出

過濾器 描述
currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。

過濾器的種類，能夠在指令中能夠在表達式中，用 | 隔開； 具備轉換，篩選，排序功能

運行實例：

向表達式添加過濾器

姓名爲 DOE

currency 過濾器

數量：價格：

總價 = $60.00

向指令添加過濾器

循環對象：

  • aaaa, 4444

  • cccc, 7777

  • bbb, 9999

過濾輸入

循環對象：

  • AAAA, 4444

  • CCCC, 7777

  • BBB, 9999

四.http

angularjs是一個mvc的框架，對js、dom、html作了封裝，咱們真正的用途就是把ajax請求的到後臺數據，顯示在頁面上

m就是數據模型，vi就是顯示處理，c就是控制

數據那就來自後臺，顯示、控制有ng的表達式，指定，過濾器，控制器

一段ng 發送ajax請求的代碼：

<div ng-app="" ng-controller="customersController"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
function customersController($scope,$http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
    .success(function(response) {$scope.names = response;});
}
</script>

相對於控制器，咱們在控制器函數加一個 $http 參數，$scope能夠理解爲存放數據的頂級對象鉤子，

$http 就是能夠發送ajax請求的對象了

咱們作簡單本地模擬，方便看見效果，直接複製代碼就行，一樣發送使用$http.get(）；不過咱們請求相對路徑下的一個json格式的文件

咱們建立一個json格式文件，名字就叫作 ceshi.json          json格式文件是[{},{},{}]格式，咱們nodejs中的package就是json文件

把ceshi.json放在html同級的地方

對應代碼：

 [
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]

 

 數據表有了，雖然是本地的

下面是ng的代碼

<!DOCTYPE html>
<head>
<title>AngularJS http</title>
<meta charset="utf-8" />
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
</head>
<body ng-app="" >
<div ng-controller="customersController">
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
</div>

</body>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 //init
 //alert(1);
 //end  
});
</script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
function customersController($scope,$http) {
    $http.get("ceshi.json")
    .success(function(response) {$scope.names = response;});
}
</script>
</html>

 

 咱們用控制器添加的$http發送ajax請求，請求路徑就是本地的ceshi.json，success裏面就獲得了咱們json的那一推內容

success的回調函數 response就是等於那一推數據,

$scope.names = response=[{},{},{}]   ceshi.json的內容

經過ng-repeat輸出，看下面：

  • Alfreds Futterkiste, Germany

  • Berglunds snabbköp, Sweden

  • Centro comercial Moctezuma, Mexico

  • Ernst Handel, Austria

  • FISSA Fabrica Inter. Salchichas S.A., Spain

  • Galería del gastrónomo, Spain

  • Island Trading, UK

  • Königlich Essen, Germany

  • Laughing Bacchus Wine Cellars, Canada

  • Magazzini Alimentari Riuniti, Italy

  • North/South, UK

  • Paris spécialités, France

  • Rattlesnake Canyon Grocery, USA

  • Simons bistro, Denmark

  • The Big Cheese, USA

  • Vaffeljernet, Denmark

  • Wolski Zajazd, Poland

 

 五.其餘

上面的的幾乎就能夠完成咱們的處理了，ng固然不會僅僅這些基本功能，

咱們接下來就簡單看一些其餘處理

 

ng-click 指令定義了一個 AngularJS 單擊事件。

<div ng-app="">
<button ng-click="count = count + 1">點我！</button>
<p>{{ count }}</p>
</div>

點擊   點我！   會不把count加1

 

ng-hide 指令用於設置應用的一部分 不可見 。

ng-hide="true" 讓 HTML 元素 不可見。

ng-hide="false" 讓元素可見。

 

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

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

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

 

經過ng-click事件，結合控制器$scope添加的true和false屬性值，可作出對應處理

簡單實現：

<div ng-app="" ng-controller="personController">
<button ng-click="toggle()">隱藏/顯示</button>
<p ng-show="myVar">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</p>
</div>
<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
}
</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程