angularjs state.go 参数 刷新页面 参数就获取不到了 怎么办

angularjs state.go 参数 刷新页面 参数就获取不到了 怎么办,第1张

设置路由控制器

$statePrividerstate({})这个方法中的参数是对象,其中有项属性配置是cache:true/false, ,默认为true。在此,将其配置为false,此时,这个状态就不会有缓存,也就可以实现每次处于该状态时刷新页面,也就相当于实现了强制刷新。

state('marketBeian', {

url: '/market/beian',

templateUrl: 'views/market/beianhtml',

cache:false,

controller: 'MarketBeianCtrl',

data: {

title: '作业备案信息管理'

}

})

使用Angularjs获取数组中的值并传值到html页面中显示出来

js页面的数组如下:

var freetrial = [{

goodsid:"xy0001",

imgurl:"img/178jpg",

goodstitle:"好娃娃牌安全椅",

quantity:"10份",

cost:896,

linkt:"sdcx()",

status:0},

{

goodsid:"xy0002",

imgurl:"img/178jpg",

goodstitle:"时尚包",

quantity:"10份",

cost:298,

status:1},

{

goodsid:"xy0003",

imgurl:"img/178jpg",

goodstitle:"好娃娃",

quantity:"10份",

cost:896,

linkt:"sdcx()",

status:0}

];

html页面:

<div class=“xsy” id="xy0001">

<a href="{{sdcx()}}"><img src="{{imgurl}}"></a>

<h1>{{goodstitle}}</h1>

</div>

需要判断的是如果div的id==数组里的goodsid且status=0,就把数组的值传到页面对应的地方。要使用Angularjs来实现,不能使用jQuery。求大神指点要怎么做,如果我的思路不对,有没有其他更好的方法?用来保存数据的数组肯定是需要的,jQuery也不能用。

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<!DOCTYPE html><html ng-app="test"><head> <title>Freetrial</title></head><body ng-controller="FreetrialController"> <div class="xsy" ng-repeat="item in freetrial" ng-if="use('xy0001', 0, item)" id="xy0001"> <a href="{{itemsdcx()}}"><img src="">{{itemimgurl}}</a> <h1>{{itemgoodstitle}} </h1> </div> <script type="text/javascript" src="/lib/angularminjs"></script> <script> var app = angularmodule('test', []); appcontroller('FreetrialController', function($scope){ $scopeuse = function(id, status, item){ var flag = false; if(!item || (id === itemgoodsid && status === itemstatus)){ flag = true; } return flag; } $scopefreetrial = [ { goodsid:"xy0001", imgurl:"img/178jpg", goodstitle:"好娃娃牌安全椅", quantity:"10份", cost:896, linkt:"sdcx()", status:0 }, { goodsid:"xy0002", imgurl:"img/178jpg", goodstitle:"时尚包", quantity:"10份", cost:298, status:1 }, { goodsid:"xy0003", imgurl:"img/178jpg", goodstitle:"好娃娃", quantity:"10份", cost:896, linkt:"sdcx()", status:0 } ] }); </script></body></html><!--还可以从数据上着手, 先把数据按照需求重组,再输出到视图-->

追问:请问如果我需要在点击这个a标签时,把div的id post出去,让另外一个js页面接收到,然后在数组匹配符合的数组数据输出到html页面。这个要怎么实现?

AngularJs ng-if的用法

123456789101112131415 <!DOCTYPE html><html ng-app><head> <title>checked</title></head><body> <input type="checkbox" ng-model="checked">点击试试 <div ng-if="checked">content</div> <script type="text/javascript" src="/angularminjs"></script> </body></html>

angularjs中关于checkbox的问题

烦恼

我想设置当checkbox选中之后执行一段逻辑代码,我写的是if($scope(checkbox1)checked){`````}但是不行我想问的是这个if逻辑应该怎么写怎么表达他被选中了???

123456789101112131415161718192021222324 <!DOCTYPE html><html ng-app="test"><head> <title>angularJs-checkbox</title></head><body> <div ng-controller="CheckCtrl"> <input type="checkbox" ng-model="chk" ng-click="check(chk)"/> </div> <script type="text/javascript" src="/js/angularminjs"></script> <script type="text/javascript"> //直接判断checkbox的model即可 var test = angularmodule('test', []); testcontroller('CheckCtrl', function($scope){ //设置checkbox默认不选中 $scopechk = false; $scopecheck = function(val){ !val alert('选中') : alert('未选中'); } }) </script></body> </html>

如何利用AngularJS服务接入外部API

除了对HTML进行扩展的能力之外,AngularJS还提供一套简便途径、帮助我们与外部API实现交互。利用其服务与GitHub的API相对接,进而创建一套简单的库浏览器。

现在用这套基础HTML模板为起点

一、准备工作

现在将AngularJS脚本添加到该文档的<head>当中:

在此之后,可以在将这套CCS样式添加到行内或者独立的文件当中:

其中不存在任何多余的内容、只保留最基础的布局方案——将搜索栏置于右侧、库信息位于中央、用户库同样置于右侧。还需要将对应代码行打包至<pre>标签当中,此后还要利用它显示README文件内容——因为这些内容通常来自GitHub Flavored Markdown、而且其中一部分代码行与用户库列表存在重叠。

可以向其中添加更多样式以提升成果的视觉效果——但以上截图都采取最基本的外观设计。

在未来需要编写的JavaScript代码置于本文档的<head>当中或者为其建立独立文件,但独立文件仍然需要处于AngularJS脚本之下

二、模块

现在可以为自己的应用程序创建一个模块:

接下来利用ngApp指令将其添加到<body>标签当中:

三、控制器

需要为自己的应用程序准备一套控制器。为了简化创建流程,将只为应用准备一套控制器,这样就不必考虑如何在不同控制器之间进行信息传递了

四、基础服务

需要对自己的GitHub服务进行定义:

将使用appfactory()方法,这样就能保证返回对象附带几个以后将会用到的方法。将使用$>

五、搜索库

服务中的第一项方法负责利用GitHub API对库进行搜索。使用服务非常简单(这项函数能够进入由制造函数返回的对象):

$>

$>

六、搜索栏

为了使用之前几步中定义完成的函数,需要在自己的HTML当中添加搜索栏。相关代码非常简单,如下所示:

使用ngModel指令将该输入栏中的值指向至Scope query变量,并在用户按下回车键后利用ngKeyup调用executeSearch()函数(这样$eventkeyCode == 13就会进行比较)。无法在AngularJS表达式中使用条件语句,但一条简单的逻辑运算符(AND)足以很好地完成这项任务。

在输入域下面,使用ngRepeat来显示搜索结果。将显示该库的完整名称与描述(如果需要显示其它不同内容,可以点击此处查看GitHub API说明文档中的可用域)。

还使用ngClick通过该库的完整名称来调用openRepo()函数,这样就能显示与之相关的信息,稍后再对该函数进行定义。

七、使用搜索功能

现在可以使用自己创建完成的服务了。首先,将GitHub参数添加至控制器函数(这样该服务就能被注入到AngularJS当中):

现在定义executeSearch()函数:

利用来自$scopequery的搜索字符串从当中调用GitHubsearchRepos(),而后在回调中将搜索结果(来自dataitems)加入$scoperepos变量。

只要执行以上步骤,就能顺利显示出搜索结果。在浏览器中打开HTML文件并尝试进行搜索:

八、获取库中的数据

被传递至此函数的名称必须为完整名称(结构为:作者名称、斜杠、库名称——例如angular/angularjs),这是因为需要将其传递至GitHub API。

九、获取库中的README文件

README文件中的内容并未被包含在我利用以上函数获取到的数据当中。相反,需要利用另一个API进行调用及获取,因此需要创建以下函数:

这条函数与之前我们创建完毕的两条基本相同,只不过对URL进行了变更。还要利用atob()函数解码README文件的内容,因为它采用base64编码机制。可以点击此处查看GitHub API说明文档中与获取README文件内容相关的信息。

之所以没有将这两条请求塞进同一个函数当中,是因为某些库根本不具备 README文件。如果将二者强行结合,应用程序可能因此发生故障。

十、显示库信息

将在另一个元素<div>当中显示库的完整名称、查看过该库的人数以及README文件:

将把该信息保存在控制器Scope内的activeRepo变量当中。只要存在可以显示的数据,ngShow就会将该元素显示出来(如果不存在可以显示的数据,将只能看到‘Watched by people’文本,而且没有任何库被选中)。

十一、更新控制器

还需要对控制器进行更新,从而保证其切实获取到库数据并将其纳入Scope当中。下面创建之前附加至ngClick指令的openRepo()函数:

在这里,首先使用GitHubgetRepo()方法、检查错误而后将该数据引入activeRepo变量。接下来,获取README文件——如果该文件不存在,需要向用户提示该情况。

现在可以再次运行自己的应用程序并查看其实际效果:

十二、获取用户的库

为了将更多功能引入到应用程序当中,将为屏幕右方已被选定库的持有者显示其所有可用库。这要求向服务中引入另一个方法:

十三、显示用户的库

这基本上相当于重现HTML中的搜索栏机制,不过实际需要显示的是用户名称与user对象中的库,而非输入域或者Scope本身:

到了这一步,应该已经拥有了一套能够切实运作的AngularJS应用程序——它可以根据搜索字符串获取GitHub库。

Javascript框架在处理seo方面存在问题,因为爬虫在检索seo信息的时候会读不了js给其赋的值,导致搜索引擎收录不了或者收录了无效的信息,比如收录的可能是title={{title}}这样的,下面先说如何在路由跳转时修改页面的seo信息,现在spa跳转一般用route-ui了,就以这个为基础讲解,在app

js配置项state中加入title信息,如下:data:{pageTitle:'usertitle'}

state('index

user',{url:'/user',views:{'content@index':{templateUrl:'templateHtml/user/user

html',controller:'userCtrl'}},data:{pageTitle:'usertitle'}})

state('index

user

a',{url:'/a',templateUrl:'templateHtml/user/a

html',data:{pageTitle:'useratitle'}})

state('index

user

b',{url:'/b',templateUrl:'templateHtml/user/b

html',data:{pageTitle:'userbtitle'}})然后使用通过监听$stateChangeSuccess来修改页面title:app

directive('title',['$rootScope','$timeout',function($rootScope,$timeout){return{link:function(){varlistener=function(event,toState){console

log(toState);$timeout(function(){$rootScope

title=(toState

data&&toState

data

pageTitle)toState

data

pageTitle:'Defaulttitle';$rootScope

metakeywords="thisiskeywords"});};$rootScope

$on('$stateChangeSuccess',listener);}};}]);这里赋值是通过获取当前state中设置的title,也就是这里toState对象的值,当我们打印这个toState时就会发现:这里是获取的已经设置好的data中pageTitle的值,如果不想写在state里或者写死,可以传state中的唯一标示,配合后台接口,将查询的title渲染到页面;同样meta标签如keywords、description可以在此时一同绑定;上面说到javascript框架在seo方面存在短板,应对ng的这个问题市面上也有很多方案,比如prerender,seo

js等,思想都是在页面加入表示,让爬虫在页面渲染好后才去扒数据,同时服务器上要配置些服务,服务将检测是否有对应这个URL的快照或者缓存的页面,如果存在就发给爬虫,如果不存在,则生成快照,然后发送正确的页面给爬虫;处理起来还是要费些功夫的,所以也可以采用ng+常规的开发模式,一些重要的页面不要用这种页面渲染seo的方式,或者建立专门的seo信息页;所以在这方面感觉用ng框架做app(ionic)还是很合适的;以上所述是小编给大家介绍的Angular设置title信息解决SEO方面存在问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的

在此也非常感谢大家对脚本之家网站的支持!

以上就是关于angularjs state.go 参数 刷新页面 参数就获取不到了 怎么办全部的内容,包括:angularjs state.go 参数 刷新页面 参数就获取不到了 怎么办、angularjs怎么获取到单选框的值、如何利用AngularJS服务接入外部API等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9595779.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-30
下一篇 2023-04-30

发表评论

登录后才能评论

评论列表(0条)

保存