继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

未学者(wo)一步一步从ionic2学习到AngularJs(一)

栩栩然
关注TA
已关注
手记 4
粉丝 7
获赞 33
ionic2环境搭建

这里有详细安装步骤。ionic-china
注意:以管理员身份启动cmd,CLI的版本要合适。
实践项目转载至ionic新闻项目实践,途中所遇困难,我会一步步的努力去克服。学一点,写一点。比较慢,但都是脚步。


创建一个App项目
  • ionic start AppNews在当前目录创建一个新的项目。
  • 若当前目录有重复的名称,会提示是否重写,yes即可。
  • 看到图片所示,即项目创建成功。

图片描述


将项目导入前端开发工具,这里我用的是sublime,用什么的都可以,我以前用的Hbuild也很好用。
图片描述


对于整体框架的构思与学习
  • 对于刚接触Angular和ionic的我当然是把这个新的DEMO跑起来了。
  • 然后点击每个控件,发现url里面的有区别。
  • 再看目录结构,感觉templates目录下的html文件和Android里面的layout目录下的xml用法很类似。。感觉用到它的时候才把他扩展进去。
  • 按照项目里的图,我们需要5个子模块,和一个导航模块。导航模块是不会变的,我们只需要在点击导航里面的控件之后,跳转到相应模块即可。

修改底部导航栏
  • 观察demo的导航栏,和实践项目中导航栏。教程中让我们
    修改路由配置app.js。那么什么是路由配置呢,先去app.js看看。
    原来修改后

  • 对比demo和修改后的例子,可以发现,路由的意思。可以理解为点击不同的控件获取到不同的url,然后更新页面。
  • 然后再去带着这个发现去验证demo,点击之后对比url

url1
url2
url3

  • 由此可以了解到
.state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

之中的url:'/dash'是浏览器中的最后一位地址,而templateUrl:'xxxxx'则是这个地址所引用的具体html文件。(我大概是这么理解的)

  • MVC的理念其实我也不懂,但是看到下面的controller可以推断出,这个页面也被绑定了控制器,由控制器将tab-dash.html生成到index.html中。这个猜想我也不知道对不对,还是要去实践。接下来就去修改路由配置 app.js。
$stateProvider
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
  .state('tab.tab1', {
    url: '/tab1',
    views: {
      'tab1': {
        templateUrl: 'templates/tab1.html',
        controller: 'Tab1Ctrl'
      }
    }
  })
  .state('tab.tab2', {
    url: '/tab2',
    views: {
      'tab2': {
        templateUrl: 'templates/tab2.html',
        controller: 'Tab2Ctrl'
      }
    }
  })
  .state('tab.tab3', {
    url: '/tab3',
    views: {
      'tab3': {
        templateUrl: 'templates/tab3.html',
        controller: 'Tab3Ctrl'
      }
    }
  })
  .state('tab.tab4', {
    url: '/tab4',
    views: {
      'tab4': {
        templateUrl: 'templates/tab4.html',
        controller: 'Tab4Ctrl'
      }
    }
  })
  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });
  • tab是底部导航栏,所以也需要修改显示样式,tbs.html。
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <ion-tab title="健康" icon-off="ion-ios-pulse-strong" icon-on="ion-ios-pulse-strong" href="#/tab/tab1">
    <ion-nav-view name="tab1"></ion-nav-view>
  </ion-tab>
  <ion-tab title="医疗" icon-off="ion-ios-medkit" icon-on="ion-ios-medkit" href="#/tab/tab2">
    <ion-nav-view name="tab2"></ion-nav-view>
  </ion-tab>
  <ion-tab title="生活" icon-off="ion-coffee" icon-on="ion-coffee" href="#/tab/tab3">
    <ion-nav-view name="tab3"></ion-nav-view>
  </ion-tab>
  <ion-tab title="农业" icon-off="ion-leaf" icon-on="ion-leaf" href="#/tab/tab4">
    <ion-nav-view name="tab4"></ion-nav-view>
  </ion-tab>
  <ion-tab title="我" icon-off="ion-ios-person" icon-on="ion-ios-person" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>
</ion-tabs>
  • 然后是修改控制视图View的控制器,就是让temp目录下的html显示的东西,controller.js。
angular.module('starter.controllers', [])
.controller('Tab1Ctrl', function($scope) {})
.controller('Tab2Ctrl', function($scope) {})
.controller('Tab3Ctrl', function($scope) {})
.controller('Tab4Ctrl', function($scope) {})
.controller('AccountCtrl', function($scope) {});
  • 修改时,对应的templates目录里的html也需要修改。
    图片描述

  • 做到这一步,算是完成了一小步,对于整个结果有了小小的了解了。

图片描述


未学者(wo)一步一步从ionic2学习到AngularJs(二)

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP