ホームページ > ウェブフロントエンド > jsチュートリアル > angularJS_AngularJS を始めるための基本

angularJS_AngularJS を始めるための基本

WBOY
リリース: 2016-05-16 16:15:07
オリジナル
1228 人が閲覧しました

角度

使用されるすべてのライブラリ、使用されるすべての CDN:

コードをコピーします コードは次のとおりです:

.angular データ バインディングの例。これは最も基本的なもので、angular のすべての枝と葉はここから始まります。

コードをコピー コードは次のとおりです:

angular を介して展示数組のデータ;.

复制代码代码如下:

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


angular
  
   


   
   

       

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

       

           

                <スタイル>
                    .s{
                        色:#f00;
                    }
                    リ{
                        カーソル: ポインタ;
                    }
               
               

                       

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

  •                

                <スクリプト>
                    //angular.module("arr-app", []);
                    関数 arrCon($scope) {
                        $scope.flag = 0;
                        $scope.bered = function(i) {
                            $scope.flag = i;
                        };
                        $scope.lists = [
                            {名前:「へへ」、
                                年齢:10 歳}、
                            {
                                名前:「xx」、
                                年齢:20歳
                            }、
                            {
                                名前:「yy」、
年齢:2歳
                                                                                                                                                                                                                                           名前: "jj"、
年齢:220歳
} ]
};
                                                                                                                                                                                                                                                                                                           






.データフィルターのデモ:


コードをコピー

コードは次のとおりです:

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

角度
  
    <スクリプト src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
   


    <スクリプトタイプ="text/javascript">
           var app = angular.module("app",[]);
   
   

       

            データ过滤器;
       

       

            {{sourCode}}
           

            {{サワーコード |アップ}}
       

        <スクリプト>
            関数 filte($scope) {
                $scope.sourCode = "へへ、ララ、ドゥドゥ、ズ";
            };
            app.filter("up" ,function() {
                return 関数(ipt) {
                    return ipt.replace(/ (w)/g,function($0,$1) {
                        return " " $1.toUpperCase();
                    });
                }
            });
       
   



.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的指令;
       


<へー>満足ですか?
                                                                                                           app.directive("へー", function() {
return {
制限: "AE"、
置換: true、
トランスクルード : true、
テンプレート: '
'
};
})
                                                                                                                                                                                                  


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート