发表于: 2017-05-18 22:03:57
1 1014
今日所做:
1.完成任务6页面的初级版本制作
2.学习ui-router,通过网上的一个实例进行学习,将框架套用到自己的代码中:
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/init");
$stateProvider
.state("init", {url: "/init", templateUrl: "init.html"})
.state("article-page", {url: "/article-page", templateUrl: "article-page.html"})
.state("new-article", {url: "/new-article", templateUrl: "new-article.html"});
});
其中首先是要设定一个app模块,在模块中使用ui.router;
然后给app设置函数,设置初始状态页面;
然后根据状态名设置对应的需要跳转的页面;
<span><a ui-sref="init" href="">信息管理</a></span>
在跳转按键上,加上ui-sref,ui-sref的名字一定要和想要跳转的页面的state名字对应上
都设置好之后就可以实现跳转了
3.ui-router好用之处在于它可以实行多个窗口展示页面,以及可以实现页面嵌套,
即在跳转页面中的某个位置再进行页面跳转,这样只需在第一次跳转页面设置好
ui-view的占位位置,然后在设置状态与地址函数的时候,将需要二次跳转的状态
名改为第一次跳转页面状态名后面加.再加上要跳转的页面名,即将第一次跳转的
页面作为母版,在母版的基础上进行跳转;
4.第一次按照ui-router的设置模式对页面进行修改但是失败了,每次只要点击跳转,
必会报错,不知道原因是什么,然后去学习了一下ng-route,按照ng-router的模板
修改了一下页面,发现还是会报错,而且报错的内容是差不多的,然后去网上搜了一下
,发现是谷歌的问题,不允许进行文件之间的访问,坑爹啊,当时就拿火狐试了一下,
是可以跳转的。。
5.然后对谷歌进行了设置修改,后来也可以进行跳转了,然后又按照ui-router的模板把
页面再次改了一下,ui-router也可以使用了
明日计划:
完善一些任务6的页面
查看任务7
做小课堂
遇到的问题:
1.像谷歌浏览器这种不允许文件之间进行访问的问题是个大问题呀,自己的电脑上的谷歌
还可以进行设置改掉这个问题,但别人电脑上的谷歌怎么办,如何解决这个坑爹问题?
2.对于网页布局的话,一些大的模块的高度改如何设定呢,比如任务6中需要展示article
列表的ui-view那块,因为不知道表格有多少条,因此高度不能设死,但是即便只有几条,
高度也不能不设置,因为那块展示区域有背景颜色,会影响美观,不知道如何解决
今日收获:
学会使用ng-route以及ui.router
评论