O AngularJS é uma estrutura de desenvolvimento de MVC front-end de ponta de ponta desenvolvida pelo Google.
Site oficial do AngularJS: https://angularjs.org/ O site oficial tem demonstração, e o FQ pode ser obrigado a acessá -lo
Comunidade chinesa angularJS: http://www.angularjs.cn/ adequado para iniciantes
Arquivo de referência: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
Notas ao usar angular
CITAÇÃO A BIBLIOTECA ANGULEJS: https: //github.com/litengdesign/angularjstest/blob/master/angular-1.0.1 .... você pode baixá-lo no github no exemplo nesta seção.
Você precisa adicionar Ng-App = "AppName" à área que está usando ou diretamente NG-App (Global).
Defina o controlador ng-controller = "ctrl".
Observe os seguintes pontos ao testar o exemplo
Você precisa introduzir o código AngularJS antes da cabeça. O autor usa o Angular-1.0.1.min.js. Por favor, preste atenção à diferença da versão.
Todos os pequenos exemplos são executados nas seguintes áreas, lembre-se de adicionar NG-App à área ativa.
A seguir, são apresentados alguns casos pequenos para ilustrar as instruções comuns e o uso de inadimplência do AngularJS.
Hello World Program (ligação de dados dupla)
Use ng-model = {{name}} para vincular dados
A cópia do código é a seguinte:
<Label para = "Nome"> Nome: </elabel>
<input type = "text" ng-model = "name" id = "name"/>
<HR>
Olá: {{name || 'liteng'}}
http://2.liteng.sinaapp.com/angularjstest/helloangularjs.html
Pequeno caso de uso de encadernação de eventos
A cópia do código é a seguinte:
<div>
Preço unitário: <input type = "número" min = 0 ng-model = "Price" ng-init = "Preço = 299">
Quantidade: <input type = "número" min = 0 ng-model = "Quantity" ng-init = "Quantity = 1">
<br>
Preço total: {{(preço) * (quantidade)}}
<dt>
<dl> Nota: </dl>
<dd> Entrada envolvendo html5: <a href = "http://www.w3school.com.cn/html5/att_input_type.asp"> http://www.w3school.cn/html5/att_type
<dd> ng-init: Defina o valor inicial </dd>
</dt>
</div>
http://2.liteng.sinaapp.com/angularjstest/event-bind.html
NG-Init: o valor do atributo pode ser especificado por padrão
A cópia do código é a seguinte:
<p ng-init = "value = 'hello world'"> {{value}} </p>
http://2.liteng.sinaapp.com/angularjstest/ng-init.html
NG-REPEAT: Usado para iterar dados semelhantes a I para informações em JS
A cópia do código é a seguinte:
<div ng-init = "Friends = [{Nome: 'Jhon', idade: 25}, {nome: 'Mary', idade: 28}]"> </div>
<p> Eu tenho {{Friends.Length}} amigos. Eles são </p>
<ul>
<li ng-repeat = "Friend in Friends">
[{{$ index+1}}]: {{Friend.Name}} Idade é: {{friend.age}}
</li>
</ul>
http://2.liteng.sinaapp.com/angularjstest/ng-repeat.html
NG-Clique: DOM Clique em Evento
A cópia do código é a seguinte:
<div ng-controller = "ctrl">
<botão ng-dblClick = 'showmsg ()'> {{a}} </button>
</div>
<Cript>
função ctrl ($ scope) {
$ scope.a = 'hello';
$ scope.showmsg = function () {
$ scope.a = 'mundo';
}
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ng-click.html
NG-SHOW: Set Element Display
NOTA: NG-SHOW = "! XX": Adicione antes do valor do atributo! Isso significa que certamente será exibido, se não for adicionado! Não exibido se for incerto
A cópia do código é a seguinte:
<div ng-show = "! Mostrar">
ng-show = "! Mostrar"
</div>
<div ng-show = "show">
ng-show = "show"
</div>
http://2.liteng.sinaapp.com/angularjstest/ngshow.html
Ng-Hide: Definir elemento escondido
A cópia do código é a seguinte:
<div ng-hide = "aaa">
ng-hide = "aaa"
</div>
<div ng-hide = "! aaa">
ng-show = "! AAA"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-hide.html
Use Ng-Show para criar efeitos de alternância
A cópia do código é a seguinte:
<H2> alternar </h2>
<a href ng-click = "showLog =! showlog"> show logotipo </a>
<div ng-show = "ShowLog">
<img ng-src = "http://liteng.org/sites/default/files/logo.png">
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-toggle.html
NG no estilo: semelhante ao estilo padrão
Observe o formato de escrita aqui: Strings precisam ser incluídas nas cotações
A cópia do código é a seguinte:
<div ng-style = "{largura: 100+'px', altura: 200+'px', backgroundcolor: 'Red'}">
caixa
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-style.html
Filtro: Campo de filtro
A cópia do código é a seguinte:
<div> {{9999 | número}} </div> <!-9.999->
<div> {{9999+1 | Número: 2}} </div> <!-10.000,00->
<div> {{9*9 | moeda}} </div> <!-$ 81,00->
<div> {{'Hello World' | Uppercase}} </div> <!-Olá, mundo->
http://2.liteng.sinaapp.com/angularjstest/filter.html
NG-Template: pode carregar modelos
A cópia do código é a seguinte:
<div ng-include = "'tpl.html'"> </div>
tpl.html
A cópia do código é a seguinte:
<H1> Olá </h1>
http://2.liteng.sinaapp.com/angularjstest/show-tpl.html
$ http: um método semelhante ao Ajax funciona muito bem
A cópia do código é a seguinte:
<div ng-controller = "testCtrl">
<H2> http request-method 1 </h2>
<ul>
<li ng-repeat = "X em nomes">
{{x.name}}+{{x.country}}
</li>
</ul>
</div>
<H2> Método 2 </h2>
<div ng-controller = "testCtrl2">
<ul>
<li ng-repeat = "y In info">
{{y.aid}}+{{y.title}}
</li>
</ul>
</div>
<Cript>
// Método 1
var testctrl = função ($ scope, $ http) {
var p = $ http ({
Método: 'Get',
URL: 'json/date.json'
});
p.success (função (resposta, status, cabeçalhos, configuração) {
$ scope.names = resposta;
});
P.Error (função (status) {
console.log (status);
});
}
// Método 2
função testctrl2 ($ scope, $ http) {
$ http.get ('json/yiqi_article.json'). Sucesso (função (resposta) {
$ scope.info = resposta;
});
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ajax.html
Todos os códigos acima: https://github.com/litengdesign/angularjsteststest
A demonstração implementada: http://2.liteng.sinaapp.com/angularjstest/index.html
Quanto ao roteador e diretiva do AngularJs, vou retirá -lo separadamente na próxima vez.