<div ng-app=””>                                          
<p>在输入框中尝试输入：</p>
<p>姓名：<input type=”text” ng-model=”name”></p>
<p ng-bind=”name”></p>
</div>
<script>
function personController($scope){
$scope.person={
firstName:”DOJ”,
lastName:”Lil”,
};
$scope.fullName=function(){
return $scope.person.firstName + $scope.person.lastName;
}
}
</script>

<div ng-app=”” ng-controller=”formController”>
<form novalidate>                          <!–novalidate 来验证表单用的–>
First Name:<br>
<input type=”text” ng-model=”user.firstName”><br>
Last Name:<br>
<input type=”text” ng-model=”user.lastName”>
<br><br>
<button ng-click=”reset()”>RESET</button>
</form>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div>
<script>
function formController ($scope) {          //1.3已经不再支持全局控制，需要用module，这里暂时没有改
$scope.master = {firstName:”John”, lastName:”Doe”};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
</script>

<form ng-app=”” ng-controller=”validateCtrl”
name=”myForm” novalidate>
<p>Username:<br>
<input type=”text” name=”user” ng-model=”user” required>
<span style=”color:red” ng-show=”myForm.user.$dirty && myForm.user.$invalid“>
<span ng-show=”myForm.user.$error.required”>Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type=”email” name=”email” ng-model=”email” required>
<span style=”color:red” ng-show=”myForm.email.$dirty && myForm.email.$invalid“>
<span ng-show=”myForm.email.$error.required”>Email is required.</span>
<span ng-show=”myForm.email.$error.email”>Invalid email address.</span>
</span>
</p>
<p>
<input type=”submit”
ng-disabled=”myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid”>
</p>
</form>
<script src=”http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js”></script>
<script>
function validateCtrl($scope) {
$scope.user = ‘John Doe’;
$scope.email = ‘john.doe@gmail.com’;
}
</script>

<li ng-repeat=”a in list”
ng-if=”!$last”>
<h4 >{{$index+1+a.address}}</h4>
//$index是给加一个序列号+1+是为了让第一个显示的数字为1
//$first是第一项为true。 $last是最后一项为true，通常用来做判断放在其他ng内,一般都是在li标签这种列表里用
</li>

<div ng-app=“” ng-init=“friends = [
{name:’tom’, age:16},
{name:’jerry’, age:20},
{name:’garfield’, age:22}]”>
 
输入过滤:<input type=“text” ng-model=“name” >
<ul style=“list–style–type:none“>
<li> 姓名，年龄</li>
<li ng-repeat=“x in friends | filter:name”>
{{ x.name + ‘ , ‘ + x.age }}
</li>
</ul>
</div>

<div ng-app=”” ng-controller=”customerController”>
<table>
<tr ng-repeat=”x in names | orderBy:’Country’”>
<!–这个是按国家的字母顺序开始排列从A-Z–>
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
</div>
<script>
function customerController($scope,$http){
$http.get(“Customers_JSON.php”)
.success(function(response){
$scope.names = response
});
}
</script>
<!–$http的增删改–>
<script>
angular.module(“app”,[])
.config(function($httpProvider){
})
.controller(“MyCtrl”,function($scope,$http){
$scope.id=””;
$scope.name=””;
$scope.adduser=function(){
$http.post(“Customers_JSON.php”,{id:$scope.id,name:$scope.name})
.success(function(resp) {
if (resp.success) {
alert(“添加成功”)
}
})
}
$scope.deluser=function(){
$http.post(“Customers_JSON_del.php”,{id:$scope.id})
.success(function(resp) {
if (resp.success) {
alert(“删除成功”)
}
})
}
})
</script>
<!–还有一些用法可以查看Service与Provider例子内的http文件–>

<div ng-app=”” ng-controller=”myController” >
<button ng-click=”count=count+1″>点我</button>
{{count}}
</div>
<script>
function myController($scope) {
$scope.count = 0;
}
</script>
<!————————————————->
<div ng-app=”” ng-controller=”myController” >
<button ng-click=”alert()”>点我</button>
</div>
<script>
function myController($scope) {
$scope.alert = function(){
alert(“haha”);
}
}
</script>

<div ng-app=”” ng-controller=”personController”>
<button ng-click=”toggle()”>隐藏/显示</button>
<p ng-hide=”myVar”>
名: <input type=text ng-model=”person.firstName”><br>
姓: <input type=text ng-model=”person.lastName”><br><br>
姓名: {{person.firstName + ” ” + person.lastName}}
</p>
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: “John”,
lastName: “Doe”
};
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>

<div ng-app=”” ng-controller=”personController”>
<button ng-click=”toggle()”>隐藏/显示</button>
<p ng-show=”myVar”>
名: <input type=text ng-model=”person.firstName”><br>
姓: <input type=text ng-model=”person.lastName”><br><br>
姓名: {{person.firstName + ” ” + person.lastName}}
</p>
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: “John”,
lastName: “Doe”
};
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>

<div ng-app=”app” >
<span enter leave>加载</span>                       <!–A的写法–>
<hello></hello>
</div>
<script>
var app = angular.module(“app”,[]);
app.directive(‘enter’,function(){
return {
restrict:’A’,
link:function(scope,element,attrs){
console.log(scope);           //这里可以通过console.log查询element，scope，attrs等的属性
element.bind(“mouseenter”,function(){
element.css(“font-size”,”25px”)
})
}
}
})
app.directive(‘leave’,function(){
return {
restrict:’A’,
link:function(scope,element,attrs){
element.bind(“mouseleave”,function(){
element.css(“font-size”,”12px”)
})
}
}
})
app.directive(‘hello’,function(){
return {
restrict:’E’,
template:”<div><input ng-model=’txt'</div><div>{{txt}}</div>”,
link:function(scope,element){
scope.$watch(‘txt’,function(newVal){    //变量为输入的值   watch为监听事件
if(newVal===’error’){
element.css(“color”,”red”)
}
})
}
}
})
</script>

<div ng-app=”app1″>
<hello></hello>                         <!-;当restrict为E的时候这么写-;>
<div hello></div>                       <!-;A的写法-;>
<div class=”hello”></div>               <!-;C的写法-;>
</div>

<script>
var app = angular.module(“app1″,[]);
app.directive(‘hello’,function(){
return{
restrict:’E’,    //E:element     A：属性（默认），调用的时候直接加在div后就行<div hello>        C:class的意思，调用class=”hello”
replace:true,    //默认为false，当为false的时候显示<hello>标签，为true的时候隐藏<hello>标签
template:'<div>HELLO Angular<div ng-transclude></div>’,    //这个其实可以放到一个独立的文件中，形式改成templateUrl：’hello.html’
//ng-translude是保留hello内的元素，不让这个template里边的元素替换
compile：function(){         //这个是自定义的属性，一般不用，用的话还要写一遍compile因为用的时候会覆盖掉之前默认的
}
link:function(){
alert(“我在这里”)
}
}
})
</script>–>

<!–directive(指令)与controller（控制器）之间的回话
directive(指令)—放一些鼠标的事件及dom操作
controller（控制器）—依赖注入
run为注射器，只执行一次

directive和内部的controller和link怎么用
controller：想将方法暴露出去的话用
link：绑定内部事务

<div ng-app=”app” ng-controller=”AppCtrl”>
<span enter=”loadMoreData()”>加载</span>                       <!–A的写法–>
<span enter=”DelData()”>删除</span>                       <!–A的写法–>
</div>
<script>
var app = angular.module(“app”,[]);
app.controller(‘AppCtrl’,function($scope){
$scope.loadMoreData=function(){
alert(“正在加载。。。”)
};
$scope.DelData=function(){
alert(“正在删除数据。。。”)
}
});
app.directive(‘enter’,function(){
return{               //如果只有link的时候可以直接return一个函数–return function(scope,element,attrs){}
restrict:’A’,    //E:element     A：属性(默认)，调用的时候直接加在div后就行<div hello>        C:class的意思，调用class=”hello”
link:function(scope,element,attrs){
element.bind(‘mouseenter’,function(){
//其实还省略了一个attr.howtoload（），如果定义了这个，那上边应该是howtoload=”loadMoreData()”而不是enter了，下边那句attrs。enter其实就是这句话，这里有一个坑，就是这里必须是小写
scope.$apply(attrs.enter);   //这里的演变过程是第一次是scope.loadMoreData（）
});                                 //第二次是改成了scope.$apply(loadMoreData())
}                                                   //第三次是改成了scope.$apply(attrs.enter)
}
})
</script>

<div ng-app=”app” ng-controller=”MyCtrl”>    <!–控制器 –>
<p>{{msg}}</p>
<p>{{realname}}</p>
<p>{{http}}</p>
<p>{{date.msg}}</p>
<p>{{uname}}</p>
</div>
<script>
angular.module(“app”,[])
.value(“realname”,’zhouliu’)             //value可以改变
.constant(“http”,”www.baidu.com”)        //constant 不可以改变
.factory(“Data”,function(){
return{                              //factory和service主要区别就是他要先return，还有就是this
msg:”你好啊”,
setMsg:function(){
this.msg=”我”
}
}
})
.service(“User”,function(){           //service类似于factory，这个可以理解为全局变量，所以在哪里都可以调用
this.firstName=”上官”;
this.lastName=”飞燕 “;
this.getName=function(){
return this.firstName+this.lastName;
}
})
.controller(“MyCtrl”,function($scope,realname,http,Data,User){                //依赖注入
$scope.msg=”您好”;
$scope.realname=realname;
$scope.http=http;
$scope.date=Data;
Data.setMsg();             //这个是让Data这个参数从新取值为setMsg
$scope.uname=User.getName();
})
</script>

<div class=”row”>
<div class=”col-md-3″>
<superman strength>动感超人—力量</superman>
</div>
</div>
<div class=”row”>
<div class=”col-md-3″>
<superman strength speed>动感超人2—力量+敏捷</superman>
</div>
</div>
<div class=”row”>
<div class=”col-md-3″>
<superman strength speed light>动感超人3—力量+敏捷+发光</superman>
</div>
</div>
<script>
/*
directive和内部的controller和link怎么用
controller：想将方法暴露出去的话用
link：绑定内部事务
*/
var myModule = angular.module(“MyModule”, []);
myModule.directive(“superman”, function() {
return {
scope: {},                                      //独立scope
restrict: ‘AE’,
controller: function($scope) {                  //这个controller和MVC的controller不一样
$scope.abilities = [];                      //定义一个abilities数组
this.addStrength = function() {
$scope.abilities.push(“strength”);
};
this.addSpeed = function() {
$scope.abilities.push(“speed”);
};
this.addLight = function() {
$scope.abilities.push(“light”);
};
},
link: function(scope, element, attrs) {
element.addClass(‘btn btn-primary’);
element.bind(“mouseenter”, function() {
console.log(scope.abilities);
});
}
}
});
myModule.directive(“strength”, function() {
return {
require: ‘^superman’,                                   //require是依赖关系
link: function(scope, element, attrs, supermanCtrl) {       //暴露出supermanCtrl方法
supermanCtrl.addStrength();
}
}
});
myModule.directive(“speed”, function() {
return {
require: ‘^superman’,
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addSpeed();
}
}
});
myModule.directive(“light”, function() {
return {
require: ‘^superman’,
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addLight();
}
}
});
</script>

<span ng-switch on=”person.sex”>
<span ng-switch-when=”1″>you are a boy</span>
<span ng-switch-when=”2″>you are a girl</span>
<span ng-if=”person.sex==1″>you may be a father</span>
<span ng-show=”person.sex==2″>you may be a mother</span>

<input type=”text” name=”inputText” required ng-trim=”true” ng-model=”userNum” ng-pattern=”/^[0-9]*[1-9][0-9]*$/” ng-maxlength=”6″ maxlength=”6″/>

<select ng-model=”yourSelected” ng-options=”person.id as person.name in persons”></select>

<span ng-style=”myColor”>your color</span>