Developing next-generation Web applications with ANGULARJS (ii): ANGULARJS application Skeleton (ii)

1. talking about non-intrusive JavaScript

<div ng-click= "dosomething ()" >...</div> These directives differ from the original event handlers in the following ways:
Have the same behavior in all browsers. Angular will help you block the difference.

Operations are not performed in the global namespace. The expression you specify can only access functions and data within the scope of the element controller.

2. lists, tables, and other iterative elements

Ng-repeat is probably the most useful angular directive, which can create multiple copies of a set of elements at once, based on the items in the collection. You can use this doctrine wherever you want to create a list of things.

JS Code:

var students = [{name: ' Mary contrary ', id: ' 1 '},{name: ' Jack sprat ', id: ' 2 '},{name: ' Jill Hill ', ID: ' 3 '}];function Studentlistcontroller ($scope) {$scope. Students = students; $scope. Inserttom = function () {$scope. Students.splice (1, 0, {name: ' Tom Thumb ', ID: ' 4 '});};}

HTML code:

<ul ng-controller= ' studentlistcontroller ' ><li ng-repeat= ' student in students ' ><a href= '/student/view /{{student.id}} ' >{{student.name}}</a></li></ul><button ng-click= "InsertTom ()" >Insert </button>

The ng-repeat instruction can return the ordinal of the element currently referenced by $index, and can also return a Boolean value through $first, $middle, and $last,ng-repeat instructions, telling you whether the current element is the first element in the collection, an element in the middle, or the last element.

HTML code:

<table ng-controller= ' albumcontroller ' ><tr ng-repeat= ' track in album ' ><td>{{$index + 1}}</td ><td>{{track.name}}</td><td>{{track.duration}}</td></tr></table>

JS Code:

var album = [{name: ' Southwest Serenade ', Duration: ' 2:34 '},{name: ' Northern Light Waltz ', Duration: ' 3:21 '},{name: ' Eastern Tango ', Duration: ' 17:45 '}];function albumcontroller ($scope) {$scope. album = album;}

3. Hide and show
This example will use Ng-show and ng-hide. The functions of these two instructions are equivalent, but the effect is the opposite, and they all display or hide the elements according to the expression you are passing.

The two instructions work by setting the element's style to Display:block to show the element, and setting it to display:none to hide the element.

4.CSS classes and styles

The angular provides ng-class and ng-style instructions. All two instructions can accept an expression, and the result of the expression execution may be one of the following values:
A string that represents the CSS class name, separated by a space.
CSS class an array group.
A mapping of CSS class names to Boolean values.

CSS code:

. selected {Background-color:lightgreen;}

In the template, we set the Ng-class to {selected: $index ==selectedrow}. The effect of this is that when the value of the model property Selectedrow equals the $index in Ng-repeat, the selected style is set to that line.

JS Code:

function Restauranttablecontroller ($scope) {$scope. directory = [{name: ' The handsome Heifer ', cuisine: ' BBQ '},{name: ' Green ' s green Greens ', cuisine: ' Salads '},{name: ' House of Fine Fish ', cuisine: ' Seafood '}]; $scope. selectrestaurant = function (row) {$scope. Selectedrow = row;};}

HTML code:

<table ng-controller= ' restauranttablecontroller ' ><tr ng-repeat= ' restaurant in directory ' ng-lick= ' Selectrestaurant ($index) ' ng-class= ' {selected: $index ==selectedrow} ' ><td>{{restaurant.name}}</td> <td>{{restaurant.cuisine}}</td></tr></table>

5. Rethinking src and href attributes

because browsers take precedence over loading pictures and other content in parallel, angular does not have the opportunity to intercept data-binding requests.
The NG-SRC directive should be used here, and your template should be written like this:

Similarly, for <a> tags, you should use the NG-HREF directive:
<a ng-href= "/shop/category={{numberofballoons}}" >some text</a>

6. Expressions

The expression is executed through the angular built-in parser. In this parser, you cannot find the loop structure (for, while, etc.), the Process Control operator (If-else, throw), and the operator that modifies the data (+ + 、--). When you need these types of operators, execute them in your controller or through instructions. While the expressions here are more restrictive than JavaScript in many ways, they are better tolerant of undefined and null. If an error is encountered, the template simply does not show anything, and does not throw a nullpointerexception error.

7. distinguishing between UI and controller responsibilities

There are three types of functions in the application controller:

1> sets the initial state for the model in the app.
2> exposes data models and functions to Views (UI templates) through $scope objects.
3> monitors changes in the rest of the model and takes corresponding actions.

Create a controller for each functional area in the view.

There are two main ways to associate a controller to a DOM node, the first one being declared by the Ng-controller property in the template, and the other by routing it to a dynamically loaded DOM template fragment called a view.

<div ng-controller= "Parentcontroller" ><div ng-controller= "Childcontroller" >...</div></div >

Although we call this a controller nesting, the real nesting occurs on the $scope object. Through the internal prototype inheritance mechanism, the $scope on the parent controller object is passed to the $scope of the internal nested controller. With
Body to the above example, Childcontroller's $scope object can access all the properties (and functions) on the Parentcontroller $scope object.

8. exposing model data using $scope

We have seen many examples of explicitly creating $scope properties, such as $scope.count = 5. You can also indirectly create a data model from the template itself. There are several ways you can achieve this.
1> is passed through an expression.

<button ng-click= ' count=3 ' >set count to Three</button>

2> use Ng-model on form entries. similar to expressions, the model parameters specified on Ng-model also work inside the outer controller. The only difference is that this establishes a two-way binding relationship between the form item and the specified model.