Ionic/Angularjs 知识点解析

angular-ui-router(状态跳转)

state的定义:(在app.js的config下配置)

	$stateProvider

	.state('app', {

	    url: '/app',

	    abstract: true,

	    templateUrl: 'app/menu.html',

	    controller: 'AppCtrl'

		})

	//state 跳转使用该参数名

	.state('app.myapp-home', {

	//使用href跳转使用该参数  格式为: ( #该参数 )

	url: "/myapp/home",

	views: {

	  	'menuContent': {

	    	templateUrl: "app/myapp/myapp-home.html",

	    	controller: 'myappHomeCtrl'

	  	}

	}

跳转

1. 使用js跳转 $state.go('app.myapp-home')
2. 在UI里使用href属性：href="#/myapp/home"
3. state 跟url使用同一个标识,可以减少使用时的混乱

事件阻断

	ng-click="questionValueClick(item,$event)"

	$scope.questionValueClick = function(item,$event){

		$event.stopPropagation();

		//do something

	}

$rootScope (全局变量缓存)

	$rootScope.currentDate = new Date();

	{{$root.currentDate}}

ng-repeat (重复绘制内容)

controller的配置

	angular.module('app.controllers')

	.controller('ExpectCtrl', ['$scope','ExpectService',function($scope,ExpectService) {

		//定义好需要用的数据

		$scope.data = {};

		$scope.data.repectData = ExpectService.getExpectData();

	}]);

UI的使用

	<div class="list">

		<!--使用ng-repeat,定义一个变量 使用in 语句 遍历目标数据列,改标签为循环体,里面的视图将会循环显示-->

		<div ng-repeat="expectItem in data.repectData">

			<!--使用{{ }}引用循环中的数据-->

			<div class="item item-divider">

				<span class="expect-label">目标:</span> <span>{{expectItem.title}}</span>

			</div>

			<a class="item" href="#">

				<span class="expect-label">描述:</span> <span>{{expectItem.desc}}</span>

			</a>

        </div>

	</div>

$q (用于返回promise格式的数据)

	//定义

	function makePromise (){

		获取一个deferred

		var deferred = $q.defer();

		var result = {name:'test'};

	    //返回一个成功结果

		deferred.resolve(result);

		//返回一个失败结果

		//deferred.reject(result);

	    return deferred.promise;

	} 

	//调用

	makePromise()

	//resolve会跳到这里

	.then(function(result){

		//result 为 {name:'test'}

		//do something

	})

	//reject会跳到这里

	.catch(function(result){

		//do something

	})

localStorage 的使用(本地缓存)

不能保存复杂的对象,所以保存对象要转为json格式

	//插入数据

	var userMap ={name:'Saber'};

	localStorage.setItem('userMap', JSON.stringify(userMap));

	//获取数据

	var result = JSON.parse(localStorage.getItem('userMap'))

ng-if,ng-show,ng-hide

区别

• ng-if 会直接把元素从dom里面移除
• ng-show,ng-hide 则只是隐藏
• ng-if 相比 ng-show 的性能方面会有很大的优化，当值为 false 的时候，ng-if 内所有绑定都不会执行，而ng-show 内依然会去重新渲染 ng-bind/ng-model。

使用

	<a ng-if = "isShowDelete"  class="tab-item">

		<i  class="icon ion-gear-a" ng-click ="showDelete()"></i>删除

	</a>

	<a ng-show = "isShowDelete"  class="tab-item">

		<i  class="icon ion-gear-a" ng-click ="showDelete()"></i>删除

	</a>

	<a ng-hide = "isShowDelete"  class="tab-item">

		<i  class="icon ion-gear-a" ng-click ="showDelete()"></i>删除

	</a>

ng-class(动态加载 class )

注意有最外面要有{}

	<button class="button button-icon button-clear "

      ng-class="{'ion-android-arrow-dropdown':data.tplType =='PIC','ion-plus-round':data.tplType =='NOTE'}">

    </button>

ng-model(双向绑定 使UI即时刷新)

注意model不要使用简单类型,否则会出现断层(用data封装一下)

	<textarea placeholder="Note" class="common-text" ng-model="data.newNote.desc"></textarea>

ng-include(实现界面局部切换)

	<div ng-include="template"></div>

	//ng-include:的属性应该为template的url,其根目录为 www

	$scope.template = 'app/myapp/temp/temp-product-detail.html';