Creating Views with Ionic

As covered in my Structure of an Ionic App post, views are the presentation layer of an Ionic App that display the data provided by a controller’s $scope. These views are often referred to as templates because Angular controllers refer to them as such. Because of this, views are often stored in a /templates folder where each view is in a separate .html file. A view is where the mark-up for state, or page, of your app lives.

Basics

A basic view in Ionic will look something like this:

<ion-view title="About">
	<ion-content>
		My super cool content here.
	</ion-content>
</ion-view>

To put some dynamic content into our view from our controller’s $scope, we use double opening and closing curly braces around the name of the $scope variable.

<ion-view title="About">
	<ion-content>
		My super cool content here! My name is {{name}}
	</ion-content>
</ion-view>

If we defined the name variable in our controller as…

$scope.name = "Andrew";

… our view will render as:

<ion-view title="About">
	<ion-content>
		My super cool content here! My name is Andrew
	</ion-content>
</ion-view>

Two Way Data Binding

In Angular, there is the concept of two-way data binding. Before we explain what that is, let’s see an example of one-way data binding.

Let’s say in a controller, we’ve defined a $scope variable called name.

$scope.name = "Andrew";

And in our view, we output it as follows

<ion-view title="About">
	<ion-content>
		My super cool content here! My name is {{name}}
	</ion-content>
</ion-view>

When our view is rendered, {{name}} will be replaced with “Andrew”. This method of binding data from our controller to our view is one-way data binding.

Where it becomes two-way data binding is when data from the view is passed to the controller. For example, say we have a “name” input box.

<input type="text" />

We can add the ng-model attribute to it and the value of the input box would be accessible from the $scope.

<input type="text" ng-model="name" />

The value of the ng-model attribute is the name of the variable in the scope. Now, we can access this value both from our controller and our view.

console.log($scope.name); //Value from the textbox

<input type="text" ng-model="name" />
Hello {{name}}!

This passing of user input from the view to the controller’s $scope, and our first concept, together make up two-way data binding.

Loops

If you’ve ever done any server side programming, you’ll be familiar with the concept of looping through a collection of objects using a for each loop. In server side programming, it might look something like this…

for(Person person in people){
	person.firstName //Andrew
	person.lastName //McGivery
}

In Ionic/Angular, we can do this exact thing using ng-repeat.

<div ng-repeat="person in people">
	{{person.firstName}}
	{{person.lastName}}
</div>

people would be a scope variable that is an array of objects. For example:

$scope.people = [
	{
		firstName: "Andrew",
		lastName: "McGivery"
	},
	{
		firstName: "John",
		lastName: "Smith"
	}
]

In my ng-repeat, person is the name of the variable I am using to represent each iteration, or each person object in the people array. My above example would render as:

<div>
	Andrew
	McGivery
</div>
<div>
	John
	Smith
</div>

Collection-repeat

If you have a list with a large number of items (more than 100), you may begin to notice some slow down withng-repeat. Luckily, Ionic has a directive called collection-repeat which is made exactly for this situation. It supports lists with thousands of items in them by only rendering the items that are currently visible on the screen. A couple pre-requisites (from the docs):

1. The data supplied to collection-repeat must be an array.
2. You must explicitly tell the directive what size your items will be in the DOM, using directive attributes. Pixel amounts or percentages are allowed (see below).
3. The elements rendered will be absolutely positioned: be sure to let your CSS work with this (see below).
4. Each collection-repeat list will take up all of its parent scrollView’s space. If you wish to have multiple lists on one page, put each list within its own ionScroll container.
5. You should not use the ng-show and ng-hide directives on your ion-content/ion-scroll elements that have a collection-repeat inside. ng-show and ng-hide apply the display: none css rule to the content’s style, causing the scrollView to read the width and height of the content as 0. Resultingly, collection-repeat will render elements that have just been un-hidden incorrectly.

Let’s look at an example using our people array.

<div class="list">
	<div class="item" collection-repeat="person in people"
		collection-item-width="'100%'"
		collection-item-height="'25'">
		{{person.firstName}}
		{{person.lastName}}
	</div>
</div>

More or less, we just had to replace ng-repeat with collection-repeat, add a couple more attributes for dimensions, and we’re done! Ready for the next 10,000 items.

ng-if/ng-show

We can add a bit of logic to our views using ng-if/ng-show. Using our example from above, say I want to show a message if our people list is empty:

<div class="item" ng-show="!people.length">
	No people found.
</div>

The value of ng-show is an expression, which can call a function from the controller if needed.

$scope.showPeople = function(){
	return false;
}

<div class="item" ng-show="showPeople()">
	No people found.
</div>

We can also write this example using ng-if.

<div class="item" ng-if="!people.length">
	No people found.
</div>

So… what’s the difference?

“The ngIf directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.”

“The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).”

Because of the nature of how these works, you may notice that ng-show is sometimes noticeable faster than ng-if, however there are other instances where ng-if will appear to be faster.

ng-click

Pretty simple, allows you to call a function when an element is clicked:

$scope.clickFunction = function(){
	alert("I was clicked!");
}

<button ng-click="clickFunction()">Click Me!</button>

Conclusion

Views are the presentation layer of your application and have lots of options for interacting with the controller. For a better idea of how views fit into the overall picture, be sure to check out my Structure of an Ionic App post.

转自:http://mcgivery.com/creating-views-with-ionic/