发表于： 2017-05-29 23:27:44
1 1079
今天完成的事情：
完成了路由搭建，踩了不少坑，整理了下思路：
*先将需要分页的页面写入html文件，不需要加入<head></head>，我一开始不知道，以为是三个完整的html页面。
*然后创建一个主页面，我们需要在主页中做一些事情, (i) 我们需要引入AngularJS框架 (ii) 我们需要引入ui-router框架. (iii) 引入AngularJS文件 App.js (iv) 第四件事情就是让主页内容展示出来，然后显示出它里面的页面。
*创建app.js文件：
var myApp = angular.module("backstage", ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/welcome");
$stateProvider
.state("welcome",{
url: "/welcome",
templateUrl: "welcome.html"
})
.state("article",{
url: "/article",
templateUrl: "Article.html"
})
.state("detail",{
url: "/detail",
templateUrl: "detail.html"
});
});
第一行，声明AngularJS模块, 并把ui-router传入AngularJS主模块，所有的结合起来我们就得到了Angular模块。
第二行声明了把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数传入，这样我们就可以为这个应用程序配置路由了。
$urlRouterProvider.when("", "/welcome");
用来定义默认页面；
踩的坑有第一个开始使用template：却无法加载页面，后来查资料才知道template:后面是要跟dom结构的，而templateUrl：后面才跟html文件。
第二个是采用表达式写的函数能够正常运行，采用正常函数结构写的却无法运行了，后来发现是angular的版本太低了。
明天计划的事情：
完成任务6，并开始任务7的学习
遇到的问题：
暂无
收获：
如何使用angularjs搭建一个路由进行分页的访问
返回列表
评论