AngularJS基礎入門介紹-js教程-PHP中文網

首頁

web前端

js教程

AngularJS基礎入門介紹

零到壹度

Apr 21, 2018 am 10:37 AM

angularjs

這篇文章介紹的內容是關於angularjs基礎入門介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下。

關鍵點：

前端JS框架：封裝了使用JS開發前端重複功能，擴展了HTML，主要用於頁面操作和顯示。

核心：MVC、模組化、雙向資料綁定、依賴注入、語義化標籤、表達式等。【相關影片教學推薦：angularjs影片教學】

雙向資料綁定

引入相關js檔案

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--匿名应用模块-->
       <p ng-app="">
           <input ng-model="username" name="username"/>
           <input ng-model="username"/>
           <p>{{username}}</p>
           <p ng-bind="username"></p>
       </p>
    </body>
</html>

#ng-app=」」匿名應用模組，一般要寫名字，方便後面初始化ng-model:自動綁定

表單元素

的value的值到Angularjs內部變數中。

ng-bind:作用等同於表達式，但用法不同。一般用於綁定非表單元素，用來顯示變數的。

ng-bind和{{}}差異：前者會將標籤的子標籤的所有內容替換為變數的內容，而後者只是在目前位置顯示變數的內容。

基於模組化的MVC(MVVM)

檢視：主要指HTML靜態頁面資料標籤，主要是用來顯示。

模型：主要只填入視圖的、邏輯處理的一些資料。例如json、變數

控制：一些js程式碼，寫邏輯。主要是取得模型、填滿視圖、從視圖取得資料、填入模型。

m和vm的轉換：

例如變數：

var username=”XiaoQi”;
$scope.username=username;

vm的變數其實就是綁定到全域變數$scope中屬性。

頁面上：{{username}}

注意：Angularjs變數在頁面上不能加$scope。

如果是定時器等內部js改變了變量，那麼預設情況下Angularjs不能實現雙向資料的綁定顯示，需要使用$.digest強制通知（刷新）

#頁面開啟時初始化內容範例:

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--<p ng-app="myApp" ng-controller="myCtrl"  ng-init="username=&#39;Jack&#39;">-->
       
       <p ng-app="myApp" ng-controller="myCtrl">
           
           <input ng-model="username"/>
           <p>{{username}}</p>
       </p>
       
       <!--控制器-->
       <script type="text/javascript">
           //初始化应用模块
           //参数1：应用模块的名字
           //参数2：使用扩展模块，这里没有
           var myApp=angular.module("myApp",[]);
           //初始化控制器：认为控制器绑定了一堆js
           //参数1：控制器的名字
           //参数2：js函数
           myApp.controller("myCtrl",["$scope",function ($scope) {
              //初始化变量
              $scope.username="XiaoQi";
              //可以写任何的js
           }]);
           
       </script>
    </body>
</html>

#注意：

#如果定義了有名字的應用模組和控制器，那麼必須使用js初始化它！ #按鈕事件綁定

依賴注入DI

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--视图-->
       <p ng-app="myApp" ng-controller="myCtrl">
           <input ng-model="username"/>
           <input type="button" value="清空数据1" ng-click="clearMsg()"/>
           <input type="button" value="清空数据2" ng-click="username=&#39;&#39;"/>
           <p>Hello {{username}}</p>
       </p>
       <!--控制器-->
       <script type="text/javascript">
           //初始化应用模块
           var myApp=angular.module("myApp",[]);
           //初始化控制器
           myApp.controller("myCtrl",["$scope",function($scope){
              //初始化一个angularjs的事件
              $scope.clearMsg=function(){
                  //清空数据
                  $scope.username="";
              };
           }]);
       </script>
    </body>
</html>

#重複遍歷

##重複遍歷

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--视图-->
       <p ng-app="myApp" ng-controller="myCtrl">
           <table border="1">
              <tr>
                  <th>序号</th>
                  <th>商品编号</th>
                  <th>商品名称</th>
                  <th>商品价格</th>
              </tr>
              <tr ng-repeat="product in  products">
                  <td>{{$index+1}}</td>
                  <td>{{product.id}}</td>
                  <td>{{product.name}}</td>
                  <td>{{product.price}}</td>
              </tr>
           </table>
       </p>
       <!--控制器-->
       <script type="text/javascript">
           angular.module("myApp",[])
           .controller("myCtrl",["$scope",function($scope){
              //json数组
              $scope.products=[
                  {"id":1001,"name":"电视机","price":998},
                  {"id":1002,"name":"洗衣机","price":988898}
              ];
           }])
        </script>
    </body>
</html>

#product：隨便寫，每次遍歷時的臨時angularjs的對象，這裡指每一個json物件。路由機制

之前：include包含頁面，只是重複使用頁面，但重複使用後的頁面也是整體刷新的。透過angularjs的路由，可以實現，部分刷新，實現重複的頭和尾可以不刷新。而且多視圖單頁面效果。官方範例：

底層實作：透過html中#（錨點）來實現的。

寫法：url # 子路徑（要在中間顯示的）

引入路由模組：

<!--引入路由模块-->
       <script type="text/javascript"  src="../js/angular-route.min.js"  ></script>

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
       <!--引入路由模块-->
       <script type="text/javascript" src="../js/angular-route.min.js" ></script>
    </head>
    <body>
       <p ng-app="myApp">
           <p>===========我是头<br />
              <a href="#/">首页</a>
              <a href="#/computer">电脑分类</a>
              <a href="#/money">财务管理</a>
           </p>
           <!--路由中的包含的页面的显示，只能有一个元素-->
           <p ng-view></p>
           
           <p>==========我是脚</p>
           
       </p>
    
    
       <!--控制器-->
       <script type="text/javascript">
           angular.module("myApp",[&#39;ngRoute&#39;])
           //angularjs的配置，在配置中配置路由内容
           .config([&#39;$routeProvider&#39;, function($routeProvider){
                $routeProvider
                //template中支持html标签
                   .when(&#39;/&#39;,{template:&#39;这是<h1 id="首页页面">首页页面</h1>&#39;})
                   //.when(&#39;/computer&#39;,{template:&#39;这是电脑分类页面&#39;})
                   .when(&#39;/computer&#39;,{templateUrl:&#39;computer.html&#39;})
                   .when(&#39;/money&#39;,{template:&#39;这是财务页面&#39;})
                   //如果都匹配不上，则跳转到一个页面
                   .otherwise({redirectTo:&#39;/&#39;});
           }]);
       </script>
    </body>
</html>

ng-view:用來顯示路由的結果的內容

when:判斷語句

template:html的結果,支援html標籤

templateUrl:支援載入另外的頁面###############相關推薦：############AngularJS所有版本下載######## #####AngularJS學習總結############angularjs和angular4的差異。為什麼要使用angular4############angular入門教學######

以上是AngularJS基礎入門介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解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使用類型推斷系統，導致在相同代碼上的性能表現不同。