angular
Todas as bibliotecas usadas, CDNs usadas:
A cópia do código é a seguinte:
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
A instância de ligação de dados do.
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div>
<div>
A coisa mais poderosa sobre o angular é a ligação de ligação de dados
</div>
<div>
<div id = "bind" ng-controller = "BF">
<input type = "text" ng-model = "dados" />
{{dados}}
<Cript>
App.Controller ("BF", função ($ scope) {
$ scope.data = "testData";
// $ SCOPE. $ APPL ();
});
</script>
</div>
</div>
</div>
</body>
</html>
Através do Angular, exiba os dados correspondentes da matriz;.
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div>
<div>
Através do Angular, exiba os dados correspondentes da matriz;
</div>
<div>
<div id = "arr-bind" ng-app = "arr-app" ng-controller = "arcon">>
<estilo>
.s {
Cor:#f00;
}
li {
Cursor: Ponteiro;
}
</style>
<ul>
)
{{i.name}} ---- {{i.age}}
</li>
</ul>
<Cript>
//angular.module("arr-App ", []);
função arcon ($ scope) {
$ scope.flag = 0;
$ scope.bered = function (i) {
$ scope.flag = i;
};
$ scope.lists = [
{nome: "hehe",
Idade: 10},
{
Nome: "xx",
Idade: 20
},
{
Nome: "yy",
Idade: 2
},
{
Nome: "JJ",
Idade: 220
}
]
};
</script>
</div>
</div>
</div>
</body>
</html>
Demoção do filtro de dados:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div>
<div>
Filtro de dados;
</div>
<div ng-controller = "Filte">
{{Sourcode}}
<br>
{{Sourcode | acima}}
</div>
<Cript>
filtro de função ($ scope) {
$ scope.sourcode = "hehe lala dudu oo zz";
};
app.filter ("up", function () {
Função de retorno (ipt) {
Retorne ipt.Replace (/(/w)/g, função ($ 0, $ 1) {
return ""+$ 1.TOUPPERCASE ();
});
}
});
</script>
</div>
</body>
</html>
. Fábrica de fábrica, provedor de $, serviço etc. são iguais. Não sinta que é difícil. De fato, é apenas para ver um modelo de dados ou instância;:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div id = "fábrica">
<div>
A fábrica em Angular é equivalente a um método de instância comum, que pode ser entendido como uma função que pode ser usada por vários controladores;
</div>
<div ng-controller = "Factory">
{{json}}
<Cript>
App.Factory ("ff", function () {
retornar {
"Notando": "JSON"
};
});
App.Controller ("Factory", Function ($ SCOPE, FF) {
$ scope.json = ff;
});
</script>
</div>
</div>
<div>
<div>
Diretiva Angular;
</div>
<div>
<Heh> você contente? </eh>
<Cript>
App.Directive ("heh", function () {
retornar {
restringir: "ae",
Substitua: verdadeiro,
translude: verdadeiro,
Modelo: '<div> <butão ng-transclude> </botão> </div>'
};
})
</script>
</div>
</div>
</body>
</html>
O uso da diretiva .ng-switch (eu realmente quero este modelo, que é o angular de nossos cliques comuns para ocultar e exibir o plug-in da guia primeiro) ::
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div>
<div>
Uso de ng-switch
</div>
<Div ng-Controller = "SW">
<div ng-init = "A = 2">
<ul ng-switch em = "a">
<li ng-switch-when = "1"> 1 </li>
<li ng-switch-when = "2"> 2 </li>
<li ng-switch-Default> Outros </li>
</ul>
</div>
<div>
<Button ng-click = "A = 1"> Teste </botão>
<Button ng-click = "A = 2"> Teste </botão>
<Button ng-click = "A = 3"> Teste </botão>
</div>
</div>
<script type = "text/javascript">
App.Controller ("SW", função ($ scope) {
});
</script>
</div>
</body>
</html>
ng-src e ng-href;
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div>
<div>
Uso de NG-SRC e NG-HREF (se você usar SRC ou HREF, o HTML será carregado ao inicializá-lo, o que definitivamente não é possível)
</div>
<div ng-controller = "srccon">
<a ng-href = "{{logo}}">
<img ng-src = "{{logo}}" />
</a>
</div>
<script type = "text/javascript">
App.Controller ("SRCCON", função ($ scope) {
$ scope.logo = "http://www.mainbo.com/templets/images/logo.gif";
});
</script>
</div>
</body>
</html>
Como operar o estilo da página, basta alterar o modelo de dados ligado diretamente:
A cópia do código é a seguinte:
<div>
<div>
Angular opera em estilos; (O JQ é para selecionar manualmente elementos para operar em estilos de elementos. Angular fornece um método mais para atribuir os atributos do elemento a uma variável, você só precisa alterar essa variável)
</div>
<div>
<hehe id = "wh" ng-style = "{width: w + 'px', altura: h + 'px', fundocolor: '#364'}">
hehe-o (^^) o uau;
</hehe>
</div>
<script type = "text/javascript">
App.Directive ("hehe", function () {
função compile () {
};
retornar {
link: function ($ scope, $ element) {
var obj = angular.Element ($ element);
//obj.find não é fácil de usar;
var add = obj [0] .getElementsByClassName ("add") [0];
var reduz = obj [0] .getElementsByClassName ("reduze") [0];
angular.Element (add) .bind ("clique", function () {
$ scope.h = $ scope.h+10;
aplicar();
})
Angular.Element (Reduce) .Bind ("Clique", function () {
$ scope.h = $ scope.h-10;
aplicar();
});
função aplicar () {
$ SCOPE. $ APLIC ();
}
retornar compilar;
},
Controlador: função ($ scope) {
$ SCOPE.W = 200;
$ scope.h = 50;
// $ SCOPE. $ APPL ();
},
restringir: 'ae',
Substitua: verdadeiro,
escopo: "= estilo ng",
translude: verdadeiro,
Modelo: '<div> <div ng-transclude> </div> <butto>+</button> <butão>-</button> </div>'
}
})
</script>
</div>
Como usar o modelo no Angular? Isso precisa ser usado com o roteador:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div>
<div>
Usando modelos
</div>
<div ng-controller = "ngtpl">
<! --- Este tipo deve ser declarado com precisão->
<script type = "text/ng-template" id = "tpl">
{{ver}}
</script>
<! --- TPL é um valor fixo, não uma variável, e a variável deve ser definida no escopo --->
<Div ng-include src = "'tpl'"> </div>
<div>
<Button ng-click = "chan ()"> altere </botão>
</div>
</div>
<script type = "text/javascript">
App.Controller ("NGTPL", função ($ scope) {
função hehe (str) {
str = _.Shuffle (str);
Retorne Str.Join ("")
};
$ scope.ver = "var-ver-heehe";
$ scope.chan = function () {
$ scope.ver = hehe ($ scope.ver);
};
});
</script>
</div>
</body>
</html>
Como usar $ scope. $ Relógio para alterar o modelo da interface de ligação em tempo real:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div>
<div>
<pan> update </span> Atualizações de dados de notificação angular de três maneiras $ scope. $ Digest (), $ SCOPE. $ Aplicar () e atualizações através do $ SCOPE. $ Watch ouvindo;
</div>
<div ng-controller = "Aplicar">
{{hehe}}
<input type = "text" ng-model = "m0" />
<div>
o valor definido por $ scope. $ watch == >> {{wat}}
</div>
<br>
<botão ng-click = "up ()">
aplicar;
</button>
</div>
<script type = "text/javascript">
App.Controller ("Aplicar", função ($ scope) {
$ scope.hehe = "lll________xxx";
$ scope.m0 = 1;
ss = $ escopo;
$ scope.up = function () {
$ scope.hehe = $ scope.m0;
// Sim, mas um erro foi relatado quando o prompt foi dado. Quem sabe por quê?
// $ SCOPE. $ APPL ();
$ SCOPE. $ DIGEST ();
};
// Dê à variável $ scope.m0 para ser inválido;
$ scope. $ watch ("m0", function (va) {
$ scope.wat = VA;
})
});
</script>
</div>
</body>
</html>
O método da ferramenta que você se define no angular
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div>
<div>
Lista do método da ferramenta no angular
</div>
<div>
<ul>
<li role = "Apresentação"> <a href = "###"> angular.bind </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.bootstrap </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.copy </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.Element </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.equals </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.extend </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.foreach </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.fromjson </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.entity </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.injector </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.isarray </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.isdate </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.isdefined </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.isElement </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.isfunction </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.isnumber </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.isObject </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.isstring </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.isundefined </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.lowercase </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.module </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.noop </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.reloadwithdebuginfo </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.tojson </a> </li>
<li role = "Apresentação"> <a href = "###"> angular.uppercase </a> </li>
</ul>
<div>
Essas ferramentas e métodos são semelhantes a outras bibliotecas;
Angular.Element é um pequeno JQ para elemento de seleção de angulitos;
<br>
Angular.Module é um método de elementos do módulo;
</div>
</div>
</div>
</body>
</html>
O uso do NG-Transclude (este é um caso oficial), o código é o seguinte:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div>
<div>
Uso de Ng-Transclude (este é um caso oficial):
</div>
<div ng-controller = "ExampleController">
<div>
<input ng-model = "title"> <br>
<textário ng-model = "text"> </sexttarea> <br/>
<Pane> {{text}} </pane>
</div>
</div>
<script type = "text/javascript">
App.Directive ('Pane', function () {
retornar {
restringir: 'e',
translude: verdadeiro,
escopo: {title: '@'},
modelo: '<div style = "borda: 1px Solid Black;">' +
'<div Style = "Background-Color: Gray"> {{title}} </div>' +
'<ng-transclude> </ng-transclude>' +
'</div>'
};
})
.Controller ('ExampleController', ['$ scope', função ($ scope) {
$ scope.title = 'Lorem ipsum';
$ scope.text = 'nequ porno quisquam est qui dolorem ipsum quia dolor ...';
}]);
</script>
</div>
</body>
</html>
Aqui está um exemplo de verificar a precisão da caixa de correio:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div>
<div>
NgPaste, NgmouseUp, NgkeyUp, NgmodelOptions, etc., consulte o uso oficial, basta usar a API de verificação (o oficial precisa de FQ;)
</div>
<script src = "https://yearofmoo.github.io/ngmessages/angular-messages.js"> </script>
<Div ng-Controller = "FromVaild">
Se você não usar o componente NG-Message, o prompt de erro será o seguinte;
<nome name = "userForm">
<div>
<Label para = "EmailAddress"> Digite seu endereço de e -mail: </belt>
<input type = "email" name = "emailAddress" ng-model = "data.mail" necessária />
<!-essas coisas são muito complexas->
<div ng-if = "userForm.emailAddress. $ error.required">
Você esqueceu de inserir seu endereço de e -mail ...
</div>
<div ng-if = "! UserForm.Emailaddress. $ error.require &&
UserForm.EmailAddress. $ error.mail ">
Você não inseriu seu endereço de e -mail corretamente ...
</div>
</div>
<input type = "envie" />
</morm>
<br>
<a href = "https://yearofmoo.github.io/ngmessages/"> Demo escrito por estrangeiros </a>
</div>
<script type = "text/javascript">
App.Controller ("FromVaild", função ($ scope) {
//$Scope.myfield.$Error = {MinLength: true, requerido: false};
})
</script>
</div>
</body>
</html>
Settimeout e SetInterval são embrulhados pelo Angular e retornam uma instância do objeto atrasado:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> angular </title>
<meta http-equiv = "x-ua compatível com" content = "ie = borda, chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css" rel = "STILEET">
<script src = "http://cdn.bootcss.com/undercore.js/1.7.0/undercore-min.js" type = "text/javascript"> </sCript>
</head>
<corpo ng-app = "app">
<script type = "text/javascript">
var app = angular.module ("app", []);
</script>
<div>
<div>
$ Timeout e $ intervalo, esses dois serviços;
</div>
<div ng-controller = "st">
<div>
<a href = "#">
<H4> setInterval </h4>
<p>
$ intervalo (fn, atraso, [count], [InvokeApply]);
</p>
</a>
<a href = "#">
<H4> Tempo limite </h4>
<p>
$ timeout (fn, [atraso], [InvokeApply]);
</p>
</a>
</div>
<div>
<div role = "ProgressBar" Aria-valuenow = "60" Aria-valuemin = "0" ARIA-valuemax = "100">
0%
</div>
</div>
<botão ng-click = "prog ()">
começar
</button>
</div>
<script type = "text/javascript">
App.Controller ("ST", função ($ scope, $ element, $ intervalo) {
var $ el = $ ($ elemento [0]). Find (". Progress-Bar");
console.log (argumentos);
// Use o elemento selecionado pelo Angular.Element para encontrar algo sem encontrar;
$ scope.prog = function () {
var df = $ interval (function () {
var val = parseint ($ el.html ())+4;
if (val> = 104) $ interval.cancel (df);
$ el.html (val+"%") .width (val+"%");
}, 100);
console.log (df)
//console.log(aa = $ intervalo)
};
});
</script>
</div>
</body>
</html>