angular js的一些操做

時間  2019-11-19
標籤 angular 一些 欄目 AngularJS 简体版
原文   原文鏈接

angular使開發應用變得簡單，下降構建複雜應用難度！可是它依賴注入！
anjular不操做dom節點而是一個做用域javascript

要操做做用域 就要先綁定，如何綁定一個做用域呢？html

首先在頁面引入java

<script src="anjular.js">文件！  

<html ng-app></html>意思就是把整個html頁面當作做用域！

綁定做用域是「ng-app」angularjs

綁定好做用域就能夠對做用域內的綁定表達式進行數據綁定web

<body>
hello{{「word」}}
</body>

word 就是一個表達式！{{}}內的！express

例子：數組

<input ng-model="name" type="text" placeholder="請輸入文字">{{name}}

會發現文本框後面會出現和文本框內容同樣的數據！這就是數據綁定！！ng-model=「綁定的名字」app

雙向數據綁定：（bi-directional）意味着若是試圖改變了某個值，數據模型會經過檢測來相互改變！建立實時模板來代替視圖，而不是將數據合併進模板以後更新DOM。任何一個獨立視圖組件中的值都是動態替換的。這個功能能夠說是AngularJS中最重要的功能之一dom

angular應用的解析MVC模式！
m--是指模型，模型是從angular js做用域對象的屬性！
v--是指模板，也就是咱們的試圖、可見部分！
c--是指控制器，應用程序邏輯和行爲！模塊化

模塊的定義：angular js怎樣定義模塊呢?angular.module()方法來申明模塊，這個方法能夠接受兩個參數，第一個是模塊的名稱，第二個是依賴列表，也就是被注入到模塊中的列表對象。寫法-----anjular.module("app的名字",[]) 若是調用這個方法只傳入了一個參數，那麼就不是聲明模塊而是引用模塊

anjular js的標準寫法！

<script type="text/javascript">
  var app=angular.module("app的名字"[]);
   app.controller("ng-controller的名字"，["$scope",function($scope){
$scope.name="輸出表達式的內容"}])
</script>

做用域：

scope是整個angularjs的核心組成部分！

$scope對象是定義應用業務邏輯、控制器方法和視圖屬性的地方。

anjularjs啓動並生成視圖時，會將跟ng-app元素同$rootscope進行綁定。$rootscope是全部$scope對象的上層。$rootScope是AngularJS最接近於全局對象的函數，因此要是在它身上綁定了不少業務邏輯並非很好的事情--回想一下js中全局做用域的缺點

$scope對象就是一個普通的JavaScript對象，咱們能夠在其上隨意修改或添加屬性。

$scope對象在AngularJS中充當數據模型，但與傳統的數據模型不同， $scope並不負責處理和操做數據，它只是視圖和HTML之間的橋樑，它是視圖和控制器之間的傳送器。

<script>
var app=angular.module("ng-app name"[]);
app.controller("選擇器controller的名字"["$scope","$rootscope"function($scope,$rootscope){
 $scope.name="zhangsan";
        $rootScope.name2="hehe";
    }])
    //控制器不一樣     $scope  局部
    app.controller("youController",['$scope','$rootScope',function($scope,$rootScope){
        $rootScope.name2="nihao";

}])
</script>

輸出的結果爲 nihao nihao

做用域的做用：

提供觀察者以監視數據模型的變化；
能夠將數據模型的變化通知給整個應用，甚至是系統外的組件；
能夠進行嵌套，隔離業務功能和數據；
給表達式提供運算時所需的執行環境。

$scope的聲明週期： 
1 建立：在建立控制器或指令時， AngularJS會用$injector建立一個新的做用域，並在這個新建的控制器或指令運行時將做用域傳遞進去。 2連接：當Angular開始運行時，全部的$scope對象都會附加或者連接到視圖中。全部建立$scope對象的函數也會將自身附加到視圖中。這些做用域將會註冊當Angular應用上下文中發生變化時須要運行的函數。 3 更新：當事件循環運行時，它一般執行在頂層$scope對象上（被稱做$rootScope），每一個子做用域都執行本身的髒值檢測。每一個監控函數都會檢查變化。若是檢測到任意變化， $scope對象就會觸發指定的回調函數。 4 銷燬：當一個$scope在視圖中再也不須要時，這個做用域將會清理和銷燬本身

控制器的含義 angularjs中的控制器是一個函數，用來向視圖的做用域中添加額外的功能。咱們用它來給做用域對象設置初始狀態，並添加自定義行爲。

模塊化建立

注意點1：使用ng-controller指令能夠將一個控制器對象附加到DOM元素上， 注意點2，當咱們建立了模塊以後咱們的ng-app不須要放到全局上面去，而是放在了須要的地方

div ng-app="myApp"><h1 ng-controller="myController">{{say}}</h1></div> 
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller("myController",["$scope",function($scope){
$scope.say="doubi"

}]）
</script>

只須要建立控制器做用域中的函數，就能夠建立在視圖中使用的自定義操做。

內置指令ng-click能夠將按鈕

、鏈接等dom元素點擊事件綁定！

例子：
<body ng-app="myapp"> <div ng-controller="firstcontroller">

點擊button按鈕添加，點擊a減小

<button ng-click="add(1)" class="button">Add  <a ng-click="subtract(1)" class="button alert">Subtract 
<body>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('FirstController',["$scope",function($scope){

        $scope.counter = 0;
        $scope.add = function(amount) { $scope.counter += amount; };
        $scope.subtract = function(amount) { $scope.counter -= amount; };

}]
</script>

AngularJS容許在$scope上設置包括對象在內的任何類型的數據，而且在視圖中還能夠展現對象的屬性。

<div ng-app="myApp">
<div ng-controller="myController">
    <p>{{people.name}}</p>
</div>
</div>
<script type="text/javascript">
   angular.module('myApp', []).controller("myController",function($scope){  //注意這是簡寫形式
       $scope.people={
           name:"zhangsan"
       };
   });
</script>

控制器嵌套（做用域包含做用域）

全部的做用域都經過原型繼承而來，也就是說它們均可以訪問父級做用域，AngularJS在當前做用域中沒法找到某個屬性時，便會在父級做用域中進行查找。

<div ng-app="myApp">
    <div ng-controller="parController">
        <div ng-controller="chiController">
            <h1  ng-click="say()">say hello</h1>
            {{people}}
        </div>
    </div>
</div>
<script type="text/javascript">
    var app=angular.module("myApp",[])
    app.controller("parController",["$scope",function($scope){
        $scope.people={gender:"male"}
    ]])     app.controller("chiController",function($scope){
        $scope.say=function(){
            $scope.people.name="zhangsan"
        }
    })
</script>

表達式

表達式在AngularJS應用中被普遍使用，所以深刻理解AngularJS如何使用並運算表達式是很是重要的。 想一想咱們以前有沒有用過表達式呢？{{}}——這就是一個基礎的表達式 它的用法是使用{{}}將一個變量綁定到了$scope對象上邊，而後在視圖中取出來使用當用$watch進行監聽時， AngularJS會對錶達式或函數進行運算。 這裏涉及到一個新的是知識點：$watch——咱們根據名字就知道他是作什麼用的:監視——在這裏它的做用是對模型中的數據進行監視，而且當數據發生改變的時候作相應的響應，AngularJS爲咱們提供了一個很是方便的$watch方法，它能夠幫助咱們在每一個scope中監視其中的變量

<div ng-app="watch">
<input ng-model="name type="text」>
<div>change count :{{count}}</div>
</div> 

<script>
angular.module("watch",[]).run（["$rootscope",function($scope){
$scope.count = 0;
                $scope.name = 'Alfred';
                $scope.$watch('name',function(){
                    $scope.count++;

}]）
</script>

過濾器

過濾器用來格式化須要展現給用戶的數據。 AngularJS有不少實用的內置過濾器，同時也提供了方便的途徑能夠本身建立過濾器。

在HTML中的模板綁定符號{{ }} 內經過| 符號來調用過濾器 {{ expression | filter }}

自帶過濾器 案例

<div ng-app="myApp">
    <div ng-controller="myController">
            {{name | uppercase}}
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
      $scope.name="zhangsan"
    });
</script>

在控制器中調用過濾器：

<div ng-app="myApp">
    <div ng-controller="myController">
            {{name}}
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myController',['$scope','$filter',function($scope,$filter){ 
        $scope.name=$filter('uppercase')("lisi")
    }]);
</script>

表達式{{名字 | 過濾名字}}

1:字符串 返回全部包含這個字符串的元素。若是咱們想返回不包含該字符串的元素，在參數前加!符號。 2:對象 AngularJS會將待過濾對象的屬性同這個對象中的同名屬性進行比較，若是屬性值是字符串就會判斷是否包含該字符串。若是咱們但願對所有屬性都進行對比，能夠將$看成鍵名。 3:函數 對每一個元素都執行這個函數，返回非假值的元素會出如今新的數組中並返回

返回包含數組中全部包含e的單詞！

<div ng-app="myApp">
    <div ng-controller="myController">
        {{ data | filter:'e' }}
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myController',function($scope){
        $scope.data=['Ari','Lerner','Likes','To','Eat','Pizza']
    });
</script>

對對象作過濾

<div ng-app="myApp">
    <div ng-controller="myController">
        {{ data | filter:{'name':'zhangsan'} }}
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myController',function($scope){
        $scope.data= [{
            'name': 'zhangsan',
            'City': 'chengdu',
            'favorite food': '火鍋'
        },{
            'name': 'lisi',
            'City': 'beijing',
            'favorite food': '烤鴨北京'
        }]
    });
</script>

limitTo過濾器 limitTo過濾器會根據傳入的參數生成一個新的數組或字符串，新的數組或字符串的長度取決於傳入的參數，經過傳入的正負值來控制從前面仍是從後面開始截取。

例如：

<div ng-app="myApp">
<div ng-controllter="mycontroller">
{{ data | limitTo:3}}
</div>
</div>  
<script>
var app=angular.module("myApp",[])
app.controller("mycontroller"，function（$scope）{
$scope.data="helloword"
})
</script>

輸出的結果爲==hel

orderBY過濾器 orderBy過濾器能夠用表達式對制定的數組進行排序。orderBy能夠接受兩個參數，第一個是必須的，第二個是可選的。

第一個參數： 數組 在排序表達式中使用數組元素做爲謂詞。對於與表達式結果並不嚴格相等的每一個元素，則使用第一個謂詞。

第二個參數：
參數用來控制排序方向是不是逆向！

例子：

<div ng-app="myapp">
<div ng-controller="mycontroller"> 
{{ data | orderBy:'name' }}
</div>
</div>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myController',function($scope){
        $scope.data= [{
            'name': 'zhangsan',
            'City': 'chengdu',
            'favorite food': '火鍋'
        },{
            'name': 'lisi',
            'City': 'beijing',
            'favorite food': '烤鴨北京'
        }]
    });

自定義過濾器 這個過濾器是將你類容中的第一個字母大寫 注意：過濾器本質上是一個會把咱們輸入的內容看成參數傳入進去的函數

<div ng-app="myapp">
<div ng-controller="mycontroller">
{{"hello word" | lowercase | myfilter}}
</div>
</div>
<script>
angular.module("myapp",[])
.filter("myfilter",function(){
return function(input){
if(input){
return input[0].toUpperCase()+input.slice(1)
}
}
})
</script>

指令

ng-disabled

使用ng-disabled能夠把disabled屬性綁定到一下表單輸入框上：

<input>(text/checked/radio/number/url/email/submit)  

<tes=xtarea>  

<select>  

<button>

ng-select用來將數據同HTML的 select 元素進行綁定。這個指令能夠和ng-model 以及ng-options指令一同使用，構建精細且表現優良的動態表單.

no-options的值能夠是一個內涵表達式注意上邊的option位置是怎麼寫得？接受一個數組或對象，並對它們進行循環，將內部的內容提供給select標籤內部的選項

angular.module("myapp",[])
.controller("mycontroller"[$scope,function($scope){
$scope.cities=[
{name:'seattle'}
{name:'San Francisco'},
 {name: 'Chicago'},
  {name: 'New York'},
 {name: 'Boston'}}
]

}])
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程