未学者(wo)一步一步从ionic2学习到AngularJs（一）-原创手记-慕课网

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（二）