AngularJS之Scope及Controller（一）

時間 2019-11-15

標籤 angularjs scope controller 欄目 AngularJS 简体版

原文原文鏈接

前言

以前有接觸過基本的AngularJS，未過多涉及，因而乎本系列咱們來着重講講AngularJS，對AngularJS中重要的幾大內容進行梳理並進行一些小的例子的書寫。在以前項目過程當中用到過avalon，可是avalon並未被普遍使用也就放棄了，至於孰最輕量，性能更好做爲非專業的我就不妄下結論，lz只明白一點，業界最流行什麼前端框架，招聘大部分要求會哪些框架，lz纔會去學習，固然其中的樂趣也是油然而生，每一次敲代碼的過程好似在浩瀚大海中探幽一番，別有一番滋味。javascript

簡短介紹

AngularJS也是一種MVVM前端框架，其中的路由、指令、服務、工廠等。它幫助了咱們開發前端UI並簡化了一些繁瑣的過程，同時它也恰如其分的支持客戶端的單元測試。它涉及到Model、View、Controller。當AngularJS應用程序被啓動時，其Model、Controller、View以及HTML文檔都會被加載到用戶的設備上，最終運行在用戶設備的硬件中。至於Model、View、Controller這三者之間的聯繫，咱們看以下圖便知。html

HelloWorld

貌似每學一門新的語言或者框架首先都會想到的是和這個世界打個招呼，下面咱們利用AngularJS和這個世界來打個招呼。前端

（1）頁面定義模塊而後獲取模塊java

var app = angular.module('myApp', []);

（2）定義控制並獲取該控制器進行對應的賦值設計模式

app.controller('ctrl', ['$scope', function($scope){
    $scope.greeting = {text:"Hello"};
}])

（3）UI頁面前端框架

<html ng-app="myApp">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="HelloWorld.js"></script>
</head>
<body ng-controller="ctrl">
    {{greeting.text}},World
</body>
</html>

最終結果以下：app

（1）模塊：AngularJS中的module做爲Angular應用程序的入口點。那模塊從何而來呢？這裏不作過多探討，涉及到依賴逐入的概念。依賴逐入是AngularJS中主要的優勢之一，在DI做爲一種設計模式被定義在應用程序中做爲配置的一部分，如此一來，無需咱們手動去建立，當應用程序首次啓動時，DI會自動加載模塊依賴。框架

（2）模型類：拿MVC類比，咱們經過模型來獲取數據，此時咱們必須定義模型類，同理在大多數JavaScript客戶端框架中也會要求咱們建立模型類，可是在AngularJS中這種狀況不會發生，在AngularJS中有一個$scope對象，此對象用來存儲模型類，Scopes被附加到DOM元素上，咱們能夠經過使用數據屬性到$scope的對象。$rootScope是AngularJS程序中的父Scope。性能

（3）控制器：在AngularJS中控制器做爲視圖和model的橋樑，在這個控制器這個區域中咱們能夠放置一個視圖的全部業務邏輯。當應用程序中的業務邏輯被多個控制器所使用時，此時咱們應該將業務邏輯放置在AngularJS中的Service（服務）中，當咱們須要用到這些業務邏輯時，咱們須要在DI的幫助下來獲取這些服務。單元測試

下面一張圖簡短的歸納了視圖（View）、$scope、控制器（Controller）之間的關係。

$scope與Controller

咱們經過一個例子來看這兩者之間的關係：

UI

<html ng-app="myApp">  
<head>  
    <title></title>  
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="scopeController.js"></script>
</head>  
<body>  
    <div ng-controller="ctrlName">  
        <input type="text" width="200px" ng-model="name" />  
        <h2>Your Name : {{name}}</h2>  
    </div>  
</body>  
</html>

JS

app.controller('ctrlName', function ($scope) {  
    $scope.name = '';  
});

咱們看看演示效果：

Controller as語法

對於上述咱們能夠經過另一種方式實現，在AngularJS 1.1.5版本後開始支持控制器as語法。咱們給出代碼看看。

UI

<html ng-app="myApp">
<head>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="myCtrl.js"></script>
    <title></title>
</head>
<body ng-controller="myCtrl as u">
    <h2>{{u.username}}</h2>
    <h1>請輸入你的名字 :</h1>  
    <input type="text" width="200px" ng-model="u.name" />  
    <h2>你的名字是 : {{u.name}}</h2>  
</body>
</html>

JS

app.controller('myCtrl',function(){
    var self = this;
    self.name = "";
    self.username = "xpy0928";
})

結果演示：

總結

本節咱們簡短的介紹了AngularJS以及一些基本概念。下節再見。

相關標籤/搜索

每日一句

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