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> {{+}}<br/>
{{*}}<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>

02-Cotrollers:JS中把数据交给$scope, 然后ng-controller定义$scope的作用范围,读取数据

{{}}的绑定放在<div ng-controller="FristCtrl"></div>内部可以实现绑定,放在外部绑定就实现了。也就是Controller定义了$scope的作用范围

function FirstCtrl($scope) {
$scope.data={message:"panel"}
}
<!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>

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) { }
<!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>

  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;
}
<!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>

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("");
}
}
<!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>

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(){ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>-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>

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.
*/

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;
}

  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>

  

  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;
}
<!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>

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>"
} })
<!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>

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)的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  10. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

随机推荐

  1. Cache 工具类

    package com.thinkgem.jeesite.common.utils; import net.sf.ehcache.Cache; import net.sf.ehcache.CacheM ...

  2. jquery获取当前元素的坐标

    jquery获取当前元素的坐标 1,获取对象 var obj = $("#id号"); 或  var obj = $(this); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗 ...

  3. Linux 网络编程 高级套接字

    一.套接字选项: 有以下3中方式可以对套接字选项进行设置: getsockopt 和 setsockopt 函数 fcntl函数 ioctl函数 getsockopt和setsockopt函数用于获得 ...

  4. udt nat traverse

    https://github.com/bakwc/udt-nat-traverse Example of nat traversal using udt library. UDT is a udp b ...

  5. Uva592 Island of Logic

      题意:神人鬼三个种族,神只说真话,鬼只说假话,人白天说真话,晚上说假话.根据对话内容区分种族和白天黑夜.  最多有A, B, C, D, E五个人 算法:枚举A, B, C, D, E的种族情况和 ...

  6. mysql主从同步单个表实验记录

    问题的提出: 在CRM管理系统与运营基础数据平台之间需要有数据表进行交换,说是交换,其实是单向的,就是CRM里面的一些数据需要实时同步到运营基础数据平台中. 解决方案: A.采用时间戳的办法进行代码开 ...

  7. 怎样利用App打造自明星实现自盈利

    怎样利用App打造自明星实现自盈利 1.了解各个概念       为了大家都能看懂这篇文章,先说明几个概念.        App(Application):能够在移动设备上使用,满足人们咨询.购物. ...

  8. 【KPC】关于为什么不用Zepto而用JQuery

    1.zepto在window phone手机上不是很兼容 2.JQuery的Deferred对象在zepto上不支持. 3.JQuery经过压缩,以及部分页面的使用,以及缓存,可以达到优化用户体验的效 ...

  9. iOS开发——多线程OC篇&多线程中的单例

    多线程中的单例 #import "DemoObj.h" @implementation DemoObj static DemoObj *instance; // 在iOS中,所有对 ...

  10. How to Install and Configure Nginx from Source on centos--转

    1.CentOS - Installing Nginx from source http://articles.slicehost.com/2009/2/2/centos-installing-ngi ...