現在的前端項目中基本上都會用到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 使得開發現代的單一頁面應用程序(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,模塊化,指令系統(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也會變化。可自行貼碼測試。
關於$scope解釋
$scope是什麼?有什麼作用?如何使用它?
簡單來說,scope是一個pojo(plainoldjavascriptobject),類似於一個對象,有屬性和方法, scope是一個pojo(plainoldjavascriptobject),類似於一個對象,有屬性和方法,scope提供了watch()和watch()和apply()工具方法。 angularjs的mvc全部借助於$scope進行的。
特性:1.是表達式的執行環境(或者作用域)
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中的作用域?
即一個作用域可以視作模板,模型和控制器協同工作的粘接器,angularjs使用作用域,同時還有模板中的信息,數據模型和控制器。這些可以幫助模型和視圖分離,但他們兩者確實時同步的!任何對於模型的更改都會即時反映到視圖上,任何視圖的更改都會被立刻體現在模型中。
視圖:在angularjs中,一個視圖是模型通過html模板渲染之後的映射。即不論模型什麼時候發生變化,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", []); --控制模板HelloAngularmyModule.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", []); --控制模板HelloAngularangularjs控制器控制應用:
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進行調用
下面看下如何自定義指令系統,代碼如下:
<!doctype html><html ng-app><head><meta charset="utf-8"><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script><script>//指令系統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標籤。現在我門自己來寫一段html代碼,看看如何將其變為angularjs的寫法。
原靜態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作用域:可以視作模板,當應用啟動之後,會有一個根作用域被創建出來,而控制器的作用域是根作用域的一個典型後繼。 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基本特性解析(一),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!