ionic2-基于angular2的学习总结

ionic2学习资料-经验总结

使用fontawesomeUse

Use Font Awesome Icons In Your Ionic 2 Android And iOS App
但是7.3号的文章，现在的并么有ionic.config.js文件。从gulp到rc0的npm script之后，配置文件不方便修改。所以使用font-awesome就把整个文件夹复制到assets然后手动链接css，好处是可以push到github方便云端同步。

ionic2使用第三方库，js模块的下载和声明，declariton.d.ts

视频上面的是可以提示第三方库js的函数和方法名，这个比较方便（目前又变了），目前还不同于angular2
typings install

样式默认直接添加到组件（比较方便）

ionic2 路由——>导航

详细博客教程

When should you push and when should you set the root page? At first, it may be hard to understand whether you should set the root page to navigate to a different page or push the view. In general, if the view you want to switch to is a child of the current view, or if you want the ability to navigate back to the previous view from the new view, you should push. For example, if I was viewing a list of artists and tapped on one I would want to push the details page for that artist. If I was going through a multi-page form and clicked ‘Next’ to go to page 2 of the form, I would want to push that second page.

If the view you are switching to is not a child of the current view, or it is a different _section_ of the application, then you should instead change the root page. For example, if you have a login screen that leads to the main application you should change the root page to be your main logged in view once the user has successfully authenticated. If you have a side menu with the options Dashboard, Shop, About and Contact you should set the root page to whichever of these the user selects.

Keep in mind that the root page is different to the root component, typically the root component (which is defined in app.component.ts) will declare what the root page is – the root page can be changed throughout the application, the root component can not.

不同页面传输数据 pass data between pages

上层页面

this.navCtrl.push(SecondPage, {
    thing1: data1,
    thing2: data2
});

下层也页面

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
 
@Component({
    templateUrl: 'second-page.html'
})
export class SecondPage {
    name:string;
    constructor(public navCtrl: NavController, public navParams: NavParams){
 
    }
    this.name=this.navParams.get('thing1');
}

然后可以在ts里面使用，也可以在htm数据模板里面{{}}以及各种绑定数据来使用，当然用setRoot时也一样可以使用

mvc mvvm- angular2

angular2 mvvm理解 http://lib.csdn.net/article/a...

how-to-create-a-data-model-in-ionic-2 (M)

实例讲解

Create the Data Model

Create a new file at app/models/checklist-model.ts and add the following


export class ChecklistModel {
 
    constructor(public title: string, public items: any[]){
 
    }
 
    addItem(item){
        this.items.push({
            title: item,
            checked: false
        });
    }
 
    removeItem(item){
 
        for(i = 0; i < this.items.length; i++) {
            if(this.items[i] == item){
                this.items.splice(i, 1);
            }
        }
 
    }
}

If you’ve already been playing around with Ionic 2, then this should look pretty similar to other components you’ve been creating. We’re creating a new class (for those unfamiliar with classes, a class is like a blueprint to create instances of objects – you can create many objects from the same class definition, which is exactly what we will be doing).
The class has a constructor which is run each time it is used to instantiate an object, and we’re using it to set up some data like the title and any items passed in or just an empty array for items. With the constructor set up this way we can either create a new data model like this:

new ChecklistModel('my checklist', itemsArray);

Then we have our addItem and removeItem functions defined, which manipulate the items array for us.

You can take this even further though and add some extra helper functions like this:

export class ChecklistModel {
 
    constructor(public title: string, public items: any[]){
 
    }
 
    addItem(item){
        this.items.push({
            title: item,
            checked: false
        });
    }
 
    removeItem(item){
 
        for(i = 0; i < this.items.length; i++) {
            if(this.items[i] == item){
                this.items.splice(i, 1);
            }
        }
 
    }
 
    renameItem(item, title){
        for(i = 0; i < this.items.length; i++) {
            if(this.items[i] == item){
                this.items[i].title = title;
            }
        }
    }
 
    setTitle(title){
        this.title = title;
    }
}

Now we can also rename items and change the tile of the checklist. We could take this even further still and have an ItemModel model defined so that each item inside of the checklist is also a nice object that we can manage (this would make our ChecklistModel cleaner because we are still manually manipulating the items array here).

Import and Use the Data Model

Add the following to the top of the home.js file:

import {ChecklistModel} from '../../models/checklist-model';

then you can use it anywhere simply by using:

new ChecklistModel('my checklist');

how-to-create-a-sliding-delete-button-for-lists

实例博客教程

released-an-ionic-2-angular-2-application

比较专业的ionic2案列教程-学习都有哪些考虑的，比如htt取数据，list,grid布局等等,modals等等

生成提交流程

how-to-use-pipes-to-manipulate-data-in-ionic-2

pipes编写实例-官方api为准，教程为辅学习参考

how-to-create-a-directive-in-ionic-2-parallax-header

实例博客教程（绑定id实现的，angular2官网有单独的属性绑定的

ionic-2-handling-a-simple-user-authorization

涉及this.root=homePage formPage 登陆验证的跳转问题 localStorage的存取