AngularJS（2）设计路由和基本页面

Angular路由和基本页面设计

---

Html部分

• 引入css和js

  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="app.css">
  <script src="../node_modules/angular/angular.min.js"></script>
  <script src="../node_modules/angular-route/angular-route.min.js"></script>
  <script src="../node_modules/angular-loader/angular-loader.min.js"></script>
  <script src="app.js"></script>
  <script src="components/autofocus.js"></script>
  <script src="components/http.js"></script>
  <script src="movie_list/controller.js"></script>

• 页面布局

  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">豆瓣电影</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">豆瓣电影</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
              <form class="navbar-form navbar-right">
                  <input type="text" class="form-control" placeholder="Search...">
              </form>
          </div>
      </div>
  </nav>
  <div class="container-fluid">
      <div class="row">
          <div class="col-sm-3 col-md-2 sidebar">
              <ul class="nav nav-sidebar">
              	<!-- 导航路由 -->
                  <li auto-focus class="active"><a href="#/in_theaters/1">正在热映</a></li>
                  <li auto-focus><a href="#/coming_soon/1">即将上映</a></li>
                  <li auto-focus><a href="#/top250/1">TOP250</a></li>
              </ul>
          </div>
          <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-view>
              
          </div>
      </div>
  </div>

• 注意

  • Html或Body标签写入：ng-app=”项目名称”，建议一个项目只出现一次ng-app

  • Html写入路由形式为：

    <li auto-focus class="active"><a href="#/in_theaters/1">正在热映</a></li>
    <li auto-focus><a href="#/coming_soon/1">即将上映</a></li>
    <li auto-focus><a href="#/top250/1">TOP250</a></li>

  • 载入视图的地方写入ng-view

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-view>
        
    </div>

JS部分

• 定义主模块

  angular.module('模块名称',[]);

• 写入依赖项

  angular.module('模块名称',['依赖1','依赖2',...]);

• 配置部分路由（其余情况），注入参数方式，方便压缩混淆

  模块实例.config(['$routeProvider',function($routeProvider){
  	$routeProvider.otherwise({redirectTo:'目标路由'});
  }]);

• 代码

  angular.module('moviecat', [
  	'ngRoute',
  	'moviecat.movie_list',
  	'moviecat.directives.autofocus'
  ]).config(['$routeProvider', function($routeProvider) {
  	//其余情况
  	$routeProvider.otherwise({ redirectTo: '/in_theaters/1' });
  }]);