AngularJS學習筆記（一）走近AngularJS

時間 2019-11-08

原文原文鏈接

什麼是AngularJS

AngularJS是一款優秀的前端JS框架，是Google多款產品之一，簡稱ng。javascript

ng有着諸多特性，最爲核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。html

它可讓前端開發人員將獲取數據、數據模型和視圖隔離進行開發。前端

Angular包括什麼

ng包括指令、服務、篩選器和一些經常使用的類庫，其中指令是最爲讓人炫目的功能，它爲加強HTML標籤的互動性提供了極大的便利。java

ng有一些很是棒的特性，包括控制器、指令、服務、路由、篩選器。設計模式

五大核心

MVVM —— 吸取了傳統的MVC設計模式針但又並不執行傳統意義上的MVC，更接近於MVVM(Moodel-View-ViewModel)。瀏覽器

依賴注入 —— AngularJS擁有內建的依賴注入子系統，能夠幫助開發人員更容易的開發，理解和測試應用。app

雙向數據綁定 —— 實現了把model與view徹底綁定在一塊兒，model變化，view也變化，反之亦然。框架

模板 —— 在AngularJS中，模板至關於HTML文件被瀏覽器解析到DOM中，AngularJS遍歷這些DOM，也就是說AuguarJS把模板當作DOM來操做，去生成一些指令來完成對view的數據綁定。dom

指令 —— 能夠用來建立自定義的標籤，也能夠用來裝飾元素或者操做DOM屬性。模塊化

AngularJS的神奇

在ng中，雙向綁定和指令是最爲神奇的武器。

雙向綁定讓咱們不用再考慮數據的同步問題，變量是否被同步，頁面元素顯示是否正確，這些因爲雙向綁定和指令的配合，已經確實從原來的Dom優先轉向了數據優先。

而指令更是讓html標籤如虎添翼，極大的加強的html標籤的交互能力，而自定義指令則給了咱們造物主的能力，能夠開發出更具語意的標籤。

運行環境

每一個例子均要經過手工編碼，才能知道其中潛在的問題。

開發環境是：win7(64)、VS201三、ng1.3

運行環境是：win7(64)、360極速瀏覽器。

因本項目主要是學習前臺框架，我將全部代碼再jsrun.cn上已經備份一份，能夠直接訪問，查看效果。

來個例子吧

讓咱們從例子裏來看下ng的應用，在逐步完善的過程當中學習到新的東西。

<!DOCTYPE html>

<!--一個頁面僅能有一個ng-app -->
<html ng-app="App">
<head>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
    <script type="text/javascript">

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

        App.controller("ctrl", function ($scope) {
            //初始化爲空
            $scope.name = '';
        });
    </script>
</head>
    <body >
        <!--一個頁面能夠有多個ng-controller-->
        <div ng-controller ="ctrl">
            <input type="text" ng-model="name" /><br />
            hello,{{name}}
        </div>
    </body>
</html>