注明:现在用的是最新的1系列1.4版本.
一、细节方面入手:
1，ng-app根节点，一般别写在html上面，最多也就写在body就行了，因为我们难免会忘记这个写在哪里，然后复制一些案例代码却总报错.
<!DOCTYPE html>
<html>
<head>
<title>基础入门</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/angular.js" ></script>
</head>
<body ng-app="TestApp">
<section>
<div ng-controller="app">
<p>{{greeting.text}},angularjs</p>
<!--数据双向绑定-->
<input type="text" placeholder="请输入" ng-model="text"/>
<p>{{text}}</p>
</div>
</section>
<script>
(function(angular){
'use strict';
var myApp=angular.module("TestApp",[])
myApp.controller("app",['$scope',function TestApp($scope){
$scope.greeting={text:'wind'}
}]);
})(window.angular);
</script>
<!--
上面的案例跟下面的案例应该隐藏其中一个来看效果会比较好！
因为一个页面只允许一个ng-app
-->
</body>
</html>
2，ng-cloak:在页面动态数据多的时候使用,运行效率最高.
<div ng-cloak>
<h1>Hello {{name}}</h1>
<h2>{{user}}</h2>
<h3>{{well}}</h3>
</div>
3，(1)、ng-bind:在作用域里面写数据;
<p ng-bind="txt"></p><!--txt在作用域里面写数据-->
(function(angular) {
'use strict';
angular.module('touch', ['ngSanitize'])
.controller('Ctrl', ['$scope', function ($scope) {
$scope.txt = 'World';
}]);
})(window.angular);
(2)、ng-bind-html:安全性高,记得带上模块“ngSanitize”,在页面静态数据多的时候使用.
<body ng-app="touch">
<div ng-controller="Ctrl">
<div ng-bind-html="hello"></div>
<div ng-bind-html="world"></div>
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-sanitize.js"></script>
</body>
(function(angular) {
'use strict';
angular.module('touch', ['ngSanitize'])
.controller('Ctrl', ['$scope', function ($scope) {
$scope.hello='hello';
$scope.world='world'
}]);
})(window.angular);
4，ng－model:将值绑定到表单元素上,一般绑定表单.
<form >
<input type='checkbox' ng-model='value'/>
</form>
5，ng－repeat:用于数据迭代,遍历数据.
<p>有2种方式遍历数据</p>
<div>
<p ng-repeat="row in people">
<span>{{row.team}}</span>
<span ng-repeat="member in row.members">{{member.name}}</span>
</p>
</div>
(function(angular) {
'use strict';
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.people=[
{team:"Team 1",members: [{name: "Sandra"}, {name: "Bob"}]},
{team:"Team 2",members: [{name: "Joe"}, {name: "Dee"}]},
{team:"Team 3",members: [{name: "andra"}, {name: "ob"}]},
{team:"Team 4",members: [{name: "Carla"},{name: "Joe"}]}
];
});
})(window.angular);
6，ng-transclude:代码嵌入,先在template内写明插入的位置即可.
<body ng-app="transclude">
<div ng-controller="ExampleController">
<input ng-model="title"> <br/>
<textarea ng-model="text"></textarea> <br/>
<pane title="{{title}}">{{text}}</pane>
</div>
<script type="text/javascript" src="js/angular.js"></script>
(function(angular) {
'use strict';
angular.module('transclude', [])
.directive('pane', function(){
return {
restrict: 'E',
transclude: true,
scope: { title:'@' },
template: '<div style="border: 1px solid black;">' +
'<div style="background-color: gray">{{title}}</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
})
.controller('ExampleController', ['$scope', function($scope) {
$scope.title = 'Lorem Ipsum';
$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}]);
})(window.angular);
7，filter:就是对数据进行筛选,
过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。
主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。
ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。
currency(货币)、date(日期)：这2个都是放到controller里面操作就行。
filter后面的可以是属性/函数；参数都是对象。
<!DOCTYPE html>
<html>
<head>
<title>filter</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/angular.js" ></script>
</head>
<body ng-app="testApp">
<div ng-controller="ctrl">
<span>{{'tony'|greet}}</span>
<p>1，uppercase，lowercase大小转换</p>
<p>{{ "lower cap string" | uppercase }}</p><!--大写-->
<p>{{ "TANK is GOOD" | lowercase }}</p><!--小写-->
<hr />
<span>2，json格式化</span>
<p>{{ {foo: "bar", baz: 23} | json }} </p>
<hr />
<span>3,date格式化</span>
<p>{{ date | date }}</p> <!--结果：May 3, 2011-->
<p>{{ date | date:"MM/dd/yyyy @ h:mma" }}</p> <!--结果：05/03/2011 @ 6:39AM-->
<p>{{ date | date:"yyyy-MM-dd hh:mm:ss" }}</p> <!--结果：2011-05-03 06:39:08-->
<span>{{date | date:'medium'}}</span><br>
<span>{{date | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><br>
<span>{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}</span>
<hr />
<span>4，number格式化</span>
<p>{{1.234567 | number:1}}</p> <!--结果：1.2-->
<p>{{1234567 | number}} </p> <!-- 结果：1,234,567-->
<hr />
<span>5，currency货币格式化</span>
<p>{{ 250 | currency }}</p> <!--结果：$250.00-->
<p>{{ 250 | currency:"RMB ￥ " }} </p> <!--结果：RMB ￥ 250.-->
<hr />
<span>6，filter查找</span>
<!--查找含有有s的行-->
<p ng-repeat="user in users | filter:'s'">
{{user.age}},{{user.id}},{{user.name}}
</p>
<!--查找name为iphone的行-->
<p ng-repeat="user in users | filter:{'name':'iphone'}">
{{user.age}},{{user.id}},{{user.name}}
</p>
<hr />
<p>7，limitTo字符串，对像的截取</p>
<p>{{ "i love tank" | limitTo:6 }}</p> <!--结果：i love-->
<p>{{ "i love tank" | limitTo:-4 }} </p> <!--结果：tank-->
<p ng-repeat="user in users | limitTo:1">
{{user.age}},{{user.id}},{{user.name}}
</p>
<!--结果：[{"age":20,"id":10,"name":"iphone"}]-->
<hr />
<span>8,orderBy对像排序</span>
<p>根id降序排</p>
<p ng-repeat="user in users | orderBy:'id':true">
{{user.age}},{{user.id}},{{user.name}}
</p><!--根id降序排-->
<span>根据id升序排</span>
<p ng-repeat="user in users | orderBy:'id'">
{{user.age}},{{user.id}},{{user.name}}
</p>
<!--根据id升序排-->
<hr />
<!--
<p {{childrenArray | filter : 'a'}}> </p>
<p>{{ childrenArray | filter : 4 }} </p>
<p>{{ childrenArray | filter : {name : 'i'} }} </p>
<p>{{ childrenArray | filter : func }} </p>
<p>{{ childrenArray | limitTo : 2 }}</p>-->
<!--<div>{{ childrenArray | orderBy : ['age','name'] }}</div>如果age相同，按照name进行排序
<div>{{ childrenArray | orderBy : 'age' }}</div> <!--按age属性值进行排序，若是-age，则倒序
<div>{{ childrenArray | orderBy : orderFunc }}</div> <!--按照函数的返回值进行排序-->
</div>
<script>
(function(angular) {
'use strict';
var app=angular.module('testApp',[])
.filter('greet',function(){
return function(user){
return 'wind-'+user+'!';
}
});
app.controller('ctrl',function($scope){
$scope.date = new Date().valueOf();
$scope.users=[
{age: 'age:20',id: 'id:10',name: "name:iphone"},
{age: 'age:12',id: 'id:11',name: "name:sunm xing"},
{age: 'age:44',id: 'id:12',name: "name:test abc"} ]
/*$scope.childrenArrays = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
];$scope.func = function(e){return e.age>4;}*/
})
})(window.angular);
</script>
</body>
</html>
8，自定义标签
<!doctype html>
<html ng-app="MyModule">
<head>
<title>自定义标签</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/style.css" />
<body>
<div ng-controller="testapp">
<hello></hello>
</div>
<!--
hello这个是自定义标签，可以自己定义！！！
A 属性 <div hello="yes"></div>
E 标签名称 <hello></hello>
C 类名称 <div class="hello"></div>
-->
<script src="js/angular.js"></script>
<script>
(function(angular) {
'use strict';
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict:"AECM",
template://单行写法:'<span>自定义标签</span>',
/*这个写法是必须有div包住*/
'<div>' +'<p>这是一个自定义标签</p>' +'<span>同时还可以套数据,比如:name={{name}}</span>' +'</div>',
/*不要同时存在，template跟templateUrl几乎一样，一个是加载标签内容，一个是直接加载html文件,建议用templateUrl这样不用操作过多的DOM
* templateUrl:'template1.html',*/
replace: true
}
});
myModule.controller("testapp",['$scope',function MyModule($scope){
$scope.name="wind"
}]);
})(window.angular);
/*
myModule.directive('namespaceDirectiveName', function factory(injectables) {
var directiveDefinitionObject = {
restrict: string,//指令的使用方式，包括标签，属性，类，注释
priority: number,//指令执行的优先级
template: string,//指令使用的模板，用HTML字符串的形式表示
templateUrl: string,//从指定的url地址加载模板
replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上
transclude: bool,//是否将当前元素的内容转移到模板中
scope: bool or object,//指定指令的作用域
controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令进行交互的接口函数
require: string,//指定需要依赖的其他指令
link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包括添加监听器等
compile: function compile(tElement, tAttrs, transclude){
return: {
pre: function preLink(scope, iElement, iAttrs, controller){...},
post: function postLink(scope, iElement, iAttrs, controller){...}
}
}//编程的方式修改DOM模板的副本，可以返回链接函数
};
return directiveDefinitionObject;
});
*/
</script>
</body>
</html>
restrict - EACM的子集的字符串，它限制directive为指定的声明方式。如果省略的话，directive将仅仅允许通过属性声明
E - 元素名称： <my-directive></my-directive>
A - 属性名： <div my-directive=”exp”></div>
C - class名： <div class=”my-directive:exp;”></div>
M - 注释 ： <!-- directive: my-directive exp -->
9，基本写法:例子可以很明白的告诉你数据绑定,数据同步显示
<div ng-controller="appC">
<p>{{greeting.text}},angularjs</p>
<input type="text" placeholder="请输入" ng-model="text"/>
<p>{{text}}</p>
</div>
10，script标签里面的基础写法:(1)、基于匿名函数开发;(2)、用严格模式
(function(angular) {
'use strict';
angular.module('app', [])
.controller('appC', ['$scope', function($scope) {
//这样使用ng-include是必须要写个空的出来，要是有需要再填写函数！
}]);
})(window.angular);
11，路由机制:
ng-view:
<!DOCTYPE html>
<html>
<head>
<title>ng-view使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js"></script>
</head>
<body ng-app="testApp">
<div ng-view></div>
<script>
(function(angular) {
'use strict';
var myApp = angular.module('testApp', ['ngRoute']);//主要添加ngRoute模块(JS文件记得引入)
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'view/view.html',//纯属路径引入
controller: 'viewCtrl'//写了这个之后,在Html文件里面不需要再写ng-controller
})
}]);
myApp.controller('viewCtrl',['$scope',function($scope){
}]);
})(window.angular);
/*
when后面的路径必须是在html里面做了个ID来相对应的;
比如说:
<li data-target="directive">
<a href="#/directive">directive</a>
</li>
那么在JS里面就应该写成这样:
$routeProvider.when('/directive', {
templateUrl: 'view/directive.html',
controller: 'directiveCtrl'
})
*/
</script>
</body>
</html>
ngRoute:一个很不错的路由教程.
<!DOCTYPE html>
<html>
<head>
<title>路由</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<style>
#leftpanel,#rightpanel{padding-bottom:3000px;margin-bottom:-3000px}
#content{border:5px solid #00f;overflow:hidden}
#leftpanel{background-color:#add8e6;width:300px;float:left}
#right{padding-left:300px}
.date{font-size:12px;color:#999}
.content{background-color:#ffffe0}
#container{margin:10px}
</style>
</head>
<body>
<div ng-app="NewsPub" >
<script type="text/ng-template" id="list.html">
<table width="100%" border="1" style="border-collapse:collapse;">
<thead>
<td>id</td>
<td>标题</td>
<td>内容</td>
<td>发布时间</td>
</thead>
<tr ng-repeat="news in newsList">
<td>{{news.id}}</td>
<td><a href='#/detail/{{news.id}}'>{{news.title}}</a></td>
<td>{{news.content}}</td>
<td>{{news.date}}</td>
</tr>
</table>
</script>
<script type="text/ng-template" id="add.html">
<h1>添加新闻</h1>
标题：<input type="text" ng-model="title"><br>
内容：<textarea ng-model="content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>
<button ng-click="add()">提交</button>
</script>
<script type="text/ng-template" id="edit.html">
<h1>编辑新闻{{news.id}}</h1>
标题：<input type="text" ng-model="news.title"><br>
内容：<textarea ng-model="news.content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>
<button ng-click="update()">提交</button>
</script>
<script type="text/ng-template" id="detail.html">
<a href="#/list">返回列表</a>
<div id="container">
<a href="#/edit/{{news.id}}">编辑</a>
<h1>{{news.title}}</h1>
<span class="date">发布日期：{{news.date}}</span>
<div class="content">正文： {{news.content}}</div>
</div>
</script>
<h1>新闻发布系统</h1>
<div id="content">
<div id="leftpanel">
<ul>
<li><a href="#/list">新闻列表</a></li>
<li><a href="#/add">发布新闻</a></li>
</ul>
</div>
<div id="right">
<div id="rightpanel" ng-view>abcd</div>
</div>
</div>
</div>
<script>
var app = angular.module('NewsPub', ['ngRoute']);
function routeConfig($routeProvider){
$routeProvider.
when('/', {
controller: 'ListController',
templateUrl: 'list.html'
}).
when('/detail/:id', {
controller: 'DetailController',
templateUrl: 'detail.html'
}).
when('/edit/:id', {
controller: 'EditController',
templateUrl: 'edit.html'
}).
when('/list', {
controller: 'ListController',
templateUrl: 'list.html'
}).
when('/add', {
controller: 'AddController',
templateUrl: 'add.html'
}).
otherwise({
redirectTo: '/'
});
};
app.config(routeConfig);
var newsList = [{
id : 1,
title : 'title 1111',
content : 'content 1111111',
date : new Date()
},{
id : 2,
title : 'title 2222',
content : 'content 2222222',
date : new Date()
},{
id : 3,
title : 'title 3333',
content : 'content 3333333',
date : new Date()
},{
id : 4,
title : 'title 4444',
content : 'content 4444444',
date : new Date()
},{
id : 3,
title : 'title 5555',
content : 'content 5555555',
date : new Date()
},{
id : 3,
title : 'title 6666',
content : 'content 6666666',
date : new Date()
},{
id : 3,
title : 'title 7777',
content : 'content 7777777',
date : new Date()
}];
app.controller('ListController',function($scope){
$scope.newsList = newsList;
});
app.controller('DetailController',function($scope, $routeParams){
$scope.news = newsList[$routeParams.id-1];
});
app.controller('AddController',function($scope,$location){
$scope.title = '';
$scope.content = '';
$scope.add = function(){
newsList.push({
id : newsList.length+1,
title : $scope.title,
content : $scope.content,
date : new Date()
});
$location.path('list');
}
});
app.controller('EditController',function($scope, $routeParams, $location){
$scope.news = newsList[$routeParams.id-1];
$scope.update = function(){
newsList[$routeParams.id-1] = $scope.news;
$location.path('list');
}
})
</script>
</body>
</html>
ng-include:
<!DOCTYPE html>
<html>
<head>
<title>ng-include使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body ng-app="includeExample">
<div ng-controller="ExampleController">
<div ng-include="'template1.html'"></div>
<div ng-include="'template2.html'"></div>
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
(function(angular) {
'use strict';
angular.module('includeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
//这样使用ng-include是必须要写个空的出来，要是有需要再填写函数！
}]);
})(window.angular);
</script>
</body>
</html>
templateUrl:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/angular.js" ></script>
<body ng-app="MyApp">
<tab></tab>
</body>
<script src="js/angular.js"></script>
<script>
(function(angular) {
'use strict';
var MyApp = angular.module("MyApp", [])
.directive("tab", function() {
return {
restrict: 'AECM',
templateUrl:'template1.html',
/*不要同时存在，template跟templateUrl几乎一样，一个是加载标签内容，一个是直接加载html文件
* template: '<span>hello world</span>',*/
replace: true
}
});
})(window.angular);
</script>
</html>
12，$http数据交互:
(1)、添加一个文件夹view，这个文件夹是跟当前的html同级;
(2)、必须基于服务器运行,不然看不到结果.(IDE编辑器是可以的)
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/angular.js" ></script>
</head>
<body ng-app="TestApp">
<div ng-controller="Shop">
<h1>Shop!</h1>
<table>
<tr ng-repeat="item in items">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
<td>{{item.price | currency}}</td>
</tr>
</table>
</div>
<script>
(function(angular){
'use strict';
var myApp=angular.module("TestApp",[])
myApp.controller("Shop",['$scope',"$http",function ($scope, $http){
$http.get('view/text.json').success(function(data){$scope.items = data;});
}]);
})(window.angular);
</script>
</body>
</html>
这个是text.json
[{
"id": 0,
"title": "Paint pots",
"description": "Pots full of paint",
"price": 3.95
}, {
"id": 1,
"title": "Polka dots",
"description": "Dots with that polka groove",
"price": 12.95
}, {
"id": 2,
"title": "Pebbles",
"description": "Just little rocks, really",
"price": 6.95
}]