AngularJs基本特性解析(一)
現在的前端項目中基本上都會用到angularjs框架，之前并不了解這個框架，也是因為最近接手的項目，所以打算好好的學習下它。之前都是搞pc端，現在接手的是移動端的項目，移動端UI框架用的是ionic＋vordova，沒有用bootstrap，主要做的是ios+安卓的app界面，ionic這個框架也不太了解，也需要花時間好好熟悉下。angularjs學習小白一枚，歡迎大神指正。
AngularJs是什么？
簡單來說，即javascript的一個框架，通過script標簽添加到網頁中。即我們使用angularjs時，需要引入下面的代碼。
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
通常建議把腳本放在<body>元素的底部，作用是：提高網頁加載速度。因為html加載不受制于腳本加載。
AngularJs的作用？
AngularJS 使得開發(fā)現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。
•AngularJS 把應用程序數據綁定到 HTML 元素。
•AngularJS 可以克隆和重復 HTML 元素。
•AngularJS 可以隱藏和顯示 HTML 元素。
•AngularJS 可以在 HTML 元素"背后"添加代碼。
•AngularJS 支持輸入驗證。
像現在移動端基本上使用單頁面的比較，就是利用angular的路由轉換進行的。像我們現在這個項目也是使用的單頁面。即在主頁面里面，即跳轉的頁面都在主頁面里面進行。截圖如下：
AngularJs表達式
AngularJS 表達式寫在雙大括號內：{{ expression }}。
AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數據。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量。
<!doctype html>
<!-- 標記angularjs處理整個html頁并引導應用 -->
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
<p>name:{{"ting"+"feng"}}</p>
<p>number:{{5+5}}</p>
<div ng-init="person={name:'tingfeng',age:'13'}">
<p>name:{{person.name}} age:{{person.age}}</p>
</div>
</body>
</html>
AngularJs在html中的應用
主要通過ng-directive擴展html，angularjs指令是以ng作為前綴的html屬性，包含有四大特性：mvc，模塊化，指令系統(tǒng)（directive），databinding
ng-init:該指令初始化angularjs應用程序變量。比如下面的列子：
<!doctype html> <!-- 標記angularjs處理整個html頁并引導應用 --> <html ng-app> <head> <meta charset="utf-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-init="name='tingfeng'"> <p>name is:<span ng-bind="name"></span></p> </div> </body> </html>
ng-app:該指令表示定義一個angularjs應用程序。通常放在html后面，也可以在局部使用ng-app指令，比如<div ng-app>則angularjs腳本僅在該div中運行,即表明從此處開始，所有內容均為angularjs進行管理。
ng-model:該指令是指把元素值（比如輸入框的值）綁定到應用程序中。
ng-bind：該指令是把應用程序數據綁定到html視圖中。使用相應的指令，即可利用angularjs操作html頁面。具體怎么使用，我們來看看代碼。
此時利用ng-model綁定到setname模型變量上，當在輸入框中輸入值時，相應的setname也會變化?？勺孕匈N碼測試。
關于$scope解釋
$scope是什么？有什么作用？如何使用它？
簡單來說，scope是一個pojo（plainoldjavascriptobject）,類似于一個對象，有屬性和方法， scope是一個pojo（plainoldjavascriptobject）,類似于一個對象，有屬性和方法，scope提供了watch()和 watch()和apply()工具方法。angularjs的mvc全部借助于$scope進行的。
特性：1.是表達式的執(zhí)行環(huán)境（或者作用域）
2.scope是一個樹型結構，與dom標簽平行，其上含有一個 scope是一個樹型結構，與dom標簽平行，其上含有一個rootscope處于最頂層。
3.scope會繼承父 scope會繼承父rootscope的屬性和方法。
4.$scope可以傳播事件，類似于dom，可以向上傳播也可以向下。
5.$scope不僅是mvc的基礎，也是后面實現雙向綁定的基礎。
AngularJs的組成部分
模板：即編寫的html和css的文件，展現應用的視圖。angularjs可以在html中構建自己的html標記！
控制器:與ajax不同，不需要另外編寫偵聽器或dom控制器，因為它已經內置到angularjs中。 好處：便于編寫，測試，維護和理解。
模型數據：模型是從angularjs做用域對象的屬性引申的。模型的數據可能是js對象，數組或基本類型，但都屬于angularjs作用域對象。
如何理解angularjs中的作用域？
即一個作用域可以視作模板，模型和控制器協(xié)同工作的粘接器，angularjs使用作用域，同時還有模板中的信息，數據模型和控制器。這些可以幫助模型和視圖分離，但他們兩者確實時同步的！任何對于模型的更改都會即時反映到視圖上，任何視圖的更改都會被立刻體現在模型中。
視圖：在angularjs中，一個視圖是模型通過html模板渲染之后的映射。即不論模型什么時候發(fā)生變化，angularjs會實時更新結合點，隨之更新視圖。
還是貼碼來看，更加直觀！
<!doctype html>
<html ng-app="HelloAngular">
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script>
//模塊化
var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular
myModule.controller("helloAngular", ['$scope',
function HelloAngular($scope) {
$scope.value = {
name: 'jiangting'
};
}
]);
</script>
</head>
<body>
<!-- mvc看angular-->
<div ng-controller="helloAngular"> －－控制器為helloAngular
<p>{{value.name}},hello!</p>
</div>
<!-- angular 模塊化 -->
</body>
</html>
我們來看看controller的應用，即控制器，即控制器通過操作數據，將其進行綁定，展現在html頁面上。
AngularJS 模塊（Module） 定義了 AngularJS 應用。
AngularJS 控制器（Controller） 用于控制 AngularJS 應用。
ng-app指令定義了應用, ng-controller 定義了控制器。我們用上面的列子來看：
AngularJS模塊定義應用：
var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular
angularjs控制器控制應用：
myModule.controller("helloAngular", ['$scope',
function HelloAngular($scope) {
$scope.value = {
name: 'jiangting'
};
}
]);
了解前端mvc
關于controller特性：
1.不要試圖去服用controller，一個控制器一般只負責一個小塊視圖
2.不要直接在controller中操作dom，這不是其職責
3.不要在controller里面做數據過濾的操作，ng有filter服務
4.不要在controller里面做數據格式化，ng有很好用的表單控件
5.controller是不會互相調用，控制器之間的交互會通過事件進行，通過 filter服務4.不要在controller里面做數據格式化，ng有很好用的表單控件5.controller是不會互相調用，控制器之間的交互會通過事件進行，通過scope進行調用
下面看下如何自定義指令系統(tǒng)，代碼如下：
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script>
//指令系統(tǒng)
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'E',
template: '<div>Hi everyone!</div>', --這里我們插入一段html標簽
replace: true
}
});
</script>
</head>
<body>
<hello></hello>
</body>
</html>
directive中，后面返回有三個參數，其中template中指所插入的html標簽?，F在我門自己來寫一段html代碼，看看如何將其變?yōu)閍ngularjs的寫法。
原靜態(tài)html代碼如下：
<ul> <li> <span>new1</span> <p>just a test page1</p> </li> <li> <span>new2</span> <p>just a test page2</p> </li> </ul>
將其改版為angularjs的寫法如下：
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script>
//$scope為控制器的作用域，
//angularjs作用域：可以視作模板，當應用啟動之后，會有一個根作用域被創(chuàng)建出來，而控制器的作用域是根作用域的一個典型后繼。
function newsCtrl($scope){
$scope.news=[
{"content":"new1",
"introduce":"just a test page1"},
{"content":"new2",
"introduce":"just a test page2"}
];
$scope.phones={
length:"4"
// 單個的屬性不能加分號，多個屬性用逗號分隔
};
}
</script>
</head>
<body ng-controller="newsCtrl">
<ul>
<li ng-repeat="new in news">
{{new.content}}
<p>{{new.introduce}}</p>
</li>
</ul>
</body>
</html>
以上所述是小編給大家介紹的AngularJs基本特性解析(一)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
本篇文章主要介紹了Angular2 父子組件通信方式的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
解決angular 使用原生拖拽頁面卡頓及表單控件輸入延遲問題
這篇文章主要介紹了angular 中使用原生拖拽頁面卡頓及表單控件輸入延遲問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了Angular 4.x 路由快速入門學習，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Angular項目過大時的合理拆分angular?split
這篇文章主要為大家介紹了Angular項目過大時的合理拆分angular?split示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家詳細介紹了Angular的事件和表單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
AngularJS之ionic 框架下實現 Localstorage本地存儲
這篇文章主要介紹了AngularJS之ionic 框架下實現 Localstorage本地存儲，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
AngularJS中的$parse服務與$eval服務用法實例
這篇文章主要介紹了AngularJS中的$parse服務與$eval服務用法,結合實例形式分析了AngularJS中$parse服務與$eval服務的功能、使用方法與相關注意事項,需要的朋友可以參考下2023-05-05
Angular實現的內置過濾器orderBy排序與模糊查詢功能示例
這篇文章主要介紹了Angular實現的內置過濾器orderBy排序與模糊查詢功能,涉及AngularJS過濾器、排序及字符串遍歷、查詢等相關操作技巧,需要的朋友可以參考下2017-12-12
詳解Angular5/Angular6項目如何添加熱更新(HMR)功能
這篇文章主要介紹了詳解Angular5/Angular6項目如何添加熱更新(HMR)功能，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了詳解angular2如何手動點擊特定元素上的點擊事件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10