AngularJS 學習筆記（1）

本文轉載自查看原文 2015-08-09 22:13 1217 AngularJS/ AnjularJS

AngularJS是一款前端JS框架。AngularJS官網 http://angularjs.org

【開發環境准備】：

1，下載AngularJS：JS and CSS in Solution

2，編輯器 WebStorm，下載地址：https://www.jetbrains.com/webstorm/ (配合最新版JetBrains使用，可以即時無刷新顯示更新代碼后的效果)

3，下載最新版Chrome，並安裝擴展程序：JetBrains IDE Suport，（需要翻牆）

下載地址：https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji

安裝完畢以后Debug看一下效果：webstorm中保存代碼，chrome立即顯示更新代碼后的效果

01-Binding: ng-model存儲綁定數據，{{}}直接讀取存儲綁定的數據如下：

　　{{}}綁定不僅可以直接綁定在HTML標簽內容中，而且還可以綁定在Class屬性的值中

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1.1 HelloWorld</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <script src="script/angular.js"></script>
</head>

<body ng-app>

    {{1+6}}<br/>
    {{2*4}}<br/>
    {{'hello world'}}
    {{'橙子'+' 你好'}}<br/>
    <input type="text"  ng-model="data.message"/>
    <h1>{{data.message}}</h1>
    <div  class="{{data.message}}">
    wrap me with a foundation component
    </div>
</body>
</html>

View Code

02-Cotrollers：JS中把數據交給$scope, 然后ng-controller定義$scope的作用范圍，讀取數據

{{}}的綁定放在<div ng-controller="FristCtrl"></div>內部可以實現綁定，放在外部綁定就實現了。也就是Controller定義了$scope的作用范圍

function FirstCtrl($scope) {
    $scope.data={message:"panel"}
}

View Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1.1 HelloWorld</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <script src="script/angular.js"></script>

    <script type="text/javascript" src="script/main.js"></script>

</head>

<body ng-app>

 <div ng-controller="FirstCtrl">
    <input type="text"  ng-model="data.message"/>
    <h1>{{data.message}}</h1>
    <div  class="{{data.message}}">
    wrap me with a foundation component
    </div>
 </div>


</body>
</html>

View Code

03-The Dot ：Data.message可以綁定整個頁面中的數據，message綁定的當前Controller范圍內

data.message和message的區別在於，首先給根部input綁定后，會不會完全影響其他Controller中的綁定

/**
 * Created by LiYang on 2015/6/23.
 */

function FirstCtrl($scope) {

}

function SecondCtrl($scope) {

}

View Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1.1 HelloWorld</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <script src="script/angular.js"></script>

    <script type="text/javascript" src="script/main.js"></script>

</head>

<body ng-app="">


     <input type="text" ng-model="data.message">
     <h1>{{data.message}}</h1>

     <div ng-controller="FirstCtrl">
      <input type="text"  ng-model="data.message"/>
      <h1>{{data.message}}</h1>
     </div>

     <div ng-controller="SecondCtrl">
         <input type="text"  ng-model="data.message"/>
         <h1>{{data.message}}</h1>
     </div>


</body>
</html>

View Code

　　A, 給根部（input）的data.message賦值之后，無論是給FirstController中的data.message賦值、還是給SecondController中data.message賦值的，之后只要有任何一處綁定data.message的input值變化，整個頁面中的綁定data.message的部分都會跟着變化

　　B，我們把data.message改為message, 刷新頁面后再來看綁定效果。給根部(input)message賦值以后，再把下面FirstCtrl和SecondCtrl中數據改變就不可以再反應到其他的Controller中了，這個時候的綁定范圍就是當前Controller下的div了

04-Sharing Data Between Controllers: JS中構建數據以后傳遞給 Contoller，進而綁定到前台頁面

我們把上面03例子中根部的input去掉，FirstCtrl和SeconCtrl的綁定就相互獨立、不會影響到對方了

如果不同的Controller中公用相同的綁定數據，我們可以在js中借助factory構建源數據，需要用到源數據的地方直接調用即可，這樣controller都是讀取的同一個源數據，controller也實現了相互間的綁定。

這里在factory中返回數據給Data然后供其他Controller調用，實質上是和03例子中給根部的input先賦值綁定是一樣的。

/**
 * Created by LiYang on 2015/6/23.
 */
var  myApp=angular.module("myApp",[]);
myApp.factory('Data',function(){
    return{message:"Hello World"}
})


function FirstCtrl($scope,Data) {
    $scope.data=Data;
}

function SecondCtrl($scope,Data) {
    $scope.data=Data;
}

View Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1.1 HelloWorld</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <script src="script/angular.js"></script>

    <script type="text/javascript" src="script/main.js"></script>

</head>

<body ng-app="myApp">

     <div ng-controller="FirstCtrl">
      <input type="text"  ng-model="data.message"/>
      <h1>{{data.message}}</h1>
     </div>

     <div ng-controller="SecondCtrl">
         <input type="text"  ng-model="data.message"/>
         <h1>{{data.message}}</h1>
     </div>


</body>
</html>

View Code

05-Define a function in scope:在$Scope中定義方法可以對綁定的數據進行處理

下面方法實現把綁定的數據進行反轉 $scope.data.mesage.split("").reverse().join("")。

/**
 * Created by LiYang on 2015/6/23.
 */
var  myApp=angular.module("myApp",[]);
myApp.factory('Data',function(){
    return{message:"Hello World"}
})


function FirstCtrl($scope,Data) {
    $scope.data=Data;
}

function SecondCtrl($scope,Data) {
    $scope.data=Data;

    $scope.reversedMessage=function(message){
        return message.split("").reverse().join("");
    }
}

View Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1.1 HelloWorld</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <script src="script/angular.js"></script>

    <script type="text/javascript" src="script/main.js"></script>

</head>

<body ng-app="myApp">

     <div ng-controller="FirstCtrl">
      <input type="text"  ng-model="data.message"/>
      <h1>{{data.message}}</h1>
     </div>

     <div ng-controller="SecondCtrl">
         <input type="text"  ng-model="data.message"/>
         <h1>{{reversedMessage()}}</h1>
     </div>


</body>
</html>

View Code

06-Filter:把定義的function定義到Filter中，這樣就可以更加方便的調用

下面的反轉字符串的功能我們寫到Filter中就更加簡單方便的了，這也是Filter很經典的用例。

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

//filter的功能是 返回一個對字符串進行處理的方法
//text表示input輸入的內容
myApp.filter('reverseStrs',function(){
    return function(text){
      return text.split("").reverse().join("");
    }
})
function FirstCtrl(){

}
function SecondCtrl(){

}

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-Filter</title>
    <script type="text/javascript" src="script/angular.js"></script>
    <link rel="stylesheet" href="css/foundation.min.css"/>
    <script src="script/main.js"></script>
</head>
<body ng-app="myApp">

<div ng-controller="FirstCtrl">
    FirstCtrl:
    <input ng-model="data.message">
    <br/>
    <h1>{{data.message}}</h1>
</div>

<div ng-controller="SecondCtrl">
    SecondCtrl:
    <input ng-model="data.message">
    <br/>
    <h1>{{data.message|reverseStrs}}</h1>
</div>
</body>
</html>

View Code

07-Testing Overview:用Jasmine testing framework進行測試，保證上面的Filter正確運行

maiSpec.js

/**
 * Created by LiYang on 2015/6/28.
 */

describe('filter',function(){
    beforeEach(module('myApp'));

    describe('reverse',function(){
        it('Should Reverse a Strig',inject(function(reverseFilter){
            expect(reverseFilter('ABCD')).toEqual('DCBA');
        }))
    })

})/**
 * Created by LiYang on 2015/6/28.
 */

View Code

08-ngFilter: Filter可以直接在前台頁面中實現搜索查詢

　　A, main.js中構建一組數據[{name:"",character:""}]並傳遞給$scrope.data

/**
 * Created by LiYang on 2015/6/23.
 */
var  myApp=angular.module("myApp",[]);
myApp.factory('Data',function(){
    var list=[
        {
            Aname:"Rober Dowy Jr.",
            character:"Tony Startk / Iron Man"
        },
        {
            Aname:"Chris Evans.",
            character:"Steve Rogers / Captain America"
        },
        {
            Aname:"Mark Ruffalo",
            character:"Bruce Banner / The Hulk"
        },
        {
            Aname:"Chris Hemsworth",
            character:"Thor"
        }
    ];
    return list;
})

function AvengersCtrl($scope,Data) {
    $scope.data=Data;
}

View Code

　　B，html中用ng-repeat遍歷數據，並借助filter實現搜索

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1.1 HelloWorld</title>
    <link rel="stylesheet" href="css/foundation.min.css">

    <script src="script/angular.js"></script>

    <script type="text/javascript" src="script/main.js"></script>

</head>

<body ng-app="myApp">
Anvengers Character List:<br/><br/>

<table ng-controller="AvengersCtrl" border="1px solid">
    <input type="text" placeholder="Search"  ng-model="searchText.Aname"  />
    <tr><th>Name</th><th>Character</th></tr>
    <tr ng-repeat="item in data| filter:searchText">
        <td>{{item.Aname}}</td>
        <td>{{item.character}}</td>
    </tr>
</table>




</body>
</html>

View Code

　　C,搜索借助filter實現了，而且我們可以進一步縮小搜索條件，如：只搜索Name: ng-model="searchText.Aname" 或者只搜索Character:ng-model="searchText.character"

09-Built-in Filters:進一步實現搜索排序過濾功能：

　　orderBy:'Name' 按照Name排序；orderBy:'-Name' 按照Name倒序排列

　　limitTo:2 前兩條數據；limitTo:-2 最后兩條數據；lowercase:把綁定的數據改為小寫，uppercase把綁定的數據改為大寫

/**
 * Created by LiYang on 2015/6/23.
 */
var  myApp=angular.module("myApp",[]);
myApp.factory('Data',function(){
    var list=[
        {
            Aname:"Rober Dowy Jr.",
            character:"Tony Startk / Iron Man"
        },
        {
            Aname:"Chris Evans.",
            character:"Steve Rogers / Captain America"
        },
        {
            Aname:"Mark Ruffalo",
            character:"Bruce Banner / The Hulk"
        },
        {
            Aname:"Chris Hemsworth",
            character:"Thor"
        }
    ];
    return list;
})

function AvengersCtrl($scope,Data) {
    $scope.data=Data;
}

View Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1.1 HelloWorld</title>
    <link rel="stylesheet" href="css/foundation.min.css">

    <script src="script/angular.js"></script>

    <script type="text/javascript" src="script/main.js"></script>

</head>

<body ng-app="myApp">
Anvengers Character List:<br/><br/>

<table ng-controller="AvengersCtrl" border="1px solid">
    <input type="text" placeholder="Search"  ng-model="searchText.character"  />
    <tr><th>Name</th><th>Character</th></tr>
    <tr ng-repeat="item in data| filter:searchText| orderBy:'-Aname'| limitTo:3">
        <td>{{item.Aname|lowercase}}</td>
        <td>{{item.character|uppercase}}</td>
    </tr>
</table>

</body>
</html>

View Code

10-First Directive:自定義可以包含內容的HTML標簽，E:Element

/**
 * Created by LiYang on 2015/6/23.
 */
var  myApp=angular.module("superHero",[]);

myApp.directive("superman",function(){
    return{
        restrict:"E",
        template:"<div>Hello, I am a new tag. </div>"
    }

})

View Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1.1 HelloWorld</title>
    <link rel="stylesheet" href="css/foundation.min.css">

    <script src="script/angular.js"></script>

    <script type="text/javascript" src="script/main.js"></script>

</head>

<body ng-app="superHero">
<superman></superman>
</body>
</html>

View Code

PS：

剛接觸AngularJS ，從找了一個視頻教程學習並做記錄。

視頻下載地址：http://down.51cto.com/zt/5851 （視頻下載下來以后用迅雷看看播放，視頻從05開始可以加載字幕）

概念：

SPA(Single Page web Application):SPA把代碼的執行放到客戶端瀏覽器，從而減少和服務器的交互，加快頁面反應速度。

參考：

1,WebStorm:http://blog.csdn.net/binyao02123202/article/details/19323415

2,WebStorm live edit功能與瀏覽器實現同步實現步驟:http://ju.outofmemory.cn/entry/70084

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 AngularJs學習筆記--directive AngularJs學習筆記--expression AngularJs學習筆記--Forms 學習筆記-AngularJs（二）學習筆記-AngularJs（八）學習筆記－AngularJs （一） AngularJs學習筆記--Scope AngularJs學習筆記--bootstrap AngularJs學習筆記--Modules AngularJS學習筆記2——AngularJS的初始化

AngularJS 學習筆記（1）

01-Binding: ng-model存儲綁定數據，{{}}直接讀取存儲綁定的數據 如下：

02-Cotrollers：JS中把數據交給$scope, 然后ng-controller定義$scope的作用范圍，讀取數據

03-The Dot ：Data.message可以綁定整個頁面中的數據，message綁定的當前Controller范圍內

04-Sharing Data Between Controllers: JS中構建數據以后傳遞給 Contoller，進而綁定到前台頁面

05-Define a function in scope:在$Scope中定義方法可以對綁定的數據進行處理

06-Filter:把定義的function定義到Filter中，這樣就可以更加方便的調用

07-Testing Overview:用Jasmine testing framework進行測試，保證上面的Filter正確運行

08-ngFilter: Filter可以直接在前台頁面中實現搜索查詢

09-Built-in Filters:進一步實現搜索排序過濾功能：

10-First Directive:自定義可以包含內容的HTML標簽，E:Element

免責聲明！

01-Binding: ng-model存儲綁定數據，{{}}直接讀取存儲綁定的數據如下：