AngularJS的应用(4)
来源:互联网 发布:手机阿里云登录 编辑:程序博客网 时间:2024/05/29 09:07
我们已经可以让AngularJS app在index.html中呈现数据。如果需要有更多类数据需要显示的时候该怎么办呢?一个较好的方法是使用多模板基于用户浏览的URL呈现不同条数据。我们可以用Angular application routes来实现。
在index.html添加<div ng-view></div>
.在app.js中,在angular.module
的下方,添加route
, 如下所示:
var app = angular.module('GalleryApp', ['ngRoute']);app.config(function ($routeProvider) { $routeProvider .when('/', { controller: "HomeController", templateUrl: 'views/home.html' }) .otherwise({ redirectTo: '/' });});
在app.config()
方法里面, 我们用Angular的$routeProvider
来定义application的route。用.when()
来映射URL/
到controllerHomeController
和template home.html
。 HomeController
使用service js/services/photos.js
来获取照片矩阵并保存到$scope.photos
。 home.html
使用ng-repeat
来循环并呈现照片矩阵中的每一项。否则如果一个用户偶然访问了一个URL而不是/
, 我们重新指向/
。现在每当用户访问/
, 网页就会将home.html
注入到<div ng-view></div>
,用户就可以在index.html浏览到了。
现在我们再加入一段when
, 代码如下:
app.config(function ($routeProvider) { $routeProvider .when('/', { controller: "HomeController", templateUrl: 'views/home.html' }) .when('/photos/:id', { controller: "PhotoController", templateUrl: 'views/photo.html' }) .otherwise({ redirectTo: '/' });});
这是,我们映射了一个URL到PhotoController
和photo.html
。我们增加了一个变量部分id
到URL中,比如:/photos/:id
。在PhotoController
中,我们使用了Angular的$routeParams
来通过$routeParams.id
从URL中检索id
。注意:我们把$routeParams
和service photos
同时注入到PhotoController
依赖矩阵(dependency array)使它们可以在controller内使用。
为了获取一个单独的photo,我们首先使用services photos
来从server获取照片矩阵,之后用$routeParams.id
访问特定的照片。
任何添加到$scope
中的特性都可以被呈现。这意味着在photo.html
里面,我们可以用expression来表现细节。当你点击link的时候,app并不是全部reload。只有在<div ng-view></div>
里面的部分被加载。
- AngularJS的应用(4)
- Angularjs的应用(1)
- AngularJS的应用(2)
- AngularJS的应用(3)
- AngularJS路由的应用
- AngularJs的综合应用
- 编写强angularJS的应用
- 学习笔记angularjs的应用
- (二)Angular的特性,AngularJS语法特点,创建AngularJS应用
- angularjs应用
- angularJS 的controller(控制器)的应用
- 用angularjs开发下一代web应用(一):angularjs简介
- AngularJS 控制器(Controller) 用于控制 AngularJS 应用
- 6个强大的AngularJS扩展应用
- 你的第一个AngularJS应用
- AngularJS 应用身份认证的技巧
- AngularJS 应用身份认证的技巧
- angularjs基础—$scope.$apply的应用
- 使用免费组件view pdf 文档
- Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.5.1:解决办法
- SSH,POP,FTP,telent
- 【设计模式】对象的克隆-原型模式
- ZOJ1101-Gamblers 终于AC。。。
- AngularJS的应用(4)
- 关于四位计数器的设计,阻塞式与非阻塞式赋值引发的问题
- com.mysql.jdbc.CommunicationsException: Communications link failure due to underlying exception:
- 根据UILable高度让UITableViewCell自动适应高度
- ZOJ 3323Somali Pirates
- winfrom中出现" 配置系统未能初始化"
- Android中Parcelable接口用法
- 第一章
- window是系统杀死8080端口的线程