分享與Angularjs相關的實例詳解-js教程-PHP中文網

首頁

web前端

js教程

分享與Angularjs相關的實例詳解

零下一度

Jul 03, 2017 pm 02:14 PM

angularjsjavascript介紹

這週末在家待了兩天，剛好中午閒暇時間繼續分享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 id="expression">{{expression}}</h1>
    <!-- 2、指令绑定-->
    <h2 id="ngmodel">{{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

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。