AngularJs 基礎（60分鐘入門）

時間 2019-11-12

原文原文鏈接

AngularJS 是一個建立富客戶端應用的JavaScript MVC框架。你仍然須要具備服務端後臺，但大多數的用戶交互邏輯將放到客戶端上處理。它能夠建立單頁的應用程序，一個頁面的應用僅僅須要HTML,CSS和JavaScript在客戶端。它的目標是加強頁面的模型-視圖-控制（MVC）的功能，爲簡化開發和測試。單頁Web應用（single page web application，SPA），就是隻有一張Web頁面的應用。瀏覽器一開始會加載必需的HTML、CSS和JavaScript，全部的操做都在這張頁面上完成，由JavaScript來控制不一樣view在這個頁面上的呈現。本文源於Youtube上一個不錯的AngularJs的入門教程視頻：AngularJS Fundamentals In 60-ish Minutes，主要講解了AngularJs中Directive,Data Binding,Filter和Module的概念和用法。我的認爲這四個概念是AngularJs的核心，支撐起了AngularJs的骨架。掌握了他們對全局上把握AngularJs頗有幫助。進階則須要大量實踐和官網API文檔的閱讀。html

看看下圖大體就能夠了解AngularJs有何能耐。angularjs

首先從官網下載angular.min.js和angular-route.min.js。能夠從官網下載（https://angularjs.org/或https://code.angularjs.org/）web

在VS中建立一個空的Empty Web項目。json

Directive 和 Data Bindingbootstrap

AngularJs 中的Directive概念不是很容易理解，入門階段可暫且將其理解爲用來擴展HTML的一種tag. Angularjs會解析這些tag，以實現Angularjs的Magic.api

能夠對照傳統的Imperative UI來理解AngularJs的Declarative UI:數組

AngularJs以前咱們實現前臺頁面邏輯通常是經過給HTML元素設置ID，而後使用Javascript或jQuery來操縱HTML DOM，這就是典型的Imperative UI。而AngularJs再也不須要給HTML元素設置ID，而使用Declarative,由Declarative「指導」HTML 元素的行爲。我的認爲這樣的好處之一就是開發人員看到一個HTML 元素及其Directive大概就能夠理解其運行時的行爲。而在傳統的Imperative UI中，HTML 元素的ID信息並不能給你帶來任何有用的信息。瀏覽器

下面代碼使用了兩個Directive：ng-app 和 ng-model.app

ng-app: 用於auto-bootstrap 一個AngularJs應用。這是必須的一個Directive，通常加在HTML的根對象上（以下代碼所示）。更詳細解釋，移步官網：https://docs.angularjs.org/api/ng/directive/ngApp框架

ngModel：用於在property和HTML控件（input,select, textarea）之間創建雙向的Data Binding，也就是說HTML控件的值改變會反應到property上，反過來也一樣成立。property就是經過{{}}建立的一個對象。

下面代碼展現了將文本控件和name之間創建了Data Binding.

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Using Directives and Data Binding Syntax</title>
</head>
<body>
    <div class="container">
        Name: <input type="text" ng-model="name" /> {{name}}
    </div>
    <script src="angular.min.js"></script>
</body>
</html>

Directive能夠用「x-」或者「data-」做爲前綴。Directive能夠放置於元素名、屬性、class、註釋中。

<!DOCTYPE html>
<html data-ng-app="">
<head>
    <title>Using Directives and Data Binding Syntax</title>
</head>
<body>
    <div class="container">
        Name: <input type="text" data-ng-model="name" /> {{name}}
    </div>
    <script src="angular.min.js"></script>
</body>
</html>

下面是HTML運行之後的結果。

下面例子展現了經過ng-init和ng-repeat來遍歷操做一個數組的用法。

<!DOCTYPE html>
<html data-ng-app="">
<head>
    <title>Iterating with the ng-repeat Directive</title>
</head>
<body>
    <div class="container" data-ng-init="names = ['Terry','William','Robert','Henry']">
        <h3>Looping with the ng-repeat Directive</h3>
        <ul>
            <li data-ng-repeat="name in names">{{name}}</li>
        </ul>
    </div>
    <script src="angular.min.js"></script>
</body>
</html>

更多directve的用法，參考官網https://docs.angularjs.org/api

Filter

做用就是接收一個輸入，經過某個規則進行處理，而後返回處理後的結果。主要用於對數組過濾，對數組中的元素進行排序, 對數據作格式化處理等。

AngualrJS內置了一些過濾器，它們是：currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json對象)、limitTo(限制個數)、lowercase(小寫)、uppercase(大寫)、number(數字)、orderBy(排序)。總共九種。除此以外還能夠自定義過濾器，這個就強大了，能夠知足任何要求的數據處理。

下面代碼展現了數據過濾，排序和大小寫轉換的實現。每一個Filter跟在數據後，並有|隔開。

<!DOCTYPE html>
<html data-ng-app="">
<head>
    <title>Using Filter</title>
</head>
<body>
    <div class="container" data-ng-init="customers = [{name:'Terry Wu',city:'Phoenix'},
         {name:'Terry Song',city:'NewYork'},{name:'Terry Dow',city:'NewYork'},
         {name:'Henry Dow',city:'NewYork'}]">
        Names:
        <br />
        <input type="text" data-ng-model="name" />
        <br />
        <ul>
            <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
        </ul>
    </div>
    <script src="angular.min.js"></script>
</body>
</html>

運行的結果：

Module

Module就是一個容器，用於管理一個AngularJS應用的各個部分，是AngularJS中很重要的概念。一個獨立的AngularJS功能模塊能夠封裝成一個Module，其做用和C#應用程序中Assembly做用相似。C#中咱們經過main函數來bootstrap應用程序。而AngularJS則經過na-app="moduleName"的方式來bootstrap一個AngularJS功能模塊。moduleName就是Module對象的name.

下圖是一個Module有哪些常見部分組成。
Config/Route:用於配置AngularJS應用的路由（AngularJS），做用相似於ASP.NET MVC應用中的Config/Route。
Filter:對數據起過濾做用，上文有解釋。
Directive: 擴展HTML,AngularJS中最重要的概念。沒有Directive就沒有AngularJS。
Controller: 做用相似於ASP.NET MVC應用中的Controller。做用有兩個：實現頁面上的業務邏輯，以及對$scope(model)進行操做。 AngularJS則經過內建的Data-Binding機制將model綁定到view(HTML控件)。使用了angularJS後,通常不會經過代碼對HTML DOM元素進行操做（這正是angularJS的神奇之處）。
Factory/Service/Provider/Value: 提供方法供Controller使用。大多數時候經過他們實現對數據源的訪問，以及實現一些通用的邏輯以在不一樣的Controller中共享。好比Restful API就是常見的數據源。

下面這段代碼實現了上面實例的相同的功能，差別就在於這個實例經過建立一個module（angularJS應用），並在module下添加contorller來實現上面的功能。在SimpleController（Controller）中，咱們建立了customers（Model）並進行數據初始化， View(Html控件）則直接綁定到customers（Model）。$Scope是一個AngualrJs moduel中全部model的容器對象。Controller須要經過$Scope來訪問model。View則經過$Scope來訪問Controller和model。

這個例子比上面例子更接近實際工程中的用法。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
    <title>Using  module Controller</title>
</head>
<body>
    <div data-ng-controller="SimpleController">
        Names:
        <br />
        <input type="text" data-ng-model="name" />
        <br />
        <ul>
            <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
        </ul>
    </div>

    <script src="angular.min.js"></script>

    <script>
        var demoApp = angular.module("demoApp", []);

        demoApp.controller("SimpleController", function ($scope) {
            $scope.customers = [
                { name: 'Terry Wu', city: 'Phoenix' },
                { name: 'Terry Song', city: 'NewYork' },
                { name: 'Terry Dow', city: 'NewYork' },
                { name: 'Henry Dow', city: 'NewYork' }
            ];
        });
    </script>
</body>

</html>

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
    <title>Using Controller</title>
</head>
<body>
    <div data-ng-controller="SimpleController">
        Names:
        <br />
        <input type="text" data-ng-model="name" />
        <br />
        <ul>
            <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
        </ul>
    </div>

    <script src="angular.min.js"></script>

    <script>
        var demoApp = angular.module("demoApp", []);

        var controllers = {};
        controllers.SimpleController = function ($scope) {
            $scope.customers = [
                { name: 'Terry Wu', city: 'Phoenix' },
                { name: 'Terry Song', city: 'NewYork' },
                { name: 'Terry Dow', city: 'NewYork' },
                { name: 'Henry Dow', city: 'NewYork' }
            ];
        }

        demoApp.controller(controllers);
    </script>
</body>

</html>

View Code

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
    <title>Using Controller</title>
</head>
<body>
    <div>
        <div data-ng-view=""></div>
    </div>

    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>

    <script>
        var demoApp = angular.module('demoApp', ['ngRoute']);

        demoApp.config(function ($routeProvider) {
            $routeProvider
                .when('/',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/View1.html'
                })
                .when('/view2',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/View2.html'
                })
                .otherwise({redirectTo:'/'});
        });

        var controllers = {};
        controllers.SimpleController = function ($scope) {
            $scope.customers = [
                { name: 'Terry Wu', city: 'Phoenix' },
                { name: 'Terry Song', city: 'NewYork' },
                { name: 'Terry Dow', city: 'NewYork' },
                { name: 'Henry Dow', city: 'NewYork' }
            ];

            $scope.addCustomer = function () {
                $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
            };
        }

        demoApp.controller(controllers);
    </script>
</body>

</html>

View Code

下圖展現了Module及其各個組成部分的關係。

下面實例經過config配置module的route實現一個SPA實例。首先建立View1.html 和View2.html。目錄結構以下圖.

<div>
    <h2>View1</h2>
    Names:
    <br />
    <input type="text" data-ng-model="filter.name" />
    <br />
    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
    </ul>

    <br />
    Customer Names:<br />
    <input type="text" data-ng-model="newCustomer.name" />
    <br />
    Customer City:<br />
    <input type="text" data-ng-model="newCustomer.city" />
    <br />
    <button data-ng-click="addCustomer()">Add Customer </button>
    <br />
    <a href="#/view2">View 2</a>
</div>

View1.html

<div>
    <h2>View2</h2>
    City:
    <br />
    <input type="text" data-ng-model="city" />
    <br />
    <ul>
        <li data-ng-repeat="cust in customers | filter:city | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
    </ul>
</div>

View2.html

經過$routeProvider來配置當前頁面中view1 和view2 的路由，已經每一個view所對應的controller。 view1和view2會顯示在當前頁面標註了ng-view的位置。

同時經過config咱們解耦了controller和HTML標籤。上面的例子，咱們須要給html標籤添加ng-controller tag來使用controller。這邊直接經過config完成這樣的配置。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
    <title>View</title>
</head>
<body>
    <div>
        <div data-ng-view=""></div>
    </div>

    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>

    <script>
        var demoApp = angular.module('demoApp', ['ngRoute']);

        demoApp.config(function ($routeProvider) {
            $routeProvider
                .when('/',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/View1.html'
                })
                .when('/view2',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/View2.html'
                })
                .otherwise({redirectTo:'/'});
        });

        var controllers = {};
        controllers.SimpleController = function ($scope) {
            $scope.customers = [
                { name: 'Terry Wu', city: 'Phoenix' },
                { name: 'Terry Song', city: 'NewYork' },
                { name: 'Terry Dow', city: 'NewYork' },
                { name: 'Henry Dow', city: 'NewYork' }
            ];

            $scope.addCustomer = function () {
                $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
            };
        }

        demoApp.controller(controllers);
    </script>
</body>

</html>

效果以下圖。

最後一個實例更接近實際工程中的用法，引入了Factory來初始化數據（實際工程中,在這裏可訪問webAPI獲取數據完成初始化），Controller中則經過Factory得到數據。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
    <title>Using Factory</title>
</head>
<body>
    <div>
        <div data-ng-view=""></div>
    </div>

    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>

    <script>
        var demoApp = angular.module('demoApp', ['ngRoute']);

        demoApp.config(function ($routeProvider) {
            $routeProvider
                .when('/',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/View1.html'
                })
                .when('/view2',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/View2.html'
                })
                .otherwise({ redirectTo: '/' });
        });

        demoApp.factory('simpleFactory', function () {
            var customers = [
                { name: 'Terry Wu', city: 'Phoenix' },
                { name: 'Terry Song', city: 'NewYork' },
                { name: 'Terry Dow', city: 'NewYork' },
                { name: 'Henry Dow', city: 'NewYork' }
            ];

            var factory = {};

            factory.getCustomers = function ()
            {
                return customers;
            }

            return factory;
        });

        var controllers = {};
        controllers.SimpleController = function ($scope, simpleFactory) {
            $scope.customers = [];

            init();

            function init() {
                $scope.customers = simpleFactory.getCustomers();
            }

            $scope.addCustomer = function () {
                $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
            };
        }

        demoApp.controller(controllers);
    </script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。