怎么看:
1. index.html: 入口,所有的加载的内容
Admin/App/main.js:定义ng的全局配置信息
- Js/app.js是angularjs的主入口,引用项目中的各个模块。
- Admin/App/config.route.js配置路由,其中run方法主要是验证登录,config方法第一行把
stateProvider和
urlRouteProvider路由引擎作为函数参数传入,这样我们就可以为这个应用程序配置路由。
两个东西的区别:执行顺序不同,再有就是允许注入的东西不同,config里允许注入的是Provider和constance(常量),run里允许注入的是实例和constance,参考网站https://segmentfault.com/q/1010000006198901 -
urlRouterProvider.otherwise(′/auth/login′)路由重定向,如果没有路由引擎能匹配当前的导航状态,那它就会默认将路径路由至login界面,
stateProvider.state(…)定义了会在index页面第一个显示出来的状态,作为页面被加载好以后第一个被使用的路由。
- .state(‘auth.login’,…)这边也是定义页面,但是和之前的有些不同,auth.login告诉路由引擎我们在这里定义的是子页面(嵌套路由),显示在母页面“ui-view”上面。这边主要用来跳到Admin/Auth/Login.html登录页面。
再看config.route.js,接下来是.state(‘admin’,…),路由到Admin/App.html,主要加载了页面头部导航admin/blocks/header.html、侧导航admin/blocks/aside.html,ui-view为子页面,以及尾部和设置页面admin/blocks/settings.html。在接下来.state(‘admin… ‘, …)就是路由到的子页面。
再介绍一下,state里面的url为访问路径,templateUrl为模板内容,resolve为预载入,开发者可以预先载入一系列依赖或者数据,然后注入到控制器中,后面配置新模块会详细讲到。
ui.router 路由模块名
urlRouterProvider服务提供者,用来配置路由重定向 stateProvider 服务提供者,用来配置路由
urlRouter服务 state 服务,用来显示当前路由状态信息,以及一些路由方法(如:跳转)
$stateParams 服务,用来存储路由匹配时的参数
ui-view 指令,路由模板渲染,对应的 dom 相关联
ui-sref 指令,链接到特定状态
配置新页面- 在Admin文件夹下对应的子文件夹(或者子子文件夹)放页面(html)部分,在其同一级文件夹下创建“controller”文件夹并存放控制器(controller)。下图为Login页面:
- 在Admin/App/config.router.js文件中配置路由,配置路由的方式可参照之前配置的或者详细了解ui-router后自行配置。下图为Login页面路由:
- 在Admin/Blocks/Nav.html中设置导航。其中ui-sref的名称要和路由名相同。
修改样式 - 模板采用bootstrap样式详细可以在示例下的帮助文档中的css可以看到。
- 举个例子,加入字体图标 只要引入class=”glyphicon glyphicon-camera”就可以了
网格系统:Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。对于电脑屏幕,我们用.col-md-xx类,整个屏幕为col-md-12,半屏就是col-md-6;超小屏幕.col-xs-;小屏幕:.col-sm-;超大屏幕:.col-lg-
排版:标题从h1到h6,添加一个内联子标题,只需要简单地在元素两旁添加 ,文本左、右对齐、居中分别用.text-left/ .text-right/ .text-center,设定文本对齐,段落中超出屏幕部分文字自动换行.text-justify, 段落中超出屏幕部分不换行.text-nowrap;div或者别的东西如果要左对齐,可以加.pull-left;如果要右对齐,可以加.pull-right;居中则为.center-block
- 表格:为表格添加基础样式;在 内添加斑马线形式的条纹 :.table-striped;为所有表格的单元格添加边框:.table-bordered,响应式表格:.table-responsive
- 修改背景颜色:.success(绿).warning(黄).danger(红)
- 表单创建步骤:向父 元素添加 role=”form”,把标签和控件放在一个带有 class .form-group 的
中,这是获取最佳间距所必需的;向所有的文本元素 、 和 添加 class =”form-control”
- 按钮:.btn;默认/标准按钮:.btn-default,颜色同上
- 设置外边框Margin
.m margin: 15px
.m-xs margin: 5px
.m-sm margin: 10px
.m-md margin: 20px
.m-lg margin: 30px