码迷，mamicode.com
首页 > Web开发 > 详细

AngularJS 学习笔记（1）

时间：2015-08-10 00:03:44      阅读：243      评论：0      收藏：0      [点我收藏+]

标签：

 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，（需要FQ）

下载地址：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

 

AngularJS 学习笔记（1）

标签：

原文地址：http://www.cnblogs.com/chengzish/p/4593197.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！