首頁 > 文章 > web前端 > 分享與Angularjs相關的實例詳解

分享與Angularjs相關的實例詳解

零下一度原創: 2017-07-03 14:14:551087瀏覽

這週末在家待了兩天，剛好中午閒暇時間繼續分享Angularjs相關，今天主要分享Angularjs總體介紹及資料綁定部分內容，以下直接進入主題。

1、基本概念：

　　AngularJS是為了克服HTML在建構應用上的不足而設計的。 HTML是一門很好的偽靜態文字展示設計的聲明式語言，但要建構WEB應用的話它就顯得乏力了。所以我做了一些工作（你也可以覺得是小花招）來讓瀏覽器做我想要的事，通常，我們是透過以下技術來解決靜態網頁技術在建立動態應用上的不足。

2、版本

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

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

3、核心特色
MVC（或MVVM）設計想法：

很多人會想Angularjs是前端MVC框架，我認為MVC只是一個設計思想，我認為可以說有MVVM的影子在裡面，因為MVVM是在MVC的基礎上升級的，加了數據雙向綁定功能，不過這只是我個人意見，請大神們指正。

雙向資料綁定：

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

　　模組化與依賴注入是AngularJs的核心內容，也是Angular的亮點。
指令系統

指令體統也是Angular的核心，指令系統分內建指令和自訂指令，其中我認為自訂指令的功能很強大，能實現很多強大的功能，細節到講解指令時詳細講解。

4、擅長領域

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

有可能有些園友有可能對單頁應用不是很理解，簡單舉一個例子，比如我們傳統的透過Iframe框架的屬於多頁應用MPA，多頁面應用的弊端為多次加載多個頁面，單頁面應用程式都透過Html段來載入或切換方式。這裡對MPA，SPA不做過多的介紹，大家可以百度一下就理解。

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

5、AngularJs應用程式構成

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

6、圖碼（module）
在AngularJS中module是一個核心的存在，包括了許多方面，例如controller, config, service, factory, directive, constant, 等等。
模組的創建方式：
　　angular.module('myApp',[]);
模組的使用：
在需要的地方（html某個標籤上）添加ng-app
## 在需要的地方（html某個標籤上）添加ng-app
使用模組的好處：
1）保持全域命名空間的清潔；
2）編寫測試程式碼更容易；
3）在不同的應用程式之間輕鬆使用程式碼。

4）使用聲明的方式，讓人更容易理解。

7、在應用程式中使用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?1.1.11"></script>
  
</head>

　2）在應用Angular範圍的html元素上添加ng-app模組，需要添加控制器的話加ng-controller，這個不一定是在body元素上，可以任意元素上，這就是顯示使用Angular的應用邊界。

<body ng-app="myapp" ng-controller="myCtrl">
    <!--    1、表达式绑定 -->
    <h1>{{expression}}</h1>
    <!-- 2、指令绑定-->
    <h2>{{ngmodel}}</h2>
    <input type="text" ng-model="ngmodel">
    <!--    3、ng-bind绑定-->
    <h3 ng-bind="ngbind"></h3>
    <h3 class="ng-bind:ngbind"></h3>
    <!--    4、ng-bind-html绑定-->
    <h4 ng-bind-html="htmlbind"></h4>
    <!--    5、ng-bind-template -->
    <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
</body>

　　3、新增js程式碼，並定義模組及控制器等內容

<script>
    //模块定义
    // 第一个参数：应用名称，第二个参数：应用依赖模块
    var app = angular.module(&#39;myapp&#39;, [&#39;ngSanitize&#39;]);

    //    控制器定义
    //    第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能
    app.controller(&#39;myCtrl&#39;, function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "<font color=&#39;red&#39;>hello,htmlbind</font>";
        $scope.subCtrl = "hello subCtrl";

    });

</script>

###

　　從以上程式碼段可以看出怎麼定義模組及控制器的方法，並每個參數的意義都寫了註釋，大家可以看一下。

到時候給大家把原始碼分享到GitHub上面，大家可以下載。

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

以上是分享與Angularjs相關的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：手機號碼、電子郵件、身分證、銀行卡正規驗證實例下一篇：手機號碼、電子郵件、身分證、銀行卡正規驗證實例

看更多