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

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles