Maison > Article > interface Web > Bases pour démarrer avec angulaireJS_AngularJS

Bases pour démarrer avec angulaireJS_AngularJS

WBOYoriginal: 2016-05-16 16:15:071169parcourir

angulaire 　　

Toutes les bibliothèques utilisées, tous les CDN utilisés :

Copier le code Le code est le suivant :

Exemple de liaison de données .angular, c'est le plus basique, toutes les branches et feuilles d'angular commencent à partir d'ici :.

Copier le code Le code est le suivant :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

angulaire
　　

angulaire最强大的东西,数据的绑定reliure

                {{données}}
                <script><br>                     app.controller("bf", function($scope) {<br>                         $scope.data = "testData";<br>                         //$scope.$apply();<br>                     });<br>                 </script>

通过angulaire,展示数组对应的数据;.

复制代码代码如下 :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

angular
　　

通过angular,展示数组对应的数据;

{{i.name}}----{{i.age}}

数据过滤器;

.factory, $provider, service了;：

复制代码代码如下 :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

angular
　　

angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;

            {{json}}
            <script><br>                 app.factory("ff", function() {<br>                     return {<br>                         "noting" : "json"<br>                     };<br>                 });<br>                 app.controller("factory", function($scope, ff) {<br>                     $scope.json = ff;<br>                 });<br>             </script>

angular的指令;

                 êtes-vous satisfait ?
                                                                                                                             app.directive("heh", function() {
                       retourner {
                          restreindre : "AE",
Remplacer : vrai,
transclure : vrai,
modèle : '

'
                    };
                 })

En utilisant la directive .ng-switch (c'est très similaire au modèle, c'est notre méthode angulaire courante de clic pour masquer et afficher le plug-in Tab) : :

Copier le code Le code est le suivant :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

angulaire
　　

ng-switch的使用

autre

                  test
                  test
                  test

ng-src和ng-href;

复制代码代码如下 :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

angulaire
　　

ng-src和ng-href的使用(如果使用src或者href的话,HTML初始化的时候就会加载,肯定是不行的)

如何操作页面的样式,这个直接改绑定的数据模型就好了：

复制代码代码如下 :

angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)

                hehe--o(^▽^)o哇;

使用模板

updateangular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新;

the value set by $scope.$watch ==>> {{wat}}

angular中的工具方法列表

angular.reloadWithDebugInfo

angular.uppercase

Ces outils et méthodes sont similaires à d'autres bibliothèques ;
                 angulaire.element est un petit JQ permettant à anguarLite de sélectionner des éléments ;
                                                                                                 Angular.module est une méthode d'élément de module ;

Utilisation de ng-transclude (c'est le cas officiel), le code est le suivant :

Copier le code

Le code est le suivant :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

angular
　　

ng-transclude的使用(这个是官方的案例):

NGPaste et ngmouseup et ngkeyup, ngmodeloptions ....... Pour référence à l'utilisation officielle, vérifiez simplement l'API, (le fonctionnaire veut FQ ;)