Angular入門篇高速開發導航網

阿新 • • 發佈：2017-08-06

發的 nbsp 名稱 per angularjs user 開發 mar 聲明

簡單介紹

AngularJS 是一個為動態WEB應用設計的結構框架，提供給大家一種新的開發應用方式。這樣的方式能夠讓你擴展HTML的語法。以彌補在構建動態WEB應用時靜態文本的不足。從而在web應用程序中使用HTML聲明動態內容。

AngularJS有五個主要核心特性。例如以下介紹：

雙向數據綁定 —— 實現了把model與view全然綁定在一起，model變化，view也變化，反之亦然。
模板 —— 在AngularJS中，模板相當於HTML文件被瀏覽器解析到DOM中，AngularJS遍歷這些DOM。也就是說AuguarJS把模板當做DOM來操作，去生成一些指令來完畢對view的數據綁定。
MVVM —— 吸收了傳統的MVC設計模式針但又並不運行傳統意義上的MVC。更接近於MVVM(Moodel-View-ViewModel)。
依賴註入 —— AngularJS擁有內建的依賴註入子系統。能夠幫助開發者更easy的開發，理解和測試應用。
指令 —— 能夠用來創建自己定義的標簽，也能夠用來裝飾元素或者操作DOM屬性。

指令介紹

AngularJS有一套完整的、可擴展的、用來幫助web應用開發的指令集，它使得HTML能夠轉變成“特定領域語言(DSL)”。是用來擴展瀏覽器能力的技術之中的一個，在DOM編譯期間，和HTML關聯著的指令會被檢測到，而且被運行，這使得指令能夠為DOM指定行為，或者改變它。

AngularJS通過稱為指令的新屬性來擴展的HTML。帶有前綴ng-。我們也能夠稱之為“指令屬性”，它就是綁定在DOM元素上的函數，能夠調用方法、定義行為、綁定controller及$scope對象、操作DOM。等等。

AngularJS指令指示的是“當關聯的HTML結構進入編譯階段時應該運行的操作”，它本質上僅僅是一個當編譯器編譯到相關DOM時須要運行的函數，能夠寫在元素的名稱裏，屬性裏，css類名裏，凝視裏。

當瀏覽器啟動、開始解析HTML時，DOM元素上的指令屬性就會跟其它屬性一樣被解析，也就是說當一個Angular.js應用啟動，Angular編譯器就會遍歷DOM樹來解析HTML。尋找這些指令屬性函數。在一個DOM元素上找到一個或多個這種指令屬性函數，它們就會被收集起來、排序，然後依照優先級順序被運行。

Angular.js應用的動態性和響應能力。都要歸功於指令屬性，常見的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

關於“指令屬性”就先臨時介紹這些，相信你已經對它有初步的了解，接下來我們就開始逐一的深入的學習它們。

指令：ng-app

ng-app指令來標明一個AngularJS應用程序。並通過AngularJS完畢自己主動初始化應用和標記應用根作用域，同一時候加載和指令內容相關的模塊，並通過擁有ng-app指令的標簽為根節點開始編譯當中的DOM。

引用方法非常easy，例如以下所看到的：

<div ng-app="" ng-init="name=‘Hello World‘">
 
</div>

View Code

如上引用，一個AngularJS應用程序初始化就完畢了並標記了作用域，也就是div元素就是AngularJS應用程序的"全部者"。在它裏面的指令也就會被Angular編譯器所編譯、解析了。

指令：ng-init

ng-init指令初始化應用程序數據，也就是為AngularJS應用程序定義初始值，通常情況下，我們會使用一個控制器或模塊來取代它。後面我們會介紹有關控制器和模塊的知識。

<div ng-app="" ng-init="name=‘Hello World‘">
 
</div>

AngularJS表達式

AngularJS框架的核心功能之中的一個 —— 數據綁定，由兩個花括號{{}}組成，能夠把數據綁定到HTML，類似Javascript代碼片段，能夠包括文字、運算符和變量，通常在綁定數據中用到，表達式能夠綁定數字、字符串、對象、數組。寫在雙大括號內：{{ expression }}。

<div ng-app="" ng-init="name=‘Hello World‘">
  {{ name }}
</div>

指令：ng-model

在AngularJS中，僅僅須要使用ng-model指令就能夠把應用程序數據綁定到HTML元素，實現model和view的雙向綁定。

<div ng-app="">
 
請輸入隨意值：<input type="text" ng-model="name" />
 
你輸入的為： {{ name }}
 
</div>

View Code

指令：ng-bind

指令ng-bind和AngularJS表達式{{}}有異曲同工之妙，但不同之處就在於ng-bind是在angular解析渲染完成後才將數據顯示出來的。

<div ng-app="">
    請輸入一個名字：<input type="text" ng-model="name" />
    Hello <span ng-bind="name"></span>
</div>

指令：ng-click

AngularJS也有自己的HTML事件指令,比方說通過ng-click定義一個AngularJS單擊事件。

1 <div ng-app="" ng-init="click=false">
2     <button ng-click="click= !click">隱藏/顯示</button>
3     <div ng-hide="click">
4         請輸入一個名字：<input type="text" ng-model="name" />
5         Hello <span ng-bind="name"></span> 
6     </div>
7 </div>

控制器

AngularJS控制器控制AngularJS應用程序的數據，是常規的JavaScript對象。

ng-controller指令就是用來定義應用程序控制器的。而且同一時候創建了一個新的作用域關聯到對應的DOM元素上。

所謂作用域就是一個指向應用模型的對象，它是表達式的運行環境，作用域有層次結構。這個層次和對應的DOM差點兒是一樣的，作用域能監控表達式和傳遞事件而且能夠從父作用域繼承屬性。

每個AngularJS應用都有一個絕對的根作用域。

但也可能有多個子作用域。一個應用能夠有多個作用域，由於有一些指令會生成新的子作用域，當新作用域被創建的時候，他們會被當成子作用域加入到父作用域下，這使得作用域會變成一個和對應DOM結構一個的樹狀結構。

控制器

如今我們就用ng-controller指令來創建一個簡單的控制器定義，例如以下所看到的：

<div ng-app="" ng-controller="MyController">
 
請輸入一個名字：<input type="text" ng-model="person.name"> 
 
Hello <span ng-bind="person.name"></span> 
 
</div>    
 
<script>
function MyController($scope) {
   $scope.person = {
      name: "World"
   };
}
</script>

如上所述。我們通過ng-controller指令創建了一個JavaScript對象 —— MyController並帶有name屬性。那參數$scope是什麽呢。代表什麽意思呢。

如今我們就來解答MyController對象參數 —— $scope。

$scope就是把一個DOM元素連結到控制器上的對象，它提供一個綁定到DOM元素(以及其子元素)上的運行上下文。它也是一個JavaScript對象，指向應用程序作用域內的全部HTML元素和運行上下文。作用域呢，就是作為$scope的數據屬性關聯到DOM上的，而且能在須要調試的時候被獲取到。

要明白創建一個$scope對象，我們就要給DOM元素安上一個controller對象。使用的是ng-controller 指令屬性。

全部$scope都遵循原型繼承，這意味著它們都能訪問父$scope們,對不論什麽屬性和方法，假設AngularJS在當前$scope上找不到，就會到父$scope上去找。假設在父$scope上也沒找到。就會繼續向上回溯。一直到$rootScope上，這個$rootScope是最頂級的$scope，它相應著含有 ng-app指令屬性的那個DOM元素。也就是說根作用域關聯的DOM就是ng-app指令定義的地方。

也就是說，擁有了$scope。我們就能夠操作作用域內不論什麽我們想要獲取的對象數據。

控制器

控制器不僅聲明屬性也能夠聲明方法。例如以下所看到的：

當然假設是開發條件的須要，我們也能夠將控制器寫在外部文件裏。那如上演示樣例該怎麽做呢，非常easy。例如以下簡單引用就可以：

<script src="MyController.js"></script>

 1 <div ng-app="" ng-controller="MyController">
 2      Your name:
 3      <input type="text" ng-model="username">
 4      <button ng-click="sayHello()">打招呼</button>
 5      <hr />
 6      {{greeting}}
 7 </div>
 8  
 9 <script>
10 function MyController($scope) {
11   $scope.username = ‘World‘;
12   $scope.sayHello = function() {
13     $scope.greeting= ‘Hello ‘ + $scope.username + ‘!‘;
14   };
15 }
16 </script>

開發IT技術導航站點引入文件

demo演示地址：IT技術導航網

app.js

directive.js 技術分享

factory.js 技術分享

filter.js

HTML首頁完整代碼

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5 <title>IT技術導航網</title>
  6   <meta name="keywords" content="IT技術網址導航,技術站點,前端資源網,api api文檔" />
  7   <meta name="description" content="IT技術導航網，提供最新最經常使用熱門站點，方便技術人員查詢資源，了解前沿技術發展趨勢。站點提供網址導航。api文檔查詢，軟件下載。書籍推薦等。" />
  8 <meta name="viewport" content="width=device-width,initial-scale=1.0,  maximum-scale=1.0,user-scalable=no">
  9   <!-- 新 Bootstrap 核心 CSS 文件 -->
 10 <link rel="stylesheet" href="Public/css/bootstrap.min.css">
 11 <!-- 可選的Bootstrap主題文件（一般不用引入） -->
 12 <link rel="stylesheet" href="Public/css/bootstrap-theme.min.css">
 13 <link rel="stylesheet" href="Public/css/custom.css">
 14 <!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
 15 <script src="Public/js/jquery.min.js"></script>
 16 <script src="Public/js/page.js"></script>
 17 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  
 18 <script src="Public/js/bootstrap.min.js"></script>
 19 <script src="Public/js/jquery.pin.js"></script>
 20 <script src="Public/js/angular-1.5.3/angular.min.js"></script>
 21 <script src="Public/js/app.js"></script>
 22 <script src="Public/js/directive.js"></script> 
 23 <script src="Public/js/factory.js"></script>
 24 <script src="Public/js/filter.js"></script>
 25 <script src="Public/js/indexCtrl.js"></script>
 26 
 27 <style type="text/css">
 28 
 29 </style>
 30 </head>
 31 <body ng-app="starter" ng-controller="indexCtrl" ng-init="load()"> 
 32 
 33 <nav class="navbar navbar-default navbar-fixed-top">
 34   <div class="container">
 35     <div class="navbar-header">
 36     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 37         <span class="sr-only">Toggle navigation</span>
 38         <span class="icon-bar"></span>
 39         <span class="icon-bar"></span>
 40         <span class="icon-bar"></span>
 41       </button>
 42       <a class="navbar-brand" href="#">
 43         <img alt="Brand" width="20" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAA81BMVEX///9VPnxWPXxWPXxWPXxWPXxWPXxWPXz///9hSYT6+vuFc6BXPn37+vz8+/z9/f2LeqWMe6aOfqiTg6uXiK5bQ4BZQX9iS4VdRYFdRYJfSINuWI5vWY9xXJF0YJR3Y5Z4ZZd5ZZd6Z5h9apq0qcW1qsW1q8a6sMqpnLyrn76tocCvpMGwpMJoUoprVYxeRoJjS4abjLGilLemmbrDutDFvdLPx9nX0eDa1OLb1uPd1+Td2OXe2eXh3Ofj3+nk4Orl4evp5u7u7PLv7fPx7/T08vb08/f19Pf29Pj39vn6+fuEcZ9YP35aQn/8/P1ZQH5fR4PINAOdAAAAB3RSTlMAIWWOw/P002ipnAAAAPhJREFUeF6NldWOhEAUBRvtRsfdfd3d3e3/v2ZPmGSWZNPDqScqqaSBSy4CGJbtSi2ubRkiwXRkBo6ZdJIApeEwoWMIS1JYwuZCW7hc6ApJkgrr+T/eW1V9uKXS5I5GXAjW2VAV9KFfSfgJpk+w4yXhwoqwl5AIGwp4RPgdK3XNHD2ETYiwe6nUa18f5jYSxle4vulw7/EtoCdzvqkPv3bn7M0eYbc7xFPXzqCrRCgH0Hsm/IjgTSb04W0i7EGjz+xw+wR6oZ1MnJ9TWrtToEx+4QfcZJ5X6tnhw+nhvqebdVhZUJX/oFcKvaTotUcvUnY188ue/n38AunzPPE8yg7bAAAAAElFTkSuQmCC">
 44       </a>
 45     </div>
 46   
 47     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 48     <ul class="nav navbar-nav">
 49         <li ng-class="{true:‘active‘,false:‘‘}[x.name==defaulthead]" ng-repeat="x in headerdatas"><a href="{{x.href}}" ng-bind="x.name"> </a></li>
 50       
 51     </ul>
 52 
 53     <form class="navbar-form navbar-right" role="search">
 54     <div class="form-group">
 55       <input type="text" class="form-control" ng-model="searchkeys"  placeholder="請您輸入查詢主題">
 56     </div>
 57     <button type="submit" class="btn btn-default" ng-click=‘searchUrl(searchkeys)‘>查詢</button>
 58   </form>
 59 
 60 
 61     </div>
 62   </div>
 63 </nav>
 64 
 65 <div class="container sx_header">
 66 
 67 <div class="row sx_content ">
 68 
 69   <div class="col-md-2 hidden-xs sx_nopadding">
 70 
 71 <div class="list-group sx_content_bg" id="pinlayer" >
 72   <a href="#" ng-click="bindcatelist($index,x.id,x.name,0)" ng-class="{ true: ‘list-group-item active‘, false: ‘list-group-item‘}[x.name==defaultcate]" ng-repeat="x in categorys" ng-bind="x.name" ></a> 
 73 </div>
 74 </div>
 75   
 76   <div class="col-md-10" > 
 77 <nav class="navbar navbar-default">
 78 
 79     <!-- Brand and toggle get grouped for better mobile display -->
 80     <div class="navbar-header">
 81       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
 82         <span class="sr-only">Toggle navigation</span>
 83         <span class="icon-bar"></span>
 84         <span class="icon-bar"></span>
 85         <span class="icon-bar"></span>
 86       </button>
 87    
 88 
 89    <div class="btn-group sx_btn_bottom">
 90   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 91     {{defaultcate}} <span class="caret"></span>
 92   </button>
 93   <ul class="dropdown-menu">
 94    <li ng-repeat-start="item in categorys"><a href="#" ng-click="bindcatelist($index,item.id,item.name,0)" ng-bind="item.name" ></a></li>
 95 <li  ng-repeat-end role="separator" class="divider"></li>
 96   </ul>
 97 </div>
 98 
 99 
100  <div class="btn-group sx_btn_bottom">
101   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
102     {{defaulttypename}} <span class="caret"></span>
103   </button>
104   <ul class="dropdown-menu">
105    <li ng-repeat-start="item in urltypedata"><a href="#" ng-click="bindcatelist($index,item.id,item.typename,1)" ng-bind="item.typename" ></a></li>
106    <li ng-repeat-end role="separator" class="divider"></li>
107   </ul>
108 </div>
109 
110 
111 
112     </div>
113 
114 
115 
116 
117     <!-- Collect the nav links, forms, and other content for toggling -->
118     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
119       <ul class="nav navbar-nav">
120         <li ng-class="{true:‘active‘,false:‘‘}[defaultchildrenCate==item.id]" ng-repeat="item in childrenCates"><a href="#" ng-click="cateDetail(item.id);" ng-bind="item.name"></a></li>
121       </ul>
122      
123     </div>
124     <!-- /.navbar-collapse -->
125 
126 
127 
128 </nav>
129 
130  
131       <div class="row">
132 
133         <div class="col-xs-12  col-sm-4 "  ng-repeat="item in contentdata">
134 
135    <div class="thumbnail">
136 
137     <img src="http://5203.pw/Public/{{item.img}}" alt=""   > 
138       <div class="caption">
139         <h5>{{item.name}}</h5>
140 
141         <p class=".hidden-xs" ><span class="label label-info">{{item.urltypeid|furltype}}</span>{{item.description|cutString}} 
142         </p>
143      <p><a href="{{item.url}}" target="_blank" class="btn btn-primary" role="button">前往</a> </p>
144      
145       </div>
146     </div>
147 
148     </div>
149 
150     
151   </div>
152 
153 
154 <div class="row"><nav class="text-center" ><ul class="pagination" id="pager" ></ul></nav></div>
155 
156 
157 
158 </div>
159 
160 
161  <script type="text/javascript">
162 $("#pinlayer").pin({padding: {top:60, bottom: 10}})
163  </script>
164 
165  <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ?
 " https://" : " http://");document.write(unescape("%3Cspan id=‘cnzz_stat_icon_1257978107‘%3E%3C/span%3E%3Cscript src=‘" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1257978107%26show%3Dpic‘ type=‘text/javascript‘%3E%3C/script%3E"));</script>
166 
167 </body>
168 </html>

View Code

簡單的入門就到這裏了希望可以幫到你。IT技術導航網 歡迎大家支持加入自己喜歡的站點~~。 技術交流群 127482131

Angular入門篇高速開發導航網

發的 nbsp 名稱 per angularjs user 開發 mar 聲明簡單介紹 AngularJS 是一個為動態WEB應用設計的結構框架，提供給大家一種新的開發應用方式。這樣的方式能夠讓你擴展HTML的語法。以彌補在構建動態WEB應用時靜態文本的

Angular入門篇高速開發導航網

簡單介紹

指令介紹

指令：ng-app

指令：ng-init

AngularJS表達式

指令：ng-model

指令：ng-bind

指令：ng-click

控制器

控制器

控制器

開發IT技術導航站點引入文件

Angular入門篇高速開發導航網

python入門篇：開發一個簡單的猜數字小遊戲

spring Boot學習入門篇-idea開發簡單的hello world例項

【入門篇】ANDROID開發之BUG專講

angular入門（基礎篇）

python全棧開發從入門到放棄之socket網絡編程基礎

小妖精的完美遊戲教室——人工智能，A*算法，導航網絡篇

前端入門：快速開發基於 HTML5 網絡拓撲圖應用

【helloworld】-微信小程序開發教程-入門篇【3】

【helloworld】-微信小程序開發教程-入門篇【4】

【helloworld】-微信小程序開發教程-入門篇【1】

【helloworld】-微信小程序開發教程-入門篇【5】

大資料開發----Hive（入門篇）

大資料開發----Fabric（入門篇）

chrome外掛開發（二）入門篇（content script

Dialog DA14585開發入門篇

帶你走入angular--angular入門（三、angularJS專案開發流程）

內網滲透測試的藝術[一]資訊收集(入門篇)

ESP32系列教程：《入門篇：ESP32開發環境搭建》--Windows下使用VScode搭建ESP32開發環境

入門chrome外掛開發教程和經驗總結，一篇就搞掂！

Angular入門篇高速開發導航網

簡單介紹

指令介紹

指令：ng-app

指令：ng-init

AngularJS表達式

指令：ng-model

指令：ng-bind

指令：ng-click

控制器

控制器

控制器

開發IT技術導航站點引入文件

相關推薦