使用anguarjs TemplateUI框架方法

怎么看：
1. index.html： 入口，所有的加载的内容

Admin/App/main.js：定义ng的全局配置信息

1. Js/app.js是angularjs的主入口，引用项目中的各个模块。
   
2. Admin/App/config.route.js配置路由，其中run方法主要是验证登录，config方法第一行把$stateProvider和$urlRouteProvider路由引擎作为函数参数传入，这样我们就可以为这个应用程序配置路由。
   
   两个东西的区别：执行顺序不同，再有就是允许注入的东西不同，config里允许注入的是Provider和constance(常量)，run里允许注入的是实例和constance，参考网站https://segmentfault.com/q/1010000006198901
3. $urlRouterProvider.otherwise('/auth/login')路由重定向，如果没有路由引擎能匹配当前的导航状态，那它就会默认将路径路由至login界面，$stateProvider.state(…)定义了会在index页面第一个显示出来的状态，作为页面被加载好以后第一个被使用的路由。
   
4. .state(‘auth.login’,…)这边也是定义页面，但是和之前的有些不同，auth.login告诉路由引擎我们在这里定义的是子页面（嵌套路由），显示在母页面“ui-view”上面。这边主要用来跳到Admin/Auth/Login.html登录页面。
   

5. 再看config.route.js，接下来是.state(‘admin’,…)，路由到Admin/App.html，主要加载了页面头部导航admin/blocks/header.html、侧导航admin/blocks/aside.html，ui-view为子页面，以及尾部和设置页面admin/blocks/settings.html。在接下来.state(‘admin… ‘, …)就是路由到的子页面。
   

6. 再介绍一下，state里面的url为访问路径，templateUrl为模板内容，resolve为预载入，开发者可以预先载入一系列依赖或者数据，然后注入到控制器中，后面配置新模块会详细讲到。
   ui.router 路由模块名
   $urlRouterProvider 服务提供者，用来配置路由重定向$stateProvider 服务提供者，用来配置路由
   $urlRouter 服务$state 服务，用来显示当前路由状态信息，以及一些路由方法（如：跳转）
   $stateParams 服务，用来存储路由匹配时的参数
   ui-view 指令，路由模板渲染，对应的 dom 相关联
   ui-sref 指令，链接到特定状态
   
    

    
   配置新页面

7. 在Admin文件夹下对应的子文件夹（或者子子文件夹）放页面（html）部分，在其同一级文件夹下创建“controller”文件夹并存放控制器(controller)。下图为Login页面：
   
8. 在Admin/App/config.router.js文件中配置路由，配置路由的方式可参照之前配置的或者详细了解ui-router后自行配置。下图为Login页面路由：
   
9. 在Admin/Blocks/Nav.html中设置导航。其中ui-sref的名称要和路由名相同。
    
   修改样式
10. 模板采用bootstrap样式详细可以在示例下的帮助文档中的css可以看到。
    
11. 举个例子，加入字体图标 只要引入class=”glyphicon glyphicon-camera”就可以了

12. 网格系统：Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。对于电脑屏幕，我们用.col-md-xx类，整个屏幕为col-md-12，半屏就是col-md-6；超小屏幕.col-xs-；小屏幕：.col-sm-；超大屏幕：.col-lg-

13. 排版：标题从h1到h6，添加一个内联子标题，只需要简单地在元素两旁添加 ，文本左、右对齐、居中分别用.text-left/ .text-right/ .text-center，设定文本对齐,段落中超出屏幕部分文字自动换行.text-justify， 段落中超出屏幕部分不换行.text-nowrap；div或者别的东西如果要左对齐，可以加.pull-left；如果要右对齐，可以加.pull-right；居中则为.center-block

14. 表格：为表格添加基础样式；在 内添加斑马线形式的条纹 ：.table-striped；为所有表格的单元格添加边框：.table-bordered，响应式表格：.table-responsive
15. 修改背景颜色：.success（绿）.warning（黄）.danger（红）
16. 表单创建步骤：向父 元素添加 role=”form”，把标签和控件放在一个带有 class .form-group 的
    中，这是获取最佳间距所必需的；向所有的文本元素 、 和 添加 class =”form-control”
17. 按钮：.btn；默认/标准按钮：.btn-default，颜色同上
18. 设置外边框Margin
    .m margin: 15px
    .m-xs margin: 5px
    .m-sm margin: 10px
    .m-md margin: 20px
    .m-lg margin: 30px