AngularJs學習筆記1——整體介紹

時間 2019-12-01

原文原文鏈接

這週末在家呆了兩天，正好中午閒暇時間繼續分享Angularjs相關，今天主要分享Angularjs整體介紹及數據綁定部份內容，下面直接進入主題。javascript

一、基本概念：

　　AngularJS是爲了克服HTML在構建應用上的不足而設計的。HTML是一門很好的僞靜態文本展現設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。因此我作了一些工做（你也能夠以爲是小花招）來讓瀏覽器作我想要的事，一般，咱們是經過如下技術來解決靜態網頁技術在構建動態應用上的不足。

二、版本

　　angualrjs1.x：目前比較穩定版本。
　　angularjs2.x:基於typescript編寫，他在1.x基礎上改動很大，偏向於移動端的開發，ES6標準編寫
　　angularjs4.x 最新版本html

目前版本2.x不是在1.x的基礎上升級的，基本上說是顛覆性的，目前開始兩個版原本維護，2.x開始把1.x版本基本上從新架構，並優化了大量的東西，並更提倡組件化變成，這方面跟Vue，React相似。前端

三、核心特性
MVC（或MVVM）設計思想：java

不少人會想Angularjs是前端MVC框架，我認爲MVC只是一個設計思想，我認爲能夠說有MVVM的影子在裏面，由於MVVM是在MVC的基礎上升級的，加了數據雙向綁定功能，不過這只是我我的意見，請大神們指正。angularjs

雙向數據綁定：typescript

　　數據雙向綁定不是AngularJs提出的，是很早就有的，有微軟的WPF中運用MVVM思想、前端框架Knockoutjs都有數據雙向綁定概念。
模塊化和依賴注入express

　　模塊化和依賴注入是AngularJs的核心內容，也是Angular的亮點。
指令系統瀏覽器

指令體統也是Angular的核心，指令系統份內置指令和自定義指令，其中我認爲自定義指令的功能很強大，能實現不少強大的功能，細節到講解指令時詳細講解。前端框架

四、擅長領域架構

1）單頁面應用程序Single Page Application（SPA）
2）CRUD程序

有可能有些園友有可能對單頁面應用不是很理解，簡單舉一個例子，好比咱們傳統的經過Iframe框架的屬於多頁面應用MPA，多頁面應用的弊端爲屢次加載多個頁面，單頁面應用都經過Html段來加載或者切換方式。這裏對MPA，SPA不作過多的介紹，你們能夠百度一下就理解。

AngularJs適合於CRUD的應用系統，不適合於頁面頻繁交互的應用或者圖形化頁面及遊戲類系統不適合該框架。

五、AngularJs應用構成

任何一個ng應用都是由控制器、服務、指令、路由、過濾器等模塊類型構成，下面要我用一個圖表示關係：

六、模塊（module）
在AngularJS中module是一個核心的存在，包括了不少方面，好比controller, config, service, factory, directive, constant, 等等。
模塊的建立方式：
　　angular.module(‘myApp’,[]);
模塊的使用：
在須要的地方（html某個標籤上）添加ng-app
使用模塊的好處：
1）保持全局命名空間的清潔；
2）編寫測試代碼更容易；
3）易於在不一樣的應用程序之間複用代碼。
4）使用聲明的方式，讓人更加容易理解。

七、在應用中使用AngularJs

1）在應用中使用Angular時首先在頁面中引用angular框架的js庫代碼。

<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <!--引用AngularJs庫    -->
    <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js"></script>
  
</head>

　2）在應用Angular範圍的html元素上添加ng-app模塊，須要添加控制器的話加ng-controller，這個不必定是在body元素上，能夠任意元素上，這個就是代表使用Angular的應用邊界。

<body ng-app="myapp" ng-controller="myCtrl">
    <!--    一、表達式綁定 -->
    <h1>{{expression}}</h1>
    <!-- 二、指令綁定-->
    <h2>{{ngmodel}}</h2>
    <input type="text" ng-model="ngmodel">
    <!--    三、ng-bind綁定-->
    <h3 ng-bind="ngbind"></h3>
    <h3 class="ng-bind:ngbind"></h3>
    <!--    四、ng-bind-html綁定-->
    <h4 ng-bind-html="htmlbind"></h4>
    <!--    五、ng-bind-template -->
    <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
</body>

　　三、添加js代碼，並定義模塊及控制器等內容

<script>
    //模塊定義
    // 第一個參數：應用名稱，第二個參數：應用依賴模塊
    var app = angular.module('myapp', ['ngSanitize']);

    //    控制器定義
    //    第一參數： 控制器名稱， 第二個參數： 匿名函數， 傳入做用域,並在做用域上添加額外功能
    app.controller('myCtrl', function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
        $scope.subCtrl = "hello subCtrl";

    });

</script>

　　從以上代碼段能夠看出怎麼定義模塊及控制器的方法，並每一個參數的意義都寫了註釋，你們能夠看一下。

到時候給你們把源代碼分享到GitHub上面，你們能夠下載。

今天就給你們分享怎麼多的內容吧，下次把數據綁定和控制器相關內容分享給你們，在此感謝你們的支持，並有什麼不妥之處歡迎你們指正！