发表于： 2017-05-26 23:51:17
1 934
今天完成的事情：
使用jq大致完成了后台页的侧边栏。
学习ui-route。
明天计划的事情：
解决配置路由遇到的问题，修改bug。
遇到的问题：
配置路由时控制台一直报错，不知为何：
TypeError: Cannot read property 'addEventListener' of undefined
收获：
1，找到了一个很好看的字体图标库，font-awesome:
http://www.fontawesome.com.cn/
将图标库下载后通过link引入其中的css文件：
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"通过在class中设置图标字体的前缀和名称来使用：
<i class="fa fa-camera-retro"></i>2，ui-router
1.安装angularUI的ui-router组件
2.ui-router是一个路由框架，允许你通过状态机组织接口，而不是简单的URL路由。
<div ui-view></div>通过ui-view指令来表示一个视图。定义在任意给定状态内的 模板都处在<div ui-view></div> 元素内。
通过config()来设置路径配置：
.config(function($stateProvider,$urlRouterProvider) {
$stateProvider .state('start', {
url: '/start', templateUrl: 'partials/start.html'
})
});
这一步给状态配置对象分配了一个名为start的状态。这个状态配置对象，或者说这个 stateConfig也有一些与路由配置对象相似的选项，让你能够配置应用程序的状态。
在每个视图上设置模板的方式有三种。
template：一个HTML内容字符串或者返回HTML的函数。templateUrl：一个模板URL路径字符串或者是返回URL路径字符串的函数。
templateProvider：一个返回HTML内容字符串的函数。
$stateProvider .state('admin', {
abstract: true
}, url: '/admin', template: ;<div ui-view></div>' })
.state('admin.index', {
url: '/index', template: '<h3>Admin index</h3>'
});
abstract抽象模板永远不能直接激活，但是可以设置被激活的子节点
3.$urlRouterProvider
$urlRouterProvider路由提供程序构建规则，规定当特定的URL被激活时会发生什么
.config(function($urlRouterProvider) {
//想将一个空路由重定向到/inbox：
$urlRouterProvider.when('', '/inbox');
});
匹配时调用的函数）。
otherwise() 在没有其他路由匹配时发起重定向。这个方法是创建默认URL的一种很好的方式。
.config(function($urlRouterProvider) {
//重定向到
$urlRouterProvider.otherwise('/');
});
返回列表
评论