您現在的位置是:電腦技術吧?>? 編程技術 ??>??編程創建一個Rect,編程創建listview??>??正文詳情

編程創建一個Rect,編程創建listview

毋晨蓓2019-12-05 14:01:58 人圍觀
簡介uG編程順序本文主要介紹使用angularjs創建單頁應用程序的編程指南。Angularjs是一個流行的JavaScript庫。對于越來越多的朋友,您可以參考單頁應用程序概ug編程創建幾何體怎么設置

這篇文章主要介紹了使用AngularJS創建單頁應用的編程指引,AngularJS是一款高人氣的JavaScript庫,需要的朋友可以參考下  概述  單頁應用現在越來越受歡迎。

模擬單頁應用程序行為的網站都能提供手機/平板電腦應用程序的感覺。

Angular可以幫助我們輕松創建此類應用  簡單應用  我們打算創建一個簡單的應用,涉及主頁,關于和聯系我們頁面。

雖然Angular是為創建比這更復雜的應用而生的,但是本教程展示了許多我們在大型項目中需要的概念。

  目標  單頁應用  無刷新式頁面變化  每個頁面包含不同數據  雖然使用Javascript和Ajax可以實現上述功能,但是在我們的應用中,Angular可以使我們處理更容易。

  文檔結構  - script.js   - index.html   - pages   ----- home.html  ----- about.html  ----- contact.html  HTML頁面  這一部分比較簡單。

我們使用Bootstrap和Font Awesome。

打開你的index.html文件,然后我們利用導航欄,添加一個簡單布局。

  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 !-- index.html -- !DOCTYPE html html head !-- SCROLLS -- !-- load bootstrap and fontawesome via CDN -- link rel=stylesheet href=//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css / link rel=stylesheet href=//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css / !-- SPELLS -- !-- load angular via CDN -- script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js/script script src=script.js/script /head body !-- HEADER AND NAVBAR -- header nav class=navbar navbar-default div class=container div class=navbar-header a class=navbar-brand href=/Angular Routing Example/a /div ul class=nav navbar-nav navbar-right lia href=#i class=fa fa-home/i Home/a/li lia href=#abouti class=fa fa-shield/i About/a/li lia href=#contacti class=fa fa-comment/i Contact/a/li /ul /div /nav /header !-- MAIN CONTENT AND INJECTED VIEWS -- div id=main !-- angular templating -- !-- this is where content will be injected -- /div !-- FOOTER -- footer class=text-center View the tutorial on a href=http://scotch.io/tutorials/angular-routing-and-templating-tutorialScotch.io/a /footer /body /html   在頁面超鏈接中,我們使用#。

我們不希望瀏覽器認為我們實際上是鏈接到about.html和contact.html。

  Angular應用  模型和控制器  此時我們準備設置我們的應用。

讓我們先來創建angular模型和控制器。

關于模型和控制器,請查閱文檔已獲得更多內容。

  首先,我們需要用javascript來創建我們的模型和控制器,我們將此操作放到script.js中:  ? 1 2 3 4 5 6 7 8 9 10 11 // script.js // create the module and name it scotchApp var scotchApp = angular.module('scotchApp', []); // create the controller and inject Angular's $scope scotchApp.controller('mainController', function($scope) { // create a message to display in our view $scope.message = 'Everyone come and see how good I look!'; });   接下來讓我們把模型和控制器添加到我們的HTML頁面中,這樣Angular可以知道如何引導我們的應用。

為了測試功能有效,我們也會展示一個我們創建的變量$scope.message的值。

  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 !-- index.html -- !DOCTYPE html !-- define angular app -- html ng-app=scotchApp head !-- SCROLLS -- !-- load bootstrap and fontawesome via CDN -- link rel=stylesheet href=//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css / link rel=stylesheet href=//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css / !-- SPELLS -- !-- load angular via CDN -- script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js/script script src=//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js/script script src=script.js/script /head !-- define angular controller -- body ng-controller=mainController ... !-- MAIN CONTENT AND INJECTED VIEWS -- div id=main {{ message }} !-- angular templating -- !-- this is where content will be injected -- /div   在main這個div層中,我們現在可以看到我們創建的消息。

知道了我們的模型和控制器設置完畢并且Angular可以正常運行,那么我們將要開始使用這一層來展示不同的頁面。

  將頁面注入到主布局中  ng-view 是一個用來包含當前路由(/home, /about, or /contact)的模板的angular指令, 它會獲得基于特定路由的文件并將其諸如到主布局中(index.html).  我們將會想div#main中的站點加入ng-view代碼來告訴Angular將我們渲染的頁面放在哪里.  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 !-- index.html -- ... !-- MAIN CONTENT AND INJECTED VIEWS -- div id=main !-- angular templating -- !-- this is where content will be injected -- div ng-view/div /div ...   配置路由和視圖  由于我們在創建一個單頁應用,并且不希望頁面刷新,那么我們會用到Angular路由的能力。

  讓我們看一下我們的Angular文件,并添加到我們的應用中。

我們將會在Angular中使用$routeProvider來處理我們的路由。

通過這種方式,Angular將會處理所有神奇的請求,通過取得一個新文件并將其注入到我們的布局中。

  AngularJS 1.2 和路由  在1.1.6版本之后,ngRoute模型不在包含在Angular當中。

你需要通過在文檔開頭聲明該模型來使用它。

該教程已經為AngularJS1.2更新:  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 // script.js // create the module and name it scotchApp // also include ngRoute for all our routing needs var scotchApp = angular.module('scotchApp', ['ngRoute']); // configure our routes scotchApp.config(function($routeProvider) { $routeProvider // route for the home page .when('/', { templateUrl : 'pages/home.html', controller : 'mainController' }) // route for the about page .when('/about', { templateUrl : 'pages/about.html', controller : 'aboutController' }) // route for the contact page .when('/contact', { templateUrl : 'pages/contact.html', controller : 'contactController' }); }); // create the controller and inject Angular's $scope scotchApp.controller('mainController', function($scope) { // create a message to display in our view $scope.message = 'Everyone come and see how good I look!'; }); scotchApp.controller('aboutController', function($scope) { $scope.message = 'Look! I am an about page.'; }); scotchApp.controller('contactController', function($scope) { $scope.message = 'Contact us! JK. This is just a demo.'; });   現在,我們已經通過$routeProvider定義好了我們的路由。

通過配置你會發現,你可以使用指定路由、模板文件甚至是控制器。

通過這種方法,我們應用的每一部分都會使用Angular控制器和它自己的視圖。

  清理URL: angular默認會將一個井號放入URL中。

為了避免這種事情,我們需要使用$locationProvider來啟用 HTML History API. 它將會移除掉hash并創建出漂亮的URL。

我們的主頁將會拉取 home.html 文件. About 和 contact 頁面將會拉取它們關聯的文件. 現在如果我們查看我們的應用,并點擊導航,我們的內容將會照我們的意思進行改變.  要完成這個教程,我們只需要定義好將會被注入的頁面就行了. 我們也將會讓它們每一個都展示來自與他們相關的控制器的消息.  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 !-- home.html -- div class=jumbotron text-center h1Home Page/h1 p{{ message }}/p /div !-- about.html -- div class=jumbotron text-center h1About Page/h1 p{{ message }}/p /div !-- contact.html -- div class=jumbotron text-center h1Contact Page/h1 p{{ message }}/p /div   本地運行: Angular路由只會在你為其設置的環境后才會起效。

你要確保是使用的 http://localhost 或者是某種類型的環境. 否則angular會說跨域請求支持HTTP.  Angular應用的動畫  一旦你把所有的路由都完成之后,你就能開始把玩你的站點并向其加入動畫了. 為此,你需要使用angular提供的 ngAnimate 模塊. 后面你就可以用CSS動畫來用動畫的方式切換視圖了.  單頁面App上的SEO  理想情況下,此技術可能會被用在有用戶登錄后的應用程序中。

你當然不會真的想要特定用戶私人性質的頁面被搜索引擎索引. 例如,你不會想要你的讀者賬戶,Facebook登錄的頁面或者博客CMS頁面被索引到.  如果你確實像針對你的應用進行SEO,那么如何讓SEO在使用js構建頁面的應用/站點上起效呢? 搜索引擎難于處理這些應用程序因為內容是由瀏覽器動態構建的,而且對爬蟲是不可見的.  讓你的應用對SEO友好  使得js單頁面應用對SEO友好的技術需要定期做維護. 根據官方的Google 建議, 你需要創建HTML快照. 其如何運作的概述如下:  爬蟲會發現一個友好的URL(http://scotch.io/seofriendly#key=value)  然后爬蟲會想服務器請求對應這個URL的內容(用一種特殊的修改過的方式)  Web服務器會使用一個HTML快照返回內容  HTML快照會被爬蟲處理  然后搜索結果會顯示原來的URL  更多關于這個過程的信息,可以去看看Google的 AJAX爬蟲 和他們有關創建HTML快照 的指南.

版權聲明:本文由 毋晨蓓 整理編輯。

原標題:編程在形參中創建,如何通過編程創建數據庫

轉載注明出處:http://www.dn9ww09s.icu/program/15169.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 數據結構 鏈表,單鏈表數據結構

    數據結構 鏈表,單鏈表數據結構 相關圖片鏈表本文主要介紹JavaScript中的數據結構和算法(3):鏈表。本文分別介紹了單鏈表和雙鏈表的代碼示例,以及添加節和刪除節的代碼示例。我們可以看到JavaScr什么是鏈表...

  • iptables 端口轉發,iptables本地端口轉發

    iptables 端口轉發,iptables本地端口轉發 相關圖片centos6端口轉發本地接口IP 61.144.14.72的轉發端口3389到116.6.73.229的端口3389(主要是61.144.14.72的接入端口3389,跳到116.iptables端口轉發不起作用...

  • 鎖和事務,事務一定鎖表嗎

    鎖和事務,事務一定鎖表嗎 相關圖片事務和數據庫鎖的聯系SQL server中的事務和鎖事務都是關于原子性的。原子性的概念意味著某物可以被視為一個單元。從數據庫的角度來看,它是指一個或多個應該執行或不執行的語句的...

  • ajax,ajax如何處理跨域問題

    ajax,ajax如何處理跨域問題 相關圖片java處理ajax請求本文主要介紹jQuery中模擬圖像的ajaxprefilter和ajaxtransport處理。本文直接給出了仿真實現代碼,其中包含了詳細的注釋。朋友請參考“1ajax json...

  • sysdba,expdp sysdba

    sysdba,expdp sysdba 相關圖片dba和sysdba一。Oracle可以通過兩種方式對SYSDBA/sysoper用戶進行身份驗證:1)操作系統級身份驗證:登錄Oracle數據庫主機,使用以下用戶登錄,然后直接使oracle賦予sysdba權限...

  • 什么是位圖索引,創建位圖索引

    什么是位圖索引,創建位圖索引 相關圖片位圖索引的主要優缺點什么是位圖索引位圖索引的一些特性?位圖索引的優缺點?讓我們看看低比特圖像掃描的例子。查詢計劃----------------------------------索引...

  • 實例卡,實例

    實例卡,實例 相關圖片實例文本Example off: V $diag_infosphere name = sqltname.sqlselect value in 'default trac什么是示例圖...

  • gaming mouse鼠標宏,scream鼠標

    gaming mouse鼠標宏,scream鼠標 相關圖片mouse0是哪個鍵本文主要介紹了JavaScript和jQuery的鼠標-鼠標事件冒泡處理,總結了鼠標事件的一些結論,并分別給出了JavaScript和jQuery的測試代碼。您mouse3是哪個鍵...

  • 控制文件損壞,oracle控制文件

    控制文件損壞,oracle控制文件 相關圖片增加控制文件出現的現象是系統無法登錄,沒有用戶可以,懷疑數據庫有問題,輸入服務器,運行sqlplususername/password,無法輸入數據庫,提示輸入用戶名。重新重建控制文件...

  • decode函數的用法,decode函數實例

    decode函數的用法,decode函數實例 相關圖片oracle decode 用模糊decode函數相當于條件語句(if)。它將輸入值與函數中的參數列表進行比較,并根據輸入值返回相應的值。函數的參數列表由多個值及其相應的結果值組成。當然,如果...

熱評文章

  • 如何進行sql優化,sql查詢優化

    如何進行sql優化,sql查詢優化 相關圖片sql or 優化昨天,我半夜收到一條SQL消息。反應很慢。我很生氣。經過查詢,我只需要三個月運行一次這個SQL。你必須在法定假日經營嗎?SQL如下(非常長)?123456789復雜sql優化...

  • oracle索引怎么用,oracle索引的使用

    oracle索引怎么用,oracle索引的使用 相關圖片oracle視圖索引刪除大量表后,可能會有大量可用空間可回收。請參考以下計算方法:更新統計分析表計算統計;計算碎片空間選擇表名,(塊*8)oracle如何查看索引...

  • curl header,curl打印返回header

    curl header,curl打印返回header 相關圖片curl telnet本文主要介紹了phpcurl偽造IP地址和頭信息代碼的實例。本文給出了服務器端和客戶端的實現代碼,提供了偽造功能和服務器端檢測代碼。你可以給你的朋友們指卷發。雖curl coo...

  • asp 代碼,asp開源代碼

    asp 代碼,asp開源代碼 相關圖片怎樣將asp源代碼這是一個簡單的ASP教程,添加數據代碼程序,接受用戶提交的數據,然后保存到數據庫教程非常方便,哦,讓我們看一個詳細的例子。例如,在“名稱”字段中輸入用戶...

  • jsp遍歷,jsp遍歷for

    jsp遍歷,jsp遍歷for 相關圖片jsp中迭代器遍歷數據如果foreach中的items類型是map或collection,如何使用增強for循環?首先,創建一個label處理器類并定義兩個屬性,string VaRjQuery遍歷li...

  • shutdown用不了,shutdown

    shutdown用不了,shutdown 相關圖片運行shutdown本文主要介紹了語域的使用?關閉?函數在PHP中攔截致命錯誤示例。當我們在做這個項目的時候,你可以向我們的朋友請教,有時由于粗心大意會發生致命的錯誤。如果顯示錯...

  • 程序員成長之路,一個程序員的成長之路

    程序員成長之路,一個程序員的成長之路 相關圖片程序員上升之路一個常見的錯誤是將JSP視為簡化的Java,這是不可能的。(實際上,JSP是一個簡化的servlet)。程序員通常嘗試直接學習jsp而不學習所需的支持技能。JSJava工程師工資成長之...

  • 你能干大事,人能干啥

    你能干大事,人能干啥 相關圖片能干的人都是怎樣的PHP還能夠在PHP中做一些偉大的事情。本文主要介紹了在PHP中進行編譯碼的一些細節,這些細節在PHP中也能起到很大的作用。介紹了ASCII編解碼、URL編解碼太能干的人會...

  • asp與html,asp比html多了哪些

    asp與html,asp比html多了哪些 相關圖片html運行asp代碼如下:函數gethttpxml()set HTTP=server.createobject(msxml2)。服務器xmlhttp)dim lresolve、html改成asp...

  • 如何訪問數據庫,數據庫訪問

    如何訪問數據庫,數據庫訪問 相關圖片數據庫有哪些現在有很多新的JSP用戶經常問如何連接數據庫,如何出錯?所以我把重點放在這篇文章上供你參考。實際上,將所有的數據庫邏輯都放在JSP中并不是一個好方法,但是對于...

關注微信

变脸官网查询