ionic项目页面与路由

刚写完一个app模块，内容是新闻分类。对于网页来说很简单，结构大致是这样的，请去这里看
http://img.blog.csdn.net/20151127170604395

页面规划

底部是模块，首页是个资讯版块
资讯的上部是分类导航，主体是内容列表，点击可进入详情页
模块导航用< ion-tabs class=”tabs-bottom”>，保持一直底部
资讯导航用< ion-header-bar>，保持一直在顶部，并且是动态的

下面列一些用到的代码

路由设置

$stateProvider .state('tab', {
// cache: false,//是否缓存
url: "/tab/event",
abstract:true,//默认加载
templateUrl: "templates/event.html"//模板
})
这样模板会默认加载到ion-nav-view中，也可以指定加载到某个ion-nav-view中，使用name属性
<ion-nav-view name="viewType"></ion-nav-view>

//对应的路由写法是$stateProvider .state('tab', {        url: "/tab/event",        views:{               "viewType":{               //viewType与ion-nav-view的name属性对应，如果dom中没有name属性值是viewType的ion-nav-view，那很有可能不会渲染模板页面            templateUrl: "templates/event.html"//模板            ,controller:'controller_events_list'//controller                }        }  })

ionic也支持url参数

url: "/tab/event/:id/:num"

url参数引用的方法

参数按顺序加到url上
注意：引用url的时候必须给足对应的参数，否则路由会跳到空白页，或者出现其他异常

  href="#/school/0/0"

$stateParams获取url参数

1. 在controller中注入$stateParams
2. 以上面的为例，取id时调用$stateParams.id，同理取num就是$stateParams.num

页面跳转的方法

1. 标签的href
   href="#/tab"
2. js跳转
   $location.path("/tab");
   要注意在controller里先注入location也可以使用window，同样的，使用前需要依赖注入
   $window.location.assign(url);
   使用$window需要加#号

创建模板的方法

1. 模板复杂时可以创建html文件作为模板
2. 模板简单时可以在index中使用script标签创建模板
   < script id="templates/error.html" type="text/ng-template">
</ script>
   templates/error.html就是模板的路径。
   这是内存模板
   模板具体说明
http://segmentfault.com/a/1190000000437230

请求json

$http.get(url).then(function(response){
// response是返回数据，成功的话json是 response.data
});
详细API详见https://code.angularjs.org/1.4.3/docs/api/ng/service/$http

侦听path变化

var locationChangeSuccess = $rootScope.$on('$locationChangeSuccess', function(e){
//当path发生改变时就会被调用，可以使用$location.path()获取当前的path值
});
示例
http://blog.csdn.net/spy19881201/article/details/17096675
还可以用$ionicView.beforeEnter

ng-bind-html动态写入html

需要在module注入’ngSanitize’
<div ng-bind-html="anyHtmlStr">

父子路由

在布局页面里，通常会有一组页面是同级的，像登录、注册、找回密码。习惯上希望给这三个页面建立一个同级的逻辑关系。这里涉及parent.child写法。
比如下面的代码：
/auth是父级总管，无法加载auth.login还是其他auth.xx，都会默认加载/auth的模板内容，这里我设置成了”“，模板不包含内容。如果/auth中有内容，则是/auth开头的页面共用的。

//登录相关 
  .state('auth', { 
    url: '/auth', 
    views:{ 
      'otherPage':{ 
          templateUrl: "" 
      } 
    } 
  }) 
  //登录界面 
  .state('auth.login', { 
    url: '/login', 
    views:{ 
      'otherPage':{ 
          templateUrl: "login.html", 
          controller:'controller_login' 
      } 
    } 
  }) 
  //注册 
  .state('auth.register', { 
    url: '/register', 
    views:{ 
      'otherPage':{ 
          templateUrl: "register.html", 
          controller:"controller_register" 
      } 
    } 
  })

另外，如果当前路径是/auth时，去加载/auth/register这样的子页面，不会渲染成功。虽然会触发$stateChangeSuccess，但没有渲染模板，dom不会改变。