编程创建listview,电脑上怎么创建编程

2020-10-13 阅读 叶竹萱整理

内容简介:uG编程顺序本文主要介绍使用angularjs创建单页应用程序的编程指南。Angularjs是一个流行的JavaScript库。对于越来越多的朋友,您可以参考单页应用程序概ug编程创建几何体怎么设置...

这篇文章主要介绍了使用AngularJS创建单页应用的编程指引,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下概述单页应用现在越来越受欢迎。

模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。

Angular可以帮助我们轻松创建此类应用简单应用我们打算创建一个简单的应用,涉及主页,关于和联系我们页面。

虽然Angular是为创建比这更复杂的应用而生的,但是本教程展示了许多我们在大型项目中需要的概念。

目标单页应用无刷新式页面变化每个页面包含不同数据虽然使用Javascript和Ajax可以实现上述功能,但是在我们的应用中,Angular可以使我们处理更容易。

文档结构-script.js-index.html-pages-----home.html-----about.html-----contact.htmlHTML页面这一部分比较简单。

我们使用Bootstrap和FontAwesome。

打开你的index.html文件,然后我们利用导航栏,添加一个简单布局。

?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748!--index.html--!DOCTYPEhtmlhtmlhead!--SCROLLS--!--loadbootstrapandfontawesomeviaCDN--linkrel=stylesheethref=//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css/linkrel=stylesheethref=//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css/!--SPELLS--!--loadangularviaCDN--scriptsrc=https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js/scriptscriptsrc=script.js/script/headbody!--HEADERANDNAVBAR--headernavclass=navbarnavbar-defaultdivclass=containerdivclass=navbar-headeraclass=navbar-brandhref=/AngularRoutingExample/a/divulclass=navnavbar-navnavbar-rightliahref=#iclass=fafa-home/iHome/a/liliahref=#abouticlass=fafa-shield/iAbout/a/liliahref=#contacticlass=fafa-comment/iContact/a/li/ul/div/nav/header!--MAINCONTENTANDINJECTEDVIEWS--divid=main!--angulartemplating--!--thisiswherecontentwillbeinjected--/div!--FOOTER--footerclass=text-centerViewthetutorialonahref=http://scotch.io/tutorials/angular-routing-and-templating-tutorialScotch.io/a/footer/body/html在页面超链接中,我们使用#。

我们不希望浏览器认为我们实际上是链接到about.html和contact.html。

Angular应用模型和控制器此时我们准备设置我们的应用。

让我们先来创建angular模型和控制器。

关于模型和控制器,请查阅文档已获得更多内容。

首先,我们需要用javascript来创建我们的模型和控制器,我们将此操作放到script.js中:?1234567891011//script.js//createthemoduleandnameitscotchAppvarscotchApp=angular.module('scotchApp',[]);//createthecontrollerandinjectAngular's$scopescotchApp.controller('mainController',function($scope){//createamessagetodisplayinourview$scope.message='EveryonecomeandseehowgoodIlook!';});接下来让我们把模型和控制器添加到我们的HTML页面中,这样Angular可以知道如何引导我们的应用。

为了测试功能有效,我们也会展示一个我们创建的变量$scope.message的值。

?123456789101112131415161718192021222324252627282930!--index.html--!DOCTYPEhtml!--defineangularapp--htmlng-app=scotchApphead!--SCROLLS--!--loadbootstrapandfontawesomeviaCDN--linkrel=stylesheethref=//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css/linkrel=stylesheethref=//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css/!--SPELLS--!--loadangularviaCDN--scriptsrc=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js/scriptscriptsrc=//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js/scriptscriptsrc=script.js/script/head!--defineangularcontroller--bodyng-controller=mainController...!--MAINCONTENTANDINJECTEDVIEWS--divid=main{{message}}!--angulartemplating--!--thisiswherecontentwillbeinjected--/div在main这个div层中,我们现在可以看到我们创建的消息。

知道了我们的模型和控制器设置完毕并且Angular可以正常运行,那么我们将要开始使用这一层来展示不同的页面。

将页面注入到主布局中ng-view是一个用来包含当前路由(/home,/about,or/contact)的模板的angular指令,它会获得基于特定路由的文件并将其诸如到主布局中(index.html).我们将会想div#main中的站点加入ng-view代码来告诉Angular将我们渲染的页面放在哪里.?12345678910111213!--index.html--...!--MAINCONTENTANDINJECTEDVIEWS--divid=main!--angulartemplating--!--thisiswherecontentwillbeinjected--divng-view/div/div...配置路由和视图由于我们在创建一个单页应用,并且不希望页面刷新,那么我们会用到Angular路由的能力。

让我们看一下我们的Angular文件,并添加到我们的应用中。

我们将会在Angular中使用$routeProvider来处理我们的路由。

通过这种方式,Angular将会处理所有神奇的请求,通过取得一个新文件并将其注入到我们的布局中。

AngularJS1.2和路由在1.1.6版本之后,ngRoute模型不在包含在Angular当中。

你需要通过在文档开头声明该模型来使用它。

该教程已经为AngularJS1.2更新:?123456789101112131415161718192021222324252627282930313233343536373839404142//script.js//createthemoduleandnameitscotchApp//alsoincludengRouteforallourroutingneedsvarscotchApp=angular.module('scotchApp',['ngRoute']);//configureourroutesscotchApp.config(function($routeProvider){$routeProvider//routeforthehomepage.when('/',{templateUrl:'pages/home.html',controller:'mainController'})//routefortheaboutpage.when('/about',{templateUrl:'pages/about.html',controller:'aboutController'})//routeforthecontactpage.when('/contact',{templateUrl:'pages/contact.html',controller:'contactController'});});//createthecontrollerandinjectAngular's$scopescotchApp.controller('mainController',function($scope){//createamessagetodisplayinourview$scope.message='EveryonecomeandseehowgoodIlook!';});scotchApp.controller('aboutController',function($scope){$scope.message='Look!Iamanaboutpage.';});scotchApp.controller('contactController',function($scope){$scope.message='Contactus!JK.Thisisjustademo.';});现在,我们已经通过$routeProvider定义好了我们的路由。

通过配置你会发现,你可以使用指定路由、模板文件甚至是控制器。

通过这种方法,我们应用的每一部分都会使用Angular控制器和它自己的视图。

清理URL:angular默认会将一个井号放入URL中。

为了避免这种事情,我们需要使用$locationProvider来启用HTMLHistoryAPI.它将会移除掉hash并创建出漂亮的URL。

我们的主页将会拉取home.html文件.About和contact页面将会拉取它们关联的文件.现在如果我们查看我们的应用,并点击导航,我们的内容将会照我们的意思进行改变.要完成这个教程,我们只需要定义好将会被注入的页面就行了.我们也将会让它们每一个都展示来自与他们相关的控制器的消息.?1234567891011121314151617181920!--home.html--divclass=jumbotrontext-centerh1HomePage/h1p{{message}}/p/div!--about.html--divclass=jumbotrontext-centerh1AboutPage/h1p{{message}}/p/div!--contact.html--divclass=jumbotrontext-centerh1ContactPage/h1p{{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快照的指南.

作者给您推荐的内容
  1. 下面介绍用PS将图片做成动态的方法,希望本指南能帮到大家。01、启动PS;打开新建文档的界面,把一张图片拖入到这个界面中。02、放开鼠标,即自动生成文档,图片显示在画布上。03、...

  2. 金属切削原理与刀具其实方法比较简单,也没有花哨的制作方法。我知道金属可以做到这一点。如果我有时间,任何人都可以做一个漂亮的男人。首先看最后的效果:1。用钢笔工具画出...

  3. QQ邮箱是腾讯公司在2002年推出的邮箱服务,是中国国内使用人数最多的邮箱产品之一。01、在电脑上打开QQ登录面板,输入自己的账号密码进行登录。02、登录之后再QQ主面板的最上方,找到邮件的图...

  4. twill weave一、IIS(Internet信息服务)的安装和配置,以Windows Server 2003(以下简称Win2003)为例。因为Win2003是一个服务器级操作weaver...

  5. 大多数人认为Ubuntu通过Ubuntu软件中心彻底改变了dpkg包管理Ubuntu软件管理丢失的功能详解。毫无疑问,按照大多数人的标准,软件中心是用户友好的。但真的是这样吗?本文将介绍...

  6. 今天小编要和大家分享的是浏览器收藏栏在哪里,希望能够帮助到大家。01、首先在我们的手机桌面上找到搜狗浏览器并点击它,如图所示。02、然后点击屏幕右下方的三条横杆,如下图所示。03、...

  7. exp()什么运算为了解决这个问题,我们可以使用宏表函数evaluate函数。异或运算公式...

  8. 01、在2017GTC的时候,老黄就发布了基于Volta架构进行研发的TeslaV100GPU,在当时是5120个CUD...

  9. 手机淘宝投诉卖家怎么投诉电话在网络上买东西虽然说是比较便捷,但偶尔也会遇到一些退货及退款的问题,或是因为一些原因不给退货退款造成的纠纷或是遇到一些非法卖家的情况,...

  10. Excel软件01、首先,我们打开Excel表格文件,选中需要进行修改的单元格。02、接下来,点击软件开始栏目里的“格式”选项,点击之...