|
刚写完一个app模块，内容是新闻分类。对于网页来说很简单，结构大致是这样的，请去这里看
https://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参数
- 在controller中注入$stateParams
- 以上面的为例，取id时调用
$stateParams.id，同理取num就是$stateParams.num
页面跳转的方法
- 标签的href
href="#/tab"
- js跳转
$location.path("/tab");
要注意在controller里先注入location也可以使用window，同样的，使用前需要依赖注入
$window.location.assign(url);
使用$window需要加#号
创建模板的方法
- 模板复杂时可以创建html文件作为模板
- 模板简单时可以在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./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不会改变。
|
