Use angularjs to develop next-generation web applications (2): angularjs application skeleton (2)

Use angularjs to develop next-generation web applications (2): angularjs application skeleton (2)

1.Non-invasive JavaScript

... These commands differ from the original event processor in the following ways:
Same behavior in all browsers. Angular will help you shield differences.

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

2.List, table, and other iterative Elements

Ng-repeat may be the most useful Angular command. It can create multiple copies of a group of elements at a time based on the items in the set. You can use this command 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:

 
 

  
  
{{student.name}}
 
 
Insert

The ng-repeat command returns the serial number of the currently referenced element through $ index, and returns a Boolean value through the $ first, $ middle, and $ last, ng-repeat commands, indicates whether the current element is the first element in the Set, an element in the middle, or the last element.

Html code:

 
 

  
  
 
   
 
    
{{$index + 1}}
 
    
{{track.name}}
 
    
{{track.duration}}
 
   
 
  
 
 

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 display
In this example, ng-show and ng-hide are used. The functions of these two commands are equivalent, but the running effect is the opposite. They can display or hide elements based on the expressions you pass.

The operating principle of these two commands is: Set the element style to display the element according to the actual situation, and set it to display: none to hide the element.

4.CSS class and Style

Angular provides ng-class and ng-style commands. Both commands can accept an expression. The result of expression execution may be one of the following values:
A string that represents the CSS class name and is separated by spaces.
CSS class name array.
CSS ing CSS class names to boolean values.

Css code:

.selected {background-color: lightgreen;}

In the template, we set ng-class to {selected: $ index = selectedRow }. The result is that when the value of the model attribute selectedRow is equal to $ index in ng-repeat, the selected style will be set to that row.

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:

 
 

  
  
 
   
 
    
{{restaurant.name}}
 
    
{{restaurant.cuisine}}
 
   
 
  
 
 

5. Reflect on the src and href attributes

Angular has no chance to intercept data binding requests because the browser preferentially uses parallel methods to load images and other content.
Here the ng-src command should be used, and your template should be written as follows:

Similarly, the ng-href command should be used for tags:
Some text

6.Expression

Expressions are executed through Angular's built-in parser. In this parser, you cannot find the loop structure (for, while, etc.), flow control operators (if-else, throw ), and modify the data operator (++ ,--). When you need these types of operators, Please execute them in your controller or through instructions. Although expressions are more rigorous than JavaScript expressions in many aspects, they have better fault tolerance for undefined and null. If an error occurs, the template simply does not display anything, rather than throwing an NullPointerException error.

7.Differentiate ui and controller responsibilities

In applications, controllers have three responsibilities:

1> set the initial state for the model in the application.
2> expose data models and functions to the view (UI template) through the $ scope object ).
3> monitor changes in other parts of the Model and take corresponding actions.

Creates a controller for each functional area in the view.

There are two main ways to associate the controller to a DOM node. The first is to declare the controller in the template through the ng-controller attribute, the other is to bind it to a Dynamically Loaded DOM template fragment through routing, which is called a view.

...

Although we call this method controller nesting, real nesting occurs on the $ scope object. Through the internal prototype Inheritance Mechanism, the $ scope on the parent controller object will be passed to the $ scope of the internal nested controller. With
In the example above, the $ scope object of ChildController can access all attributes (and functions) on the $ scope object of ParentController ).

8.Expose model data using $ scope

We have seen many examples for explicitly creating the $ scope attribute, such as $ scope. count = 5. You can also create a data model through the template itself. You can achieve this in the following ways.
1> use expressions.

Set count to three

2> Use ng-model in the input form.Similar to expressions, the model parameters specified on ng-model also work in the outer controller. The only difference is that it establishes a bidirectional binding relationship between the form item and the specified model.