刚写完一个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 } } })
url: "/tab/event/:id/:num"
参数按顺序加到url上
注意:引用url的时候必须给足对应的参数,否则路由会跳到空白页,或者出现其他异常
href="#/school/0/0"
$stateParams.id
,同理取num就是$stateParams.num
href="#/tab"
$location.path("/tab");
$window.location.assign(url);
$window
需要加#号< script id="templates/error.html" type="text/ng-template">
</ script>
模板具体说明
http://segmentfault.com/a/1190000000437230
$http.get(url).then(function(response){
// response是返回数据,成功的话json是 response.data
});
详细API详见https://code.angularjs.org/1.4.3/docs/api/ng/service/$http
var locationChangeSuccess = $rootScope.$on('$locationChangeSuccess', function(e){
//当path发生改变时就会被调用,可以使用$location.path()获取当前的path值
});
示例
http://blog.csdn.net/spy19881201/article/details/17096675
还可以用$ionicView.beforeEnter
需要在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"
}
}
})
联系客服