ホームページ > 記事 > ウェブフロントエンド > angularJS_AngularJS を始めるための基本

angularJS_AngularJS を始めるための基本

WBOYオリジナル: 2016-05-16 16:15:071169ブラウズ

角度

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

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

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

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

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

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",[]);

angular 最强西、データの固定バインディング

                {{データ}}
                <スクリプト>
                    app.controller("bf", function($scope) {
                        $scope.data = "テストデータ";
                        //$scope.$apply();
                    });

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歳
} ]
};

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

コードをコピー

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

データ过滤器;

        <スクリプト>
            関数 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、
テンプレート: '

'
};
})

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：マップ出力をシミュレートし、javascript_javascript スキルで重複を削除するメソッド次の記事：マップ出力をシミュレートし、javascript_javascript スキルで重複を削除するメソッド

続きを見る

angularJS_AngularJS を始めるための基本

関連記事