AngularJS入门讲解3：$http服务和路由讲解_Linux编程_Linux公社-Linux系统门户网站
你好，游客
AngularJS入门讲解3：$http服务和路由讲解
来源：Linux社区&
作者：chaojidan
上一课的例子中，我们的模型数据是硬编码的，也就是说，我们的数据不是从服务器请求回来的。
这里，我们先讲解，如何从服务器获取数据：
function PhoneListCtrl($scope, $http) {　　$http.get('phones/phones.json').success(function(data) {　　　　$scope.phones =　　});
　　$scope.orderProp = 'age';}
上一课的例子，我们只需要改写这个控制器构造函数就行了。
$http向Web服务器发起一个HTTP GET请求，获取phone/phones.json。AngularJS会自动检测这个应答是什么格式的，并且帮我们解析出来！
为了使用AngularJS的服务，你只需要在控制器的构造函数里面传入所需服务的名字。
当控制器构造的时候，AngularJS的依赖注入器会将这些服务注入到你的控制器中。
由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。所以如果你要压缩PhoneListCtrl控制器的JS代码，它所有的参数也同时会被压缩，这时候依赖注入系统就不能正确的识别出服务了。
为了克服压缩引起的问题，只要在控制器函数里面给$inject属性赋值一个依赖服务标识符的数组，就像：
PhoneListCtrl.$inject = ['$scope', '$http'];另一种方法也可以用来指定依赖列表并且避免压缩问题&&使用Javascript数组方式构造控制器：把要注入的服务放到一个字符串数组（代表依赖的名字）里，数组最后一个元素是控制器的方法函数：
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];上面提到的两种方法都能和AngularJS可注入的任何函数完美协作，要选哪一种方式完全取决于你们项目的编程风格，建议使用数组方式。
然后，我们为手机列表的手机数据项添加缩略图以及链接：
[　　{　　　　...　　　　"id": "motorola-defy-with-motoblur",　　　　"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",　　　　"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",　　　　...　　},　　...]
html改成这样：
...&&ul class="phones"&　　&li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail"&　　　　&a href="#/phones/{{phone.id}}" class="thumb"&
　　　　　　&img ng-src="{{phone.imageUrl}}"&
　　　　&/a&　　　　&a href="#/phones/{{phone.id}}"&{{phone.name}}&/a&　　　　&p&{{phone.snippet}}&/p&　　&/li&&&/ul&...
为每条记录添加图片，只需要使用ngSrc指令代替&img&的src属性标签就可以了。因为如果我们用一个正常src属性来进行绑定（&img class="diagram" src="{{phone.imageUrl}}"&），浏览器会把AngularJS的{{ 表达式 }}标记直接进行字面解释，这时会发起一个向非法url：http://localhost:8000/app/{{phone.imageUrl}}的请求，因为浏览器载入页面时，同时也会请求载入图片。有了这个ngSrc指令，就会避免产生这种情况。
上面的应用只给我们的用户提供了一个简单的界面（一张所有手机的列表），并且所有的模板代码位于index.html文件中。
最后，我们增加一个能够显示我们列表中每一部手机详细信息的页面。
为了增加详细信息视图，我们可以拓展index.html来同时包含两个视图的模板代码，但是这样会很快给我们带来巨大的麻烦。相反，我们要把index.html模板转变成&布局模板&。这是我们应用所有视图的通用模板。其他的&局部布局模板&，根据当前的&路由&被填入，从而形成一个完整视图展示给用户。
AngularJS中的路由是通过$routeProvider来声明的，它是$route服务的提供者。这项服务使得控制器、视图模板与当前浏览器的URL可以轻易集成。它允许我们使用浏览器的历史(回退或者前进导航)和书签。
angular运行时，它会创建一个注入器，后面所有依赖注入的服务都会需要它。这个注入器自己并不知道$http和$route是干什么的，注入器唯一的职责是载入指定的服务模块，在这些模块中注册所有定义的服务提供者，并且当需要时给一个指定的函数注入服务。这些服务通过它们的提供者&懒惰式&（需要时才加载）实例化。
提供者提供服务实例并且对外提供API接口的对象，它可以被用来控制一个服务的创建和运行。对于$route服务来说，$routeProvider对外提供了API接口，通过API接口允许你为你的应用程序定义路由规则。
为了给我们的应用配置路由，我们需要给应用创建一个模块。
angular.module('phonecat', []).　　config(['$routeProvider', function($routeProvider) {　　　　$routeProvider.　　　　　　when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).　　　　　　when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).　　　　　　otherwise({redirectTo: '/phones'});　　}]);
我们把这个模块定义为phonecat，并且通过使用config方法，我们把$routeProvider注入到我们的配置函数中，并且使用$routeProvider.when方法来定义我们的路由规则。
我们的路由规则定义如下：
（1）当URL 映射段为/phones时，手机列表视图会被显示出来。为了构造这个视图，AngularJS会使用phone-list.html模板和PhoneListCtrl控制器。（2）当URL 映射段为/phone/:phoneId时，手机详细信息视图被显示出来。这里:phoneId是URL的变量部分。为了构造手机详细视图，AngularJS会使用phone-detail.html模板和PhoneDetailCtrl控制器。
（3）otherwise({redirectTo: '/phones'})语句使得当浏览器地址不能匹配我们任何一个路由规则时，触发重定向到/phones。
我们重用之前创造过的PhoneListCtrl控制器，同时我们为手机详细视图添加一个新的PhoneDetailCtrl控制器。
为了让我们新创建的模块运行起来，我们需要在ngApp指令的值上指明模块的名字：
&!doctype html&　　&html lang="en" ng-app="phonecat"&　　　　...
　　&/html&
新的PhoneDetailCtrl控制器：
function PhoneDetailCtrl($scope, $routeParams) {　　$scope.phoneId = $routeParams.phoneId;}
注意到在第二条路由声明中:phoneId参数的使用。所有以:符号声明的变量（此处变量为phones）都会被提取，然后存放在$routeParams对象中。
$route服务通常和ngView指令一起使用。ngView指令的角色是为当前路由把对应的视图模板载入到布局模板中。
&html lang="en" ng-app="phonecat"&　　&head&　　　　...　　　　&script src="lib/angular/angular.js"&&/script&　　　　...　　&/head&　　&body&
　　　　&div ng-view&
　　　　&/div&
　　&/body&&/html&
注意，我们把index.html模板里面大部分代码移除，我们只放置了一个&div&容器，这个&div&具有ng-view属性。我们删除掉的代码现在被放置在phone-list.html模板中：
&div class="container-fluid"&& &div class="row-fluid"&& & &div class="span2"&
& & & Search: &input ng-model="query"&& & & Sort by:& & & &select ng-model="orderProp"&& & & & &option value="name"&Alphabetical&/option&& & & & &option value="age"&Newest&/option&& & & &/select&
& & &/div&& & &div class="span10"&
& & & &ul class="phones"&& & & & &li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail"&& & & & & & & &a href="#/phones/{{phone.id}}" class="thumb"&&img ng-src="{{phone.imageUrl}}"&&/a&& & & & & &a href="#/phones/{{phone.id}}"&{{phone.name}}&/a&& & & & & &p&{{phone.snippet}}&/p&& & & & &/li&& & & &/ul&
& & &/div&& &/div&&/div&
同时我们为手机详细信息视图添加一个占位模板。
TBD: detail view for {{phoneId}}
大家注意到我们上面的两个模板中没有添加PhoneListCtrl或PhoneDetailCtrl控制器属性！
这样就实现了一个基于angular的多视图的应用程序。
AngularJS权威教程 清晰PDF版&
希望你喜欢，并分享我的工作~带你走近AngularJS系列：
带你走近AngularJS - 基本功能介绍
带你走近AngularJS - 体验指令实例
带你走近AngularJS - 创建自定义指令
如何在 AngularJS 中对控制器进行单元测试
在 AngularJS 应用中通过 JSON 文件来设置状态
AngularJS 之 Factory vs Service vs Provider
AngularJS && 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据
AngularJS 的详细介绍：AngularJS 的下载地址：
本文永久更新链接地址：
相关资讯 & & &
图片资讯 & & &
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款您的位置： >
js实现页面自动跳转
学习标签：
本文导读：自动转向，也叫自动重定向。自动跳转，指当访问用户登陆到某网站时，自动将用户转向其它网页地址的一种技术。转向的网页地址可以是网站内的其它网页，也可以是其它网站。通常情况下，浏览器会收到一个网页，该页面含有自动加载一其它网页的代码。该页面有可能在服务器端被转换，这样的话，浏览器只收到一个页面，而自动转向往往意味着浏览器收到的页面具有自动将访问用户送至其它页面的功能。
&&&&& 很多时候我们需要Web页具备有自动跳转功能，例如，论坛中的用户登录、发帖及回复或留言簿中的留言和回复等操作成功后，若用户没有任何鼠标点击操作，过了一定的时间，页面自动跳转到预设的页面。本文讨论网页自动跳转的几种实现方法。
&&&&& 1.在 &head& &/head& 标签里头添加:
HTML 代码 &&复制
//(5:表示5秒钟刷新;url:表示要跳转到的页面名称(例如newPage.html))
&META HTTP-EQUIV='Refresh' CONTENT='5;URL=newPage.html'&
&&&& 2.用JS,在 &head& &/head& 标签里头添加如下JS:
JScript 代码 &&复制
window.onload=function()
setInterval(&redirect();&,3000);
function redirect()
window.location.href=&new.aspx&;
您可能感兴趣
一月好评排行榜我有屏幕的应用程序.each屏幕被指定一个URL，如#，mails，contacts，等等。
在我的主HTML文件我有一个ng-view根据路由选择哪个更新。到目前为止，一切都很好。
现在，这些屏幕有一个子导航。例如 CodeGo.net，#mails确实有一个收件箱，已发送文件夹。他们提出themselfes有两列：左边的子导航，右边的相应文件夹的邮件。
当您导航到#mails的，应当将您重定向至#mails/inbox，所以，基本上收件箱是默认的子视图的邮件。
我怎么能设置呢？
我现在能想到的（我是很新的AngularJS，因此，如果这个问题是有点幼稚）的唯一方法是有两种观点，一种用于#mails/inbox，而另一个用于#mails/sent。
当您选择一个路径，这些views被加载。当您选择#mails它只是将您重定向到#mails/inbox。
但是，这两种观点的ng-include对于子导航。这种感觉错了
我想更多的是有嵌套的观点：屏幕如邮件，联系人，等等，和子视图，如收件箱，发间的底部的一个变化之间的最上面的一个开关，等等。
我将如何解决这个问题？
本文地址 ：CodeGo.net/562838/
-------------------------------------------------------------------------------------------------------------------------
1. AngularJS UI路由器解决我的问题:-)
另一个库检查出：
你是不是内置ng-view和$route。
样品路由配置看起来像这样：
$routeSegmentProvider.
when('/section1',
's1.home').
when('/section1/prefs', 's1.prefs').
when('/section1/:id',
's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2',
segment('s1', {
templateUrl: 'templates/section1.html',
controller: MainCtrl}).
segment('home', {
templateUrl: 'templates/section1/home.html'}).
segment('itemInfo', {
templateUrl: 'templates/section1/item.html',
controller: Section1ItemCtrl,
dependencies: ['id']}).
segment('overview', {
templateUrl: 'templates/section1/item/overview.html'}).
segment('edit', {
templateUrl: 'templates/section1/item/edit.html'}).
segment('prefs', {
templateUrl: 'templates/section1/prefs.html'}).
segment('s2', {
templateUrl: 'templates/section2.html',
controller: MainCtrl});
本文标题 ：我如何设置嵌套视图AngularJS？
本文地址 ：CodeGo.net/562838/
Copyright (C) 2014 CodeGo.net 沪ICP备号 联&系& c&o&d&e&g&o &@&1&2&6&.&c&o&mangular-ui-route中重定向页面js代码怎么写_百度知道
angular-ui-route中重定向页面js代码怎么写
我有更好的答案
获取和设置cookie的方法网上很多我就不写了 A:var c=getCookie(&xx&);if(c!=1){setCookie(&xx&,&1&);window.location.href=&b.html&;}B:var f=document.//之前页面urlwindow.location.href=f;其实你不是跳转到B页面
其他类似问题
为您推荐：
js代码的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁angular-ui-route中重定向页面js代码怎么写_百度知道
angular-ui-route中重定向页面js代码怎么写
提问者采纳
引入 $state 服务，然后使用 $state.go 即可。具体参数看文档：$state#go
其他类似问题
为您推荐：
js代码的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁