AngularJS est un cadre de développement MVC frontal haut de gamme développé par Google.
Internet officiel d'AngularJS: https://angularjs.org/ Le site officiel a une démo, et FQ peut être tenu d'y accéder
Communauté chinoise angularjs: http://www.angularjs.cn/ adapté aux débutants
Fichier de référence: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
Notes lorsque vous utilisez Angular
Citez la bibliothèque Angularjs: https: //github.com/litengdesign/angularjstest/blob/master/angular-1.0.1 .... vous pouvez le télécharger sur le github dans l'exemple de cette section.
Vous devez ajouter ng-app = "appname" dans la zone que vous utilisez, ou directement ng-app (global).
Définissez le contrôleur ng-contrôleur = "Ctrl".
Veuillez noter les points suivants lors du test de l'exemple
Vous devez introduire le code angularjs avant la tête. L'auteur utilise Angular-1.0.1.min.js. Veuillez faire attention à la différence de version.
Tous les petits exemples sont exécutés dans les domaines suivants, n'oubliez pas d'ajouter Ng-App à la zone active.
Voici quelques petits cas pour illustrer les instructions courantes et l'utilisation des défauts d'angularjs.
Hello World Program (Dual Data Binding)
Utilisez ng-model = {{nom}} pour lier les données
La copie de code est la suivante:
<étiquette pour = "name"> name: </bablow>
<input type = "text" ng-model = "name" id = "name" />
<hr>
Bonjour: {{nom || 'liteng'}}
http://2.liteg.sinaapp.com/angularjstest/helloangularjs.html
Petit cas d'utilisation de liaison des événements
La copie de code est la suivante:
<div>
Prix unitaire: <Type d'entrée = "Numéro" min = 0 ng-model = "Price" ng-Init = "Price = 299">
Quantité: <Type d'entrée = "Numéro" min = 0 ng-model = "Quantity" ng-Init = "Quantity = 1">
<br>
Prix total: {{(prix) * (quantité)}}
<dt>
<dl> Remarque: </dl>
<dd> Entrée impliquant html5: <a href = "http://www.w3school.com.cn/html5/att_input_type.asp"> http://www.w3school.com.cn/html5/att_input_type.asp </a> </dd>
<dd> ng-Init: définissez la valeur initiale </dd>
</dt>
</div>
http://2.liteg.sinaapp.com/angularjstest/event-bind.html
ng-Init: la valeur d'attribut peut être spécifiée par défaut
La copie de code est la suivante:
<p ng-Init = "value = 'Hello World'"> {{Value}} </p>
http://2.liteg.sinaapp.com/angularjstest/ng-init.html
Ng-Repeat: Utilisé pour itérer des données similaires à I pour plus d'informations dans JS
La copie de code est la suivante:
<div ng-init = "Friends = [{name: 'jhon', Âge: 25}, {name: 'Mary', âge: 28}]"> </div>
<p> j'ai {{amis.length}} amis. Ils sont </p>
<ul>
<li ng-repeat = "Friend in Friends">
[{{$ index + 1}}]: {{ami.name}} L'âge est: {{ami.age}}
</li>
</ul>
http://2.liteg.sinaapp.com/angularjstest/ng-repeat.html
NG-CLICK: DOM Click Event
La copie de code est la suivante:
<div ng-contrôleur = "ctrl">
<Button ng-dblclick = 'showmsg ()'> {{a}} </futton>
</div>
<cript>
fonction ctrl ($ scope) {
$ scope.a = 'bonjour';
$ scope.showmsg = function () {
$ scope.a = 'world';
}
}
</cript>
http://2.liteg.sinaapp.com/angularjstest/ng-click.html
ng-show: Définir l'élément Affichage
Remarque: ng-show = "! Xx": Ajouter avant la valeur d'attribut! Cela signifie qu'il est sûr d'afficher, s'il n'est pas ajouté! Non affiché s'il est incertain
La copie de code est la suivante:
<div ng-show = "! show">
ng-show = "! show"
</div>
<div ng-show = "show">
ng-show = "show"
</div>
http://2.liteg.sinaapp.com/angularjstest/ng-show.html
ng-hide: set l'élément cachette
La copie de code est la suivante:
<div ng-hide = "aaa">
ng-hide = "aaa"
</div>
<div ng-hide = "! aaa">
ng-show = "! aaa"
</div>
http://2.liteg.sinaapp.com/angularjstest/ng-hide.html
Utilisez NG-show pour créer des effets de bascule
La copie de code est la suivante:
<h2> basculer </h2>
<a href ng-click = "showlog =! showlog"> show logo </a>
<div ng-show = "showlog">
<img ng-src = "http://liteg.org/sites/default/files/logo.png">
</div>
http://2.liteg.sinaapp.com/angularjstest/ng-toggle.html
style ng: similaire au style par défaut
Veuillez noter le format d'écriture ici: les chaînes doivent être incluses dans les citations
La copie de code est la suivante:
<div ng-syle = "{width: 100 + 'px', hauteur: 200 + 'px', backgroundcolor: 'red'}">
boîte
</div>
http://2.liteg.sinaapp.com/angularjstest/ng-style.html
Filtre: champ de filtre
La copie de code est la suivante:
<div> {{9999 | numéro}} </div> <! - 9 999 ->
<div> {{9999 + 1 | Numéro: 2}} </div> <! - 10 000.00 ->
<div> {{9 * 9 | devise}} </div> <! - 81,00 $ ->
<div> {{'Hello World' | majuscule}} </v> <! - Bonjour monde ->>
http://2.liteg.sinaapp.com/angularjstest/filter.html
Ng-Template: peut charger des modèles
La copie de code est la suivante:
<div ng-include = "'tpl.html'"> </div>
tpl.html
La copie de code est la suivante:
<h1> Bonjour </h1>
http://2.liteg.sinaapp.com/angularjstest/show-tpl.html
$ http: une méthode similaire à Ajax fonctionne très bien
La copie de code est la suivante:
<div ng-controller = "testctrl">
<h2> HTTP Request-Method 1 </H2>
<ul>
<li ng-repeat = "x dans les noms">
{{x.name}} + {{x.country}}
</li>
</ul>
</div>
<h2> Méthode 2 </H2>
<div ng-controller = "testctrl2">
<ul>
<li ng-repeat = "y in info">
{{y.aid}} + {{y.title}}
</li>
</ul>
</div>
<cript>
// Méthode 1
var testctrl = fonction ($ scope, $ http) {
var p = $ http ({
Méthode: «Get»,
URL: 'JSON / DATE.JSON'
});
p.success (fonction (réponse, statut, en-têtes, config) {
$ scope.Names = réponse;
});
P.Error (fonction (statut) {
console.log (statut);
});
}
// Méthode 2
fonction testctrl2 ($ scope, $ http) {
$ http.get ('json / yiqi_article.json'). Success (fonction (réponse) {
$ scope.info = réponse;
});
}
</cript>
http://2.liteg.sinaapp.com/angularjstest/ajax.html
Tous les codes ci-dessus: https://github.com/litengdesign/angularjstest
La démo implémentée: http://2.liteg.sinaapp.com/angularjstest/index.html
Quant au routeur et à la directive d'AngularJS, je le retirerai séparément la prochaine fois.