1 创建一个新的angular应用

　　ng new adminSystem

2 利用WebStorm打开adminSystem应用

3 借助AdminLTE这个开源项目来辅助开发

　　AdminLTE项目：点击前往

　　将AdminLTE项目的精简版本源代码复制到adminSystem应用主模块的主组件的模板中

　　　　AdminLTE项目的精简版本效果图

　　　　　　

  1. <!DOCTYPE html>
  2. <!--
  3. This is a starter template page. Use this page to start your new project from
  4. scratch. This page gets rid of all links and provides the needed markup only.
  5. -->
  6. <html>
  7. <head>
  8.   <meta charset="utf-8">
  9.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.   <title>AdminLTE 2 | Starter</title>
  11.   <!-- Tell the browser to be responsive to screen width -->
  12.   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  13.   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  14.   <!-- Font Awesome -->
  15.   <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  16.   <!-- Ionicons -->
  17.   <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  18.   <!-- Theme style -->
  19.   <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  20.   <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
  21.         page. However, you can choose any other skin. Make sure you
  22.         apply the skin class to the body tag so the changes take effect. -->
  23.   <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
  24.  
  25.   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  26.   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  27.   <!--[if lt IE 9]>
  28.   <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  29.   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  30.   <![endif]-->
  31.  
  32.   <!-- Google Font -->
  33.   <link rel="stylesheet"
  34.         href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
  35. </head>
  36. <!--
  37. BODY TAG OPTIONS:
  38. =================
  39. Apply one or more of the following classes to get the
  40. desired effect
  41. |---------------------------------------------------------|
  42. | SKINS         | skin-blue                               |
  43. |               | skin-black                              |
  44. |               | skin-purple                             |
  45. |               | skin-yellow                             |
  46. |               | skin-red                                |
  47. |               | skin-green                              |
  48. |---------------------------------------------------------|
  49. |LAYOUT OPTIONS | fixed                                   |
  50. |               | layout-boxed                            |
  51. |               | layout-top-nav                          |
  52. |               | sidebar-collapse                        |
  53. |               | sidebar-mini                            |
  54. |---------------------------------------------------------|
  55. -->
  56. <body class="hold-transition skin-blue sidebar-mini">
  57. <div class="wrapper">
  58.  
  59.   <header class="main-header">
  60.  
  61.     <!-- Logo -->
  62.     <a href="index2.html" class="logo">
  63.       <!-- mini logo for sidebar mini 50x50 pixels -->
  64.       <span class="logo-mini"><b>A</b>LT</span>
  65.       <!-- logo for regular state and mobile devices -->
  66.       <span class="logo-lg">{{title}}</span>
  67.     </a>
  68.  
  69.     <!-- Header Navbar -->
  70.     <nav class="navbar navbar-static-top" role="navigation">
  71.       <!-- Sidebar toggle button-->
  72.       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  73.         <span class="sr-only">Toggle navigation</span>
  74.       </a>
  75.       <!-- Navbar Right Menu -->
  76.       <div class="navbar-custom-menu">
  77.         <ul class="nav navbar-nav">
  78.           <!-- Messages: style can be found in dropdown.less-->
  79.           <li class="dropdown messages-menu">
  80.             <!-- Menu toggle button -->
  81.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  82.               <i class="fa fa-envelope-o"></i>
  83.               <span class="label label-success">{{messageCount}}</span>
  84.             </a>
  85.             <ul class="dropdown-menu">
  86.               <li class="header">You have 4 messages</li>
  87.               <li>
  88.                 <!-- inner menu: contains the messages -->
  89.                 <ul class="menu">
  90.                   <li><!-- start message -->
  91.                     <a href="#">
  92.                       <div class="pull-left">
  93.                         <!-- User Image -->
  94.                         <img src="assets/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  95.                       </div>
  96.                       <!-- Message title and timestamp -->
  97.                       <h4>
  98.                         Support Team
  99.                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
  100.                       </h4>
  101.                       <!-- The message -->
  102.                       <p>Why not buy a new awesome theme?</p>
  103.                     </a>
  104.                   </li>
  105.                   <!-- end message -->
  106.                 </ul>
  107.                 <!-- /.menu -->
  108.               </li>
  109.               <li class="footer"><a href="#">See All Messages</a></li>
  110.             </ul>
  111.           </li>
  112.           <!-- /.messages-menu -->
  113.  
  114.           <!-- Notifications Menu -->
  115.           <li class="dropdown notifications-menu">
  116.             <!-- Menu toggle button -->
  117.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  118.               <i class="fa fa-bell-o"></i>
  119.               <span class="label label-warning">10</span>
  120.             </a>
  121.             <ul class="dropdown-menu">
  122.               <li class="header">You have 10 notifications</li>
  123.               <li>
  124.                 <!-- Inner Menu: contains the notifications -->
  125.                 <ul class="menu">
  126.                   <li><!-- start notification -->
  127.                     <a href="#">
  128.                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
  129.                     </a>
  130.                   </li>
  131.                   <!-- end notification -->
  132.                 </ul>
  133.               </li>
  134.               <li class="footer"><a href="#">View all</a></li>
  135.             </ul>
  136.           </li>
  137.           <!-- Tasks Menu -->
  138.           <li class="dropdown tasks-menu">
  139.             <!-- Menu Toggle Button -->
  140.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  141.               <i class="fa fa-flag-o"></i>
  142.               <span class="label label-danger">9</span>
  143.             </a>
  144.             <ul class="dropdown-menu">
  145.               <li class="header">You have 9 tasks</li>
  146.               <li>
  147.                 <!-- Inner menu: contains the tasks -->
  148.                 <ul class="menu">
  149.                   <li><!-- Task item -->
  150.                     <a href="#">
  151.                       <!-- Task title and progress text -->
  152.                       <h3>
  153.                         Design some buttons
  154.                         <small class="pull-right">20%</small>
  155.                       </h3>
  156.                       <!-- The progress bar -->
  157.                       <div class="progress xs">
  158.                         <!-- Change the css width attribute to simulate progress -->
  159.                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  160.                           <span class="sr-only">20% Complete</span>
  161.                         </div>
  162.                       </div>
  163.                     </a>
  164.                   </li>
  165.                   <!-- end task item -->
  166.                 </ul>
  167.               </li>
  168.               <li class="footer">
  169.                 <a href="#">View all tasks</a>
  170.               </li>
  171.             </ul>
  172.           </li>
  173.           <!-- User Account Menu -->
  174.           <li class="dropdown user user-menu">
  175.             <!-- Menu Toggle Button -->
  176.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  177.               <!-- The user image in the navbar-->
  178.               <img src="assets/img/user2-160x160.jpg" class="user-image" alt="User Image">
  179.               <!-- hidden-xs hides the username on small devices so only the image appears. -->
  180.               <span class="hidden-xs">Alexander Pierce</span>
  181.             </a>
  182.             <ul class="dropdown-menu">
  183.               <!-- The user image in the menu -->
  184.               <li class="user-header">
  185.                 <img src="assets/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  186.  
  187.                 <p>
  188.                   Alexander Pierce - Web Developer
  189.                   <small>Member since Nov. 2012</small>
  190.                 </p>
  191.               </li>
  192.               <!-- Menu Body -->
  193.               <li class="user-body">
  194.                 <div class="row">
  195.                   <div class="col-xs-4 text-center">
  196.                     <a href="#">Followers</a>
  197.                   </div>
  198.                   <div class="col-xs-4 text-center">
  199.                     <a href="#">Sales</a>
  200.                   </div>
  201.                   <div class="col-xs-4 text-center">
  202.                     <a href="#">Friends</a>
  203.                   </div>
  204.                 </div>
  205.                 <!-- /.row -->
  206.               </li>
  207.               <!-- Menu Footer-->
  208.               <li class="user-footer">
  209.                 <div class="pull-left">
  210.                   <a href="#" class="btn btn-default btn-flat">Profile</a>
  211.                 </div>
  212.                 <div class="pull-right">
  213.                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
  214.                 </div>
  215.               </li>
  216.             </ul>
  217.           </li>
  218.           <!-- Control Sidebar Toggle Button -->
  219.           <li>
  220.             <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
  221.           </li>
  222.         </ul>
  223.       </div>
  224.     </nav>
  225.   </header>
  226.  
  227.   <!-- Left side column. contains the logo and sidebar -->
  228.   <aside class="main-sidebar">
  229.  
  230.     <!-- sidebar: style can be found in sidebar.less -->
  231.     <section class="sidebar">
  232.  
  233.       <!-- Sidebar user panel (optional) -->
  234.       <div class="user-panel">
  235.         <div class="pull-left image">
  236.           <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  237.         </div>
  238.         <div class="pull-left info">
  239.           <p>Alexander Pierce</p>
  240.           <!-- Status -->
  241.           <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
  242.         </div>
  243.       </div>
  244.  
  245.       <!-- search form (Optional) -->
  246.       <form action="#" method="get" class="sidebar-form">
  247.         <div class="input-group">
  248.           <input type="text" name="q" class="form-control" placeholder="Search...">
  249.           <span class="input-group-btn">
  250.               <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
  251.               </button>
  252.             </span>
  253.         </div>
  254.       </form>
  255.       <!-- /.search form -->
  256.  
  257.       <!-- Sidebar Menu -->
  258.       <ul class="sidebar-menu" data-widget="tree">
  259.         <li class="header">HEADER</li>
  260.         <!-- Optionally, you can add icons to the links -->
  261.         <li class="active"><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li>
  262.         <li><a href="#"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
  263.         <li class="treeview">
  264.           <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
  265.             <span class="pull-right-container">
  266.                 <i class="fa fa-angle-left pull-right"></i>
  267.               </span>
  268.           </a>
  269.           <ul class="treeview-menu">
  270.             <li><a href="#">Link in level 2</a></li>
  271.             <li><a href="#">Link in level 2</a></li>
  272.           </ul>
  273.         </li>
  274.       </ul>
  275.       <!-- /.sidebar-menu -->
  276.     </section>
  277.     <!-- /.sidebar -->
  278.   </aside>
  279.  
  280.   <!-- Content Wrapper. Contains page content -->
  281.   <div class="content-wrapper">
  282.     <!-- Content Header (Page header) -->
  283.     <section class="content-header">
  284.       <h1>
  285.         Page Header
  286.         <small>Optional description</small>
  287.       </h1>
  288.       <ol class="breadcrumb">
  289.         <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
  290.         <li class="active">Here</li>
  291.       </ol>
  292.     </section>
  293.  
  294.     <!-- Main content -->
  295.     <section class="content container-fluid">
  296.  
  297.       <!--------------------------
  298.         | Your Page Content Here |
  299.         -------------------------->
  300.  
  301.     </section>
  302.     <!-- /.content -->
  303.   </div>
  304.   <!-- /.content-wrapper -->
  305.  
  306.   <!-- Main Footer -->
  307.   <footer class="main-footer">
  308.     <!-- To the right -->
  309.     <div class="pull-right hidden-xs">
  310.       Anything you want
  311.     </div>
  312.     <!-- Default to the left -->
  313.     <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
  314.   </footer>
  315.  
  316.   <!-- Control Sidebar -->
  317.   <aside class="control-sidebar control-sidebar-dark">
  318.     <!-- Create the tabs -->
  319.     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
  320.       <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
  321.       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
  322.     </ul>
  323.     <!-- Tab panes -->
  324.     <div class="tab-content">
  325.       <!-- Home tab content -->
  326.       <div class="tab-pane active" id="control-sidebar-home-tab">
  327.         <h3 class="control-sidebar-heading">Recent Activity</h3>
  328.         <ul class="control-sidebar-menu">
  329.           <li>
  330.             <a href="javascript:;">
  331.               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
  332.  
  333.               <div class="menu-info">
  334.                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
  335.  
  336.                 <p>Will be 23 on April 24th</p>
  337.               </div>
  338.             </a>
  339.           </li>
  340.         </ul>
  341.         <!-- /.control-sidebar-menu -->
  342.  
  343.         <h3 class="control-sidebar-heading">Tasks Progress</h3>
  344.         <ul class="control-sidebar-menu">
  345.           <li>
  346.             <a href="javascript:;">
  347.               <h4 class="control-sidebar-subheading">
  348.                 Custom Template Design
  349.                 <span class="pull-right-container">
  350.                     <span class="label label-danger pull-right">70%</span>
  351.                   </span>
  352.               </h4>
  353.  
  354.               <div class="progress progress-xxs">
  355.                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
  356.               </div>
  357.             </a>
  358.           </li>
  359.         </ul>
  360.         <!-- /.control-sidebar-menu -->
  361.  
  362.       </div>
  363.       <!-- /.tab-pane -->
  364.       <!-- Stats tab content -->
  365.       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
  366.       <!-- /.tab-pane -->
  367.       <!-- Settings tab content -->
  368.       <div class="tab-pane" id="control-sidebar-settings-tab">
  369.         <form method="post">
  370.           <h3 class="control-sidebar-heading">General Settings</h3>
  371.  
  372.           <div class="form-group">
  373.             <label class="control-sidebar-subheading">
  374.               Report panel usage
  375.               <input type="checkbox" class="pull-right" checked>
  376.             </label>
  377.  
  378.             <p>
  379.               Some information about this general settings option
  380.             </p>
  381.           </div>
  382.           <!-- /.form-group -->
  383.         </form>
  384.       </div>
  385.       <!-- /.tab-pane -->
  386.     </div>
  387.   </aside>
  388.   <!-- /.control-sidebar -->
  389.   <!-- Add the sidebar's background. This div must be placed
  390.   immediately after the control sidebar -->
  391.   <div class="control-sidebar-bg"></div>
  392. </div>
  393. <!-- ./wrapper -->
  394.  
  395. <!-- REQUIRED JS SCRIPTS -->
  396.  
  397. <!-- jQuery 3 -->
  398. <script src="bower_components/jquery/dist/jquery.min.js"></script>
  399. <!-- Bootstrap 3.3.7 -->
  400. <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  401. <!-- AdminLTE App -->
  402. <script src="dist/js/adminlte.min.js"></script>
  403.  
  404. <!-- Optionally, you can add Slimscroll and FastClick plugins.
  405.      Both of these plugins are recommended to enhance the
  406.      user experience. -->
  407. </body>
  408. </html>

AdminLTE项目的精简版本源代码

　　　　注意：不需要将这个源代码都复制过来，只需要将body里面第一个div复制过来就可以啦

  1. <div class="wrapper">
  2.  
  3.   <header class="main-header">
  4.  
  5.     <!-- Logo -->
  6.     <a href="index2.html" class="logo">
  7.       <!-- mini logo for sidebar mini 50x50 pixels -->
  8.       <span class="logo-mini"><b>A</b>LT</span>
  9.       <!-- logo for regular state and mobile devices -->
  10.       <span class="logo-lg">{{title}}</span>
  11.     </a>
  12.  
  13.     <!-- Header Navbar -->
  14.     <nav class="navbar navbar-static-top" role="navigation">
  15.       <!-- Sidebar toggle button-->
  16.       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  17.         <span class="sr-only">Toggle navigation</span>
  18.       </a>
  19.       <!-- Navbar Right Menu -->
  20.       <div class="navbar-custom-menu">
  21.         <ul class="nav navbar-nav">
  22.           <!-- Messages: style can be found in dropdown.less-->
  23.           <li class="dropdown messages-menu">
  24.             <!-- Menu toggle button -->
  25.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  26.               <i class="fa fa-envelope-o"></i>
  27.               <span class="label label-success">{{messageCount}}</span>
  28.             </a>
  29.             <ul class="dropdown-menu">
  30.               <li class="header">You have 4 messages</li>
  31.               <li>
  32.                 <!-- inner menu: contains the messages -->
  33.                 <ul class="menu">
  34.                   <li><!-- start message -->
  35.                     <a href="#">
  36.                       <div class="pull-left">
  37.                         <!-- User Image -->
  38.                         <img src="assets/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  39.                       </div>
  40.                       <!-- Message title and timestamp -->
  41.                       <h4>
  42.                         Support Team
  43.                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
  44.                       </h4>
  45.                       <!-- The message -->
  46.                       <p>Why not buy a new awesome theme?</p>
  47.                     </a>
  48.                   </li>
  49.                   <!-- end message -->
  50.                 </ul>
  51.                 <!-- /.menu -->
  52.               </li>
  53.               <li class="footer"><a href="#">See All Messages</a></li>
  54.             </ul>
  55.           </li>
  56.           <!-- /.messages-menu -->
  57.  
  58.           <!-- Notifications Menu -->
  59.           <li class="dropdown notifications-menu">
  60.             <!-- Menu toggle button -->
  61.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  62.               <i class="fa fa-bell-o"></i>
  63.               <span class="label label-warning">10</span>
  64.             </a>
  65.             <ul class="dropdown-menu">
  66.               <li class="header">You have 10 notifications</li>
  67.               <li>
  68.                 <!-- Inner Menu: contains the notifications -->
  69.                 <ul class="menu">
  70.                   <li><!-- start notification -->
  71.                     <a href="#">
  72.                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
  73.                     </a>
  74.                   </li>
  75.                   <!-- end notification -->
  76.                 </ul>
  77.               </li>
  78.               <li class="footer"><a href="#">View all</a></li>
  79.             </ul>
  80.           </li>
  81.           <!-- Tasks Menu -->
  82.           <li class="dropdown tasks-menu">
  83.             <!-- Menu Toggle Button -->
  84.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  85.               <i class="fa fa-flag-o"></i>
  86.               <span class="label label-danger">9</span>
  87.             </a>
  88.             <ul class="dropdown-menu">
  89.               <li class="header">You have 9 tasks</li>
  90.               <li>
  91.                 <!-- Inner menu: contains the tasks -->
  92.                 <ul class="menu">
  93.                   <li><!-- Task item -->
  94.                     <a href="#">
  95.                       <!-- Task title and progress text -->
  96.                       <h3>
  97.                         Design some buttons
  98.                         <small class="pull-right">20%</small>
  99.                       </h3>
  100.                       <!-- The progress bar -->
  101.                       <div class="progress xs">
  102.                         <!-- Change the css width attribute to simulate progress -->
  103.                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  104.                           <span class="sr-only">20% Complete</span>
  105.                         </div>
  106.                       </div>
  107.                     </a>
  108.                   </li>
  109.                   <!-- end task item -->
  110.                 </ul>
  111.               </li>
  112.               <li class="footer">
  113.                 <a href="#">View all tasks</a>
  114.               </li>
  115.             </ul>
  116.           </li>
  117.           <!-- User Account Menu -->
  118.           <li class="dropdown user user-menu">
  119.             <!-- Menu Toggle Button -->
  120.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  121.               <!-- The user image in the navbar-->
  122.               <img src="assets/img/user2-160x160.jpg" class="user-image" alt="User Image">
  123.               <!-- hidden-xs hides the username on small devices so only the image appears. -->
  124.               <span class="hidden-xs">Alexander Pierce</span>
  125.             </a>
  126.             <ul class="dropdown-menu">
  127.               <!-- The user image in the menu -->
  128.               <li class="user-header">
  129.                 <img src="assets/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  130.  
  131.                 <p>
  132.                   Alexander Pierce - Web Developer
  133.                   <small>Member since Nov. 2012</small>
  134.                 </p>
  135.               </li>
  136.               <!-- Menu Body -->
  137.               <li class="user-body">
  138.                 <div class="row">
  139.                   <div class="col-xs-4 text-center">
  140.                     <a href="#">Followers</a>
  141.                   </div>
  142.                   <div class="col-xs-4 text-center">
  143.                     <a href="#">Sales</a>
  144.                   </div>
  145.                   <div class="col-xs-4 text-center">
  146.                     <a href="#">Friends</a>
  147.                   </div>
  148.                 </div>
  149.                 <!-- /.row -->
  150.               </li>
  151.               <!-- Menu Footer-->
  152.               <li class="user-footer">
  153.                 <div class="pull-left">
  154.                   <a href="#" class="btn btn-default btn-flat">Profile</a>
  155.                 </div>
  156.                 <div class="pull-right">
  157.                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
  158.                 </div>
  159.               </li>
  160.             </ul>
  161.           </li>
  162.           <!-- Control Sidebar Toggle Button -->
  163.           <li>
  164.             <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
  165.           </li>
  166.         </ul>
  167.       </div>
  168.     </nav>
  169.   </header>
  170.  
  171.   <!-- Left side column. contains the logo and sidebar -->
  172.   <aside class="main-sidebar">
  173.  
  174.     <!-- sidebar: style can be found in sidebar.less -->
  175.     <section class="sidebar">
  176.  
  177.       <!-- Sidebar user panel (optional) -->
  178.       <div class="user-panel">
  179.         <div class="pull-left image">
  180.           <img src="../assets/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  181.         </div>
  182.         <div class="pull-left info">
  183.           <p>Alexander Pierce</p>
  184.           <!-- Status -->
  185.           <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
  186.         </div>
  187.       </div>
  188.  
  189.       <!-- search form (Optional) -->
  190.       <form action="#" method="get" class="sidebar-form">
  191.         <div class="input-group">
  192.           <input type="text" name="q" class="form-control" placeholder="Search...">
  193.           <span class="input-group-btn">
  194.               <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
  195.               </button>
  196.             </span>
  197.         </div>
  198.       </form>
  199.       <!-- /.search form -->
  200.  
  201.       <!-- Sidebar Menu -->
  202.       <ul class="sidebar-menu" data-widget="tree">
  203.         <li class="header">HEADER</li>
  204.         <!-- Optionally, you can add icons to the links -->
  205.         <li class="active"><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li>
  206.         <li><a href="#"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
  207.         <li class="treeview">
  208.           <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
  209.             <span class="pull-right-container">
  210.                 <i class="fa fa-angle-left pull-right"></i>
  211.               </span>
  212.           </a>
  213.           <ul class="treeview-menu">
  214.             <li><a href="#">Link in level 2</a></li>
  215.             <li><a href="#">Link in level 2</a></li>
  216.           </ul>
  217.         </li>
  218.       </ul>
  219.       <!-- /.sidebar-menu -->
  220.     </section>
  221.     <!-- /.sidebar -->
  222.   </aside>
  223.  
  224.   <!-- Content Wrapper. Contains page content -->
  225.   <div class="content-wrapper">
  226.     <!-- Content Header (Page header) -->
  227.     <section class="content-header">
  228.       <h1>
  229.         Page Header
  230.         <small>Optional description</small>
  231.       </h1>
  232.       <ol class="breadcrumb">
  233.         <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
  234.         <li class="active">Here</li>
  235.       </ol>
  236.     </section>
  237.  
  238.     <!-- Main content -->
  239.     <section class="content container-fluid">
  240.  
  241.       <!--------------------------
  242.         | Your Page Content Here |
  243.         -------------------------->
  244.  
  245.     </section>
  246.     <!-- /.content -->
  247.   </div>
  248.   <!-- /.content-wrapper -->
  249.  
  250.   <!-- Main Footer -->
  251.   <footer class="main-footer">
  252.     <!-- To the right -->
  253.     <div class="pull-right hidden-xs">
  254.       Anything you want
  255.     </div>
  256.     <!-- Default to the left -->
  257.     <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
  258.   </footer>
  259.  
  260.   <!-- Control Sidebar -->
  261.   <aside class="control-sidebar control-sidebar-dark">
  262.     <!-- Create the tabs -->
  263.     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
  264.       <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
  265.       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
  266.     </ul>
  267.     <!-- Tab panes -->
  268.     <div class="tab-content">
  269.       <!-- Home tab content -->
  270.       <div class="tab-pane active" id="control-sidebar-home-tab">
  271.         <h3 class="control-sidebar-heading">Recent Activity</h3>
  272.         <ul class="control-sidebar-menu">
  273.           <li>
  274.             <a href="javascript:;">
  275.               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
  276.  
  277.               <div class="menu-info">
  278.                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
  279.  
  280.                 <p>Will be 23 on April 24th</p>
  281.               </div>
  282.             </a>
  283.           </li>
  284.         </ul>
  285.         <!-- /.control-sidebar-menu -->
  286.  
  287.         <h3 class="control-sidebar-heading">Tasks Progress</h3>
  288.         <ul class="control-sidebar-menu">
  289.           <li>
  290.             <a href="javascript:;">
  291.               <h4 class="control-sidebar-subheading">
  292.                 Custom Template Design
  293.                 <span class="pull-right-container">
  294.                     <span class="label label-danger pull-right">70%</span>
  295.                   </span>
  296.               </h4>
  297.  
  298.               <div class="progress progress-xxs">
  299.                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
  300.               </div>
  301.             </a>
  302.           </li>
  303.         </ul>
  304.         <!-- /.control-sidebar-menu -->
  305.  
  306.       </div>
  307.       <!-- /.tab-pane -->
  308.       <!-- Stats tab content -->
  309.       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
  310.       <!-- /.tab-pane -->
  311.       <!-- Settings tab content -->
  312.       <div class="tab-pane" id="control-sidebar-settings-tab">
  313.         <form method="post">
  314.           <h3 class="control-sidebar-heading">General Settings</h3>
  315.  
  316.           <div class="form-group">
  317.             <label class="control-sidebar-subheading">
  318.               Report panel usage
  319.               <input type="checkbox" class="pull-right" checked>
  320.             </label>
  321.  
  322.             <p>
  323.               Some information about this general settings option
  324.             </p>
  325.           </div>
  326.           <!-- /.form-group -->
  327.         </form>
  328.       </div>
  329.       <!-- /.tab-pane -->
  330.     </div>
  331.   </aside>
  332.   <!-- /.control-sidebar -->
  333.   <!-- Add the sidebar's background. This div must be placed
  334.   immediately after the control sidebar -->
  335.   <div class="control-sidebar-bg"></div>
  336. </div>
  337. <!-- ./wrapper -->

需要复制的代码

　　　　注意：已经将源代码中的图片路径修改成了　assets/img/user2-160x160.jpg   ，所以需要在assets目录下添加一个img文件夹并放入图片user2-160x160.jpg

　　　　　　

　　　　　　注意：在angular-cli创建的angular应用中assets文件夹是用来存放静态资源的

　　添加了AdminLTE项目的精简版本源代码后adminSystem的效果图

　　　　

4 将AdminLTE项目的精简版本源代码中需要用到的外部模块通过npm命令下载到adminSystem应用中

　　因为AdminLTE项目的精简版本源代码中用到了一些外部模块的css样式和js文件，所以我们需要将这些模块下载到我们的应用中来

　　4.1 需要安装的包含css样式的外部模块

　　　　

　　　　npm install --save bootstrap

　　　　npm install --save font-awesome

　　　　npm install --save ionicons

　　　　npm install --save admin-lte

　　　　

　　　　如何判断模块是否安装成功

　　　　　　在adminSystem应用中的node-modules文件夹下面如果出现了相应模块的文件夹就说明安装成功啦

　　　　　　　　

　　4.2 需要安装的包含js代码的外部模块

　　　　

　　　　　　npm install --save jquery

　　　　　　

5 在 .angular-cli.json 这个配置文件中配置这些用到的外部模块中的css文件和js文件的路径

　　

　　根据AdminLTE项目的精简版本源代码书写css和js文件的路径

  1. {
  2.   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3.   "project": {
  4.     "name": "admin-system"
  5.   },
  6.   "apps": [
  7.     {
  8.       "root": "src",
  9.       "outDir": "dist",
  10.       "assets": [
  11.         "assets",
  12.         "favicon.ico"
  13.       ],
  14.       "index": "index.html",
  15.       "main": "main.ts",
  16.       "polyfills": "polyfills.ts",
  17.       "test": "test.ts",
  18.       "tsconfig": "tsconfig.app.json",
  19.       "testTsconfig": "tsconfig.spec.json",
  20.       "prefix": "app",
  21.       "styles": [
  22.         "styles.css",
  23.         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  24.         "../node_modules/font-awesome/css/font-awesome.min.css",
  25.         "../node_modules/ionicons/dist/css/ionicons.min.css",
  26.         "../node_modules/admin-lte/dist/css/AdminLTE.min.css",
  27.         "../node_modules/admin-lte/dist/css/skins/skin-blue-light.min.css"
  28.       ],
  29.       "scripts": [
  30.         "../node_modules/jquery/dist/jquery.min.js",
  31.         "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  32.         "../node_modules/admin-lte/dist/js/app.min.js"
  33.       ],
  34.       "environmentSource": "environments/environment.ts",
  35.       "environments": {
  36.         "dev": "environments/environment.ts",
  37.         "prod": "environments/environment.prod.ts"
  38.       }
  39.     }
  40.   ],
  41.   "e2e": {
  42.     "protractor": {
  43.       "config": "./protractor.conf.js"
  44.     }
  45.   },
  46.   "lint": [
  47.     {
  48.       "project": "src/tsconfig.app.json",
  49.       "exclude": "**/node_modules/**"
  50.     },
  51.     {
  52.       "project": "src/tsconfig.spec.json",
  53.       "exclude": "**/node_modules/**"
  54.     },
  55.     {
  56.       "project": "e2e/tsconfig.e2e.json",
  57.       "exclude": "**/node_modules/**"
  58.     }
  59.   ],
  60.   "test": {
  61.     "karma": {
  62.       "config": "./karma.conf.js"
  63.     }
  64.   },
  65.   "defaults": {
  66.     "styleExt": "css",
  67.     "component": {}
  68.   }
  69. }

　　注意：修改了 .angular-cli.json 配置文件后需要重新启动服务

6 修改从AdminLTE精简版本源代码复制过来的代码中的图片路径

　　将 dist/img/user2-160x160.jpg 替换成 assets/img/user2-160x160.jpg

　　

7 为adminSystem应用的入口页面的body元素添加css样式

　　因为AdminLTE的源代码中的body是由css演示的，而我们仅仅复制了body里面的内容过来，所以我们需要在adminSystem应用的入口页面中的body元素上添加相同的css样式

　　将 class="hold-transition skin-blue sidebar-mini" 加入到index.html中的body元素上即可

　　

8 最终adminSystem应用的效果图

　　

Angular07 利用angular打造管理系统页面的更多相关文章

  1. 利用angular打造管理系统页面

    1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目: ...

  2. 利用angular结合translate为项目实现国际化

    前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎 ...

  3. [后端人员耍前端系列]KnockoutJs篇：使用WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...

  4. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  5. 利用django打造自己的工作流平台(二):疫情统计系统

    相关文章: 利用django打造自己的工作流平台(一):从EXCEL到流程化运作 本文是“利用django打造自己的工作流平台”系列文章的第二篇,在自己开发的工作流平台中添加了一个用于排查统计可能受感 ...

  6. 利用angular与后台的交互

    记录的世界是强大的,不管天南海北还是五湖四海,如果利用angular js与后台的交互.angular js 在api上称为是http服务: 下面咱给一个简单的代码看看:简单的利用后台与前端的tab切 ...

  7. 怎样利用App打造自明星实现自盈利

    怎样利用App打造自明星实现自盈利 1.了解各个概念       为了大家都能看懂这篇文章,先说明几个概念.        App(Application):能够在移动设备上使用,满足人们咨询.购物. ...

  8. 利用koa打造restful API

    概述 最近学习利用koa搭建API接口,小有所得,现在记录下来,供以后开发时参考,相信对其他人也有用. 就目前我所知道的而言,API有2种,一种是jsonp这种API,前端通过ajax来进行跨域请求获 ...

  9. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

随机推荐

  1. String随笔

    1.古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:,请编写一个程序,使用上述算法加密或解密用户输入的英文字串要求设计思想.程序流程图.源代码.结果截图. 设计思想:1)定义一个String类型 ...

  2. Mybatis 接口方式对数据的增删改查 一对一关联查询

    数据库中有两个表 student 和studentInfo student表中的字段和数据 studentInfo表中的字段 ok数据库说完了,开始建立一个项目,对数据库中的数据进行操作吧 新建jav ...

  3. Elasticsearch使用积累

    常用插件 Head查看分片情况,操作简单api Bigdesk监控所在机器的CPU,IO,JVM等指标,简单分片概览 KOPF查看集群gc回收磁盘性能, 分片情况, 简单操作api, 感觉该插件较He ...

  4. BackBone 源码解读及思考

    说明 前段时间略忙,终于找到时间看看backbone代码. 正如知友们说的那样,backbone简单.随性. 代码简单的看一眼,就能知道作者的思路.因为简单,所以随性,可以很自由的和其他类库大搭配使用 ...

  5. 在ios7中使用zxing

    ZXing(Github镜像地址)是一个开源的条码生成和扫描库(开源协议为Apache2.0).它不但支持众多的条码格式,而且有各种语言的实现版本,它支持的语言包括:Java, C++, C#, Ob ...

  6. Java继承与接口

    public class test { public static void main(String[] args) { // TODO Auto-generated method stub B b= ...

  7. element table固定表头，表的高度自适应解决方法

    主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...

  8. cpu高的问题的快速定位

    功能问题,通过日志,单步调试相对比较好定位. 性能问题,例如线上服务器CPU100%,如何找到相关服务,如何定位问题代码,更考验技术人的功底. 58到家架构部,运维部,58速运技术部联合进行了一次线上 ...

  9. Azure Blob存储更改缓存时间

    Azure的Blob存储可以作为Http的服务来使用.很多客户已经把Blob作为图片存储的服务,这样稍作代码的修改,解决了图片服务器带宽.性能等多种问题. 但同时问题也出现了:在传统Http的服务中很 ...

  10. 基于RFC5321使用ncat发送邮件

    今天和同事学习到的这个方法,学习了,记录一下: [root@localhost ~]# ncat TeamServer.localdomain ESMTP Postfix EHLO l00.win - ...