angularJS 入門基礎_AngularJS-js教程-PHP中文網

首頁

web前端

js教程

angularJS 入門基礎_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:15 PM

angularjs入門基礎

angular 　　

所有用到的庫, 全部用的CDN：

複製程式碼程式碼如下:

    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>

    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>

    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

.angular的資料綁定實例,這個是最基礎的,angular的所有枝葉全部從這裡開始:.

複製程式碼程式碼如下:

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

角度標題>
　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

頭>


           var app = angular.module("app",[]);
    >腳本

角度最強大的東西，資料的綁定綁定

                {{數據}}

                    app.controller("bf", function($scope) {
                        $scope.data = "testData";
                        //$scope.$apply();
                    });
                >腳本

身體>

透過角度，展示排列的對應資料;.

複製程式碼程式碼如下：

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

http://www.w3.org/1999/xhtml">

angular

">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

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

                    .s{

                        色彩：#f00;

                    }

                    李{

                       化標：指針；

                    }

                樣式>

>

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

                    //angular.module("arr-app", []);

                    函數 arrCon($scope) {

                        $scope.flag = 0;

                        $scope.bered = 函數(i) {

                            $scope.flag = i;

                        };

                        $scope.lists = [

                            {名稱：「呵呵」，

                               年齡年齡：10}，且

                            {

                                姓名：「xx」，且

                               年齡年齡：20

                            },

                            {

                                名稱：「yy」，                               , age: 2

                            },

                            {

                                name: "jj",

                                age: 220

                            }

                        ]

                    };

.資料過濾器的DEMO：

複製程式碼程式碼如下:

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

http://www.w3.org/1999/xhtml">

角度標題>

">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

頭>

           var app = angular.module("app",[]);

    >腳本

            數據過濾器；

            {{sourCode}}

            {{酸代碼|向上}}

            函數過濾（$範圍）{

                $scope.sourCode = "呵呵lala dudu oo zz";

            };

            app.filter("up" ,function() {

                返回函數(ipt) {

                    return ipt.replace(/ (w)/g,function($0,$1) {

                        return " " $1.toUpperCase();

                    });

                }

            });

        >腳本

身體>

.factory工廠、$provider、service等等都是一樣的，不要覺得難，其實就是看出一個資料模型或實例就好了；：

複製程式碼程式碼如下：

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

angular
　　
    ">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
    ">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
    http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

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

            do you content for?
            <script><br />                 app.directive("heh", function() {<br />                     return {<br />                         restrict : "AE",<br />                         replace : true,<br />                         transclude : true,<br />                                                         };<br />                 })<br />             </script>

.ng-switch指令的使用(這個跟模板很想的,就是我們常見的點擊隱藏和顯示Tab插件的angular首先):：

複製程式碼程式碼如下:

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

http://www.w3.org/1999/xhtml">

角度標題>

">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

頭>

           var app = angular.module("app",[]);

    >腳本

            ng-switch 的使用

1

2

其他

                  測試

                  測試      

                  測試按鈕>

            app.controller("sw", function($scope) {

            });

        >腳本

身體>

ng-src和ng-href;

複製程式碼程式碼如下：

ng-src和ng-href的使用(如果使用src或href的話,HTML初始化的時候就會載入,肯定是不行的)

            app.controller("srcCon", function($scope) {
                $scope.logo = "http://www.mainbo.com/templets/images/logo.gif";
            });
        >腳本

身體>

如何操作頁面的樣式，這個直接改綁定的資料模型就可以了：

複製程式碼程式碼如下：

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

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

            app.directive("呵呵", function() {
                函數編譯() {
                };
                返回{
                    連結：函數（$範圍，$元素）{
                        var obj = angular.element($element);
                        //obj.find不好使用;
                        var add = obj[0].getElementsByClassName("add")[0];
                        var reduce = obj[0].getElementsByClassName("reduce")[0];
                        angular.element(add).bind("click", function(){
                            $scope.h = $scope.h 10;
                            所使用（)；
                        })
                        angular.element(reduce).bind("點選", function(){
                            $scope.h = $scope.h-10;
                            所使用（)；
                        });
                        函數 apply() {
                            $scope.$apply();
                        }
                       且有回譯；
                    },
                    控制器：函數（$範圍）{
                        $scope.w = 200;
                        $scope.h = 50;
                        //$scope.$apply();
                    },
                    限制：'AE'，
                    替換：true，
                    範圍：「=ng-style”，
                    嵌入：正確，
template : '

'
                }
            })

angular中的模板如何使用,這個要配合路由器使用比較叼:

複製程式碼程式碼如下:

使用模板

如何使用$scope.$watch即時改變綁定介面的模板:

複製程式碼程式碼如下:

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

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

angular中自己定義的工具方法

複製程式碼程式碼如下:

angular中的工具方法列表

angular.bind

angular.bootstrap

angular.copy

angular.element

angular.equals

angular.extend

angular.forEach

angular.fromJson

angular.identity

angular.injector

angular.isArray

angular.isDate

angular.isDefined

angular.isElement

angular.isFunction

angular.isNumber

angular.isObject

angular.isString

angular.isUndefined

angular.lowercase

angular.module

angular.noop

angular.reloadWithDebugInfo

angular.toJson

angular.uppercase

                這些工具方式與其他函式庫相同;
                angular.element是anguarLite選擇元素的小JQ;


                angular.module是指模組元素的方法;

ng-transclude的使用(這個是官方的案例)，程式碼如下:

複製程式碼程式碼如下:

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

' +
'' +
'

'
              };
          })
          .controller('ExampleController', ['$scope', function($scope) {
            $scope.title = 'Lorem Ipsum';
            $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
          }]);

一下驗證郵箱準確性的例子:

複製程式碼程式碼如下:

ngPaste以及ngMouseup和ngKeyup,ngModelOptions....等方法參考官方的使用,要用查API就好了,(官方的要FQ哦;)

">https://yearofmoo.github.io/ngMessages/angular-messages.js">>

若未使用ng-message組件的錯誤提示如下;

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。