第二講ionic項目簡介以及angularjs基礎(chǔ)

html5框架+CrosswalkappAngularjs基礎(chǔ)（初步認(rèn)識了解Angularjs） oAngularJSAngularJSAngularJS合作： 合作： (IT營)AngularJSMiskoHeveryAdamAbrons2009年開發(fā)，后來成為了公司的項目。AngularJS彌補(bǔ)了HTML在構(gòu)建應(yīng)用方面的不足，其通過使用標(biāo)識符（directives）WebHTMLHTML來聲明動態(tài)內(nèi)容，從而使得Web開發(fā)和測試工作變得更加容易。MiskoAngularjsAngularJSHTMLAngularJS使得開發(fā)現(xiàn)代的單一頁面應(yīng)用程序（SPAs：SinglePageApplications）AngularJSHTMLAngularJSHTMLAngularJSHTMLAngularJSHTML元素"背后"AngularJSUrlrouting，use AngularJSExtensions&DirectivesAngularJSoAngularjs正常打不開但是打不開大家都懂的 Angularjs angular.js2.ng-appangularDOM<!DOCTYPE<!DOCTYPE<divng- <png-AngularJS屬性以ng-開頭，但是您可以使用data-ng-來讓網(wǎng)頁對HTML5有效俗話說下面的指令可以在開頭加上data- 例如ng_app等同于data_ng_app HTML HTMLdisabledHTMLHTML ng-appAngularJSng-app指令在網(wǎng)頁加載完畢時會自動引導(dǎo)（自動初始化）ng-app如何通過一個值（ng-app="myModule"）ng-modelng-modelHTMLng-model為應(yīng)用程序數(shù)據(jù)提供類型驗證（number、、required）。為HTML元素提供CSS類。HTMLHTMLng_bindHTML<!DOCTYPE<!DOCTYPE<divng- ：<inputtype="text"ng-<png-<script<!DOCTYPE<!DOCTYPE<divng- ：<inputtype="text"ng-<script：當(dāng)網(wǎng)頁加載完畢，AngularJSng-appAngularJS，<div>AngularJS的"所有者"ng-bindnameinnerHTMLng-initng-initAngularJS稍后您將學(xué)習(xí)有關(guān)控制器和模塊的知識。<div<divng-app=""ng- <spanng- <div<divdata-ng-app=""data-ng- <spandata-ng-AngularJS表達(dá)式寫在雙大括號內(nèi)：expressionAngularJSHTMLng-bindAngularJS將在表達(dá)式書寫的位置"輸出"<!DOCTYPE<divng-<p>5<!DOCTYPE<divng-<p>55<scriptAngularJS<div<divng-app=""ng-<p>ty*costAngularJS<div<divng-app=""ng- ：{{firstName+""+lastNameAngularJS<div<divng-app=""ng-<p>.lastNameAngularJS<div<divng-app=""ng-<p>points[2AngularJSAngularJSAngularJSJavaScript對象AngularJSng-controllerJavaScriptJavaScript控制器的$scope是控制器所指向的應(yīng)用程序HTML元素。我們可以把我們的model存放在scope上，來達(dá)到雙向你綁定。<!DOCTYPE<!DOCTYPE<divng-<divng-名:<inputtype="text"ng- 姓:<inputtype="text"ng- :.firstName+""=lastName:}<script：AngularJSng-app<div> Controller是一個標(biāo)準(zhǔn)的JavaScript對象的構(gòu)造函數(shù)。 對象有兩個屬性：firstNamelastNameng-model指令綁定輸入域到控制器的屬性（firstNamelastName）<!DOCTYPE<!DOCTYPE<divng-app=""ng-名<inputtype="textng-姓<inputtype="textng-: {firstName:"John",lastName:"Doe",varx= returnx.firstName+""+}}<scriptng-repeatng-<div<divng-app=""ng-<ling-repeat="xin{{+','+x.country<script$s=} 1.get<div<divng-app=""ng-<ling-repeat="xin{{x.Name+','+x.Country} (response){$s= varconfig={params:{id:'5'}}$s= =} AngularJSAngularJS （下面的兩個實例，使用前面章節(jié)中提到的控制器<div<divng-app=""ng- .lastName|uppercase<div<divng-app=""ng- .lastName|lowercasecurrency<div<divng-app="ng-controller="costController">數(shù)量：<inputtype="numberng-model="ty">價格：<inputtype="number"ng-model="price"><p>總價={{ ty*price)|currency<div<divng-app=""ng-<ling-repeat="xinnames|{{+','+x.countryfilter<div<divng-app=""ng-<p><inputtype="text"ng-<ling-repeat="xinnames|filter:name|{{(|uppercase)+','+x.countryAngularjs 為了解決這個問題，AngularJS普通的控制器和AngularJS<!DOCTYPE<!DOCTYPE<divng-app=""ng-{{firstName+""+lastNamefunctionmyCtrl($scope)$scope.firstName=$scope.lastName=}<script<!DOCTYPE<!DOCTYPE<script<divng-app="myApp"ng-{{firstName+""+lastNamevarapp=angular.module("myApp",AngularJS首