第一眼——AngularJS

I_Am 發(fā)布于2019-08-20 12:19 / 2860人閱讀

摘要：在這樣的背景下，誕生了，它是一種模式的前端框架，為前后端的數(shù)據(jù)綁定提供了一套解決方案，并自定義了一套事件標準，使得前后端的數(shù)據(jù)交互更加的合理化并且高效，利于管理。使得這個強大的框架終于將虛掩的門打開。第二眼，就一探究竟吧。

AngularJS是個啥？

誕生于2009年，2012年被google收購，是一個適用于CRUD、SPA等類型應用的前端MVC框架

為什么要使用AngularJS

在涉及數(shù)據(jù)綁定的操作過程中，經典的做法是用AJAX將數(shù)據(jù)從服務端取回，接著將數(shù)據(jù)解析成變量，然后在前端進行字符串的拼接、嵌套，再插入到頁面。

低數(shù)據(jù)量的綁定這樣的操作的確無可厚非，但是在數(shù)據(jù)量龐大的時候（比如需要拼接成百上千行的字符串），這種方式就顯得難以執(zhí)行且不太科學了。

在這樣的背景下，AngularJS誕生了，它是一種MVC模式的前端框架，為前后端的數(shù)據(jù)綁定提供了一套解決方案，并自定義了一套事件標準，使得前后端的數(shù)據(jù)交互更加的合理化并且高效，利于管理。

構建第一個AngularJS應用

下載AngularJS
與大部分框架一樣，AngularJS有開發(fā)版（可讀）和壓縮版（不可讀，用于生產環(huán)境），這里我們下載AngularJS的壓縮版

https://angularjs.org/
由于目前大部分應用尚未進行Angular2改造，因此這里使用第一代Angular，之后再對Angular2漸進增強

引入AngularJS

初始化Angular應用管理邊界
給元素加上一個屬性ng-app（其實是Angular定義的指令，它聲明一個angu的管理邊界）

調用Angular對象，管理ng-app

angular.module("app",[])//數(shù)組代表依賴注入的內容

AngularJS將所有api封裝到angular對象中

使用angular對象管理邊界的時候，要先聲明一個angular模塊，對這個模塊的操作，即是對管理邊界的控制

在管理區(qū)域內加入內容


    {{ "This is your first Angular App!" }}

Angular將頁面中所有的表達式進行解析，并輸出里面的內容

Angular不需要在js中聲明邊界管理模塊也可以在頁面顯示內容

基本指令

指令：帶有特定功能的自定義屬性
指令格式：ng-command
基本指令：

初始化應用管理邊界——ng-app
定義Angular的應用管理邊界，前面已經使用到

初始化數(shù)據(jù)指令——ng-init
定義初始化的數(shù)據(jù)


    {{ username }}

這個數(shù)據(jù)可以是除函數(shù)外的任意的js數(shù)據(jù)類型


    {{ user.username }}
    

    {{ user.sayHello }}
    

    今天是星期{{ data[2] }}

動態(tài)數(shù)據(jù)模型——ng-model
它接收頁面上動態(tài)數(shù)據(jù)的變化


    
    監(jiān)聽到輸入框的變化{{ text }}

數(shù)據(jù)綁定——ng-bind
將數(shù)據(jù)綁定到當前元素


    
         {{ username }}

它與花括號表達式不同，它只能將數(shù)據(jù)綁定到html內容中（類似innerHTML實現(xiàn)），而花括號表達式可以將數(shù)據(jù)綁定到任何地方

PS：ng-model也能實現(xiàn)數(shù)據(jù)的捆綁，但破壞了規(guī)范的分工機制，不提倡

遍歷——ng-repeat


    {{ $item }}

遍歷datalist，根據(jù)遍歷的情況生成元素，并且可以在元素中使用遍歷到的數(shù)據(jù) 控制器 controller

既然Angular是MVC模式的框架，那么一定有一個controller（C）層面

控制器的作用：

監(jiān)聽頁面中的請求和行為

訪問處理數(shù)據(jù)

將數(shù)據(jù)同步到view

控制器關注的部分

view

css

image

html

插個樓！——$scope
$scope是angular對象內置服務對象，關聯(lián)當前ng-app，是ng-controller實現(xiàn)內部數(shù)據(jù)和事件方法綁定（可以說是托管到$scope上，并通過$scope去調用）的核心對象

控制器實現(xiàn)步驟：

聲明控制器

通過應用邊界管理模塊去監(jiān)聽控制器

//在模塊
var app = angular("app",[]).controller("mycontroller", function() {
    //這里就要使用到$scope來進行數(shù)據(jù)的控制
    $scope.hostage = "I am a hostage, controlled by Samuel"
    $scope.something = "I am something."
})

AngularJS事件

AngularJS自己定義了一套事件標準，通過指令的形式進行監(jiān)聽
示例：

單擊事件——ng-click
html:


    
    I"m wating for message.
    

    {{ message }}

js:

var app = angular.module("app", []).controller("mycontroller", function() {
    $scope.sendMessage = function() {
        $scope.message = "I"m message!";
    }
});

第一眼，我們看到了：
AngularJS的核心業(yè)務（優(yōu)勢，解決的問題）、使用方式、編程模式（MVC）、基本的數(shù)據(jù)交互。使得這個強大的框架終于將虛掩的門打開。
第二眼，就一探究竟吧。

云服務器 GPU云服務器第一眼 AngularJS angularjs cdn cdn angularjs

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/80910.html

《Build your own AngularJS》手記

摘要：最近在看，打算跟著書中的代碼敲一遍，加深對的理解。在這里記錄過程中的問題與心得。根據(jù)排查內存耗盡應該是這個版本的問題，換成后問題消失。因此認為這種寫法是有風險的，必須用頂上那一行注釋表明我確實要全局都的才行。不得不感嘆的嚴謹。最近在看 build your own angularjs ，打算跟著書中的代碼敲一遍，加深對AngularJS的理解。在這里記錄過程中的問題與心得。 Int...

zsy888 2019-08-21 10:27 評論0 收藏0
客戶端JavaScript框架的五大痛點

摘要：客戶端框架的個痛點我們早知道會面臨很多的困難，但是不知道會有這么難。這是對的，但是總體上來說，客戶端框架降低了遲緩的開銷。但是，這些問題加在一起就是另一回事了，可以說，客戶端框架成為了我們開發(fā)工作的一大負擔。更新：本文原本的標題是為何我們棄用AngularJS：……，現(xiàn)在把它去掉了。因為這些痛點主要是針對單頁JS應用框架的。有些人認為本文是專門批判AngularJS的，這可不是我的...

jsdt 2019-08-21 12:12 評論0 收藏0
Angular 4 簡單入門筆記

摘要：首先，我們需要在入口頁面的中配置根路徑然后創(chuàng)建一個路由模塊路由配置在主模塊中導入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉，定義該路由激活時的樣式類。剛實習的時候用過AngularJS，那時候真的是連原生JavaScript都不會寫，依樣畫葫蘆做了幾個管理后臺。然后突然換項目了，AngularJS就不寫了，感覺前前后后接觸了一年多的Angula...

whlong 2019-08-20 17:44 評論0 收藏0
自己動手實現(xiàn)一個 Flex 布局框架

摘要：通過加對應的調整布局。這些類實際是通過使用選擇器為當前元素增加了左側的邊距。簡單說兩種模式屬性為代表的框架自定義屬性為代表的框架我個人認為過多導致布局和樣式混在一起不好分辨，后期維護較困難，決定采用框架的設計模式。 showImg(https://segmentfault.com/img/bVEeOl?w=1200&h=500); 本文作為 Flex 布局進階，不對基礎做詳細介紹，關于...

davidac 2019-08-29 11:26 評論0 收藏0
AngularJS簡述

流行框架簡介 angularjs是一款非常優(yōu)秀的前端高級JS框架，由谷歌團隊開發(fā)維護，能夠快速構建單頁web應用，化繁為簡無論是angularjs還是jQuery都是用原生JS封裝的庫：對代碼進行封裝，調用封裝的方法，簡化操作傳統(tǒng)方式是用get方式獲取元素，然后點方法 jQuery庫實現(xiàn)了對獲取方式的封裝，對方法的封裝框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會幫我們實現(xiàn)響應的功能...

Jason 2019-08-23 11:25 評論0 收藏0