ANGULARJS Application Skeleton (2)

After a lapse of one weeks, the previous ANGULARJS application skeleton continues to talk about Angularjs other content.

Differentiate between UI and controller responsibilities

There are three types of responsibilities in the application controller:

1. Set the initial state for the model in the application

2. Exposing data models and functions to views through $scope objects (UI templates)

3, monitor the rest of the model changes, and take the corresponding action

What I'm trying to say is the third function: to keep the controller in a small, controllable state, our recommendation is to create a controller for each functional area in the view. That is, if you have a menu, create a Menucontroller, and if you have a breadcrumb navigation to create a navcontroller, you may already understand, but it is clear that the controller is bound to the DOM, and these fragments are what they need to manage. There are two ways to associate a controller to a DOM node, the first one is declared through the Ng-controller attribute, and the other is to bind it to a dynamically loaded DOM template fragment, called a view, via a route.

If your UI has some very complex areas, you can create nested controllers that can share data models and functions by inheriting the tree structure so that you can maintain the simplicity and maintainability of your code. The nested controller is very simple, just set the controller to a nested element inside the DOM element, as shown in the following example:

　　

1 <  ng-controller= "Parentcontroller">2         <  Ng-controller = "Childcontroller" ></ Div > 3 </ Div >

View Code

Although we call this the 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. Specifically to the above example, the $SOCPE on the Childcontroller can access the $ All properties (and functions) on the scope object.

Exposing models and data using $scope

The model data can be exposed to the view using the mechanism of passing $scope objects to the controller. There may be other data in your app, but angular will only use it as part of the data model only if it touches the data through $scope. You can think of $scope as a context, which makes the changes in the data model observable.

We have seen many examples of explicitly creating $scope properties. For example: $scope. count=5. You can also create a data model indirectly from a template. There are several ways you can achieve this.

1, through the expression. Since the expression is executed in the $scope environment in the controller, and this $scope is related to the element that they manage, setting the property in the expression and the $scope property value in the property controller is the same. In other words, you can do this:

　　

1 <ButtonNg-click= "Count=3">Set Count to 3</Button>2 <DivNg-controller= "Countcontroller">3     <ButtonNg-click= "SetCount ()">Set Count to 3</Button>4 </Div>5 <Scripttype= "Text/javascript">6     functionCountcontroller ($scope) {7 $scope. SetCount= function () {8 $cope. Count=3; 9         };Ten     } One </Script>

View Code

2. Use Ng-modal on form entry. Similar to expressions, the specified model parameters 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.

Using $watch to monitor changes in the data model

In the $scope built-in function, the most used is the $watch function, and when a part of your data model changes, $watch function can send you a notification. You can monitor the properties of individual objects, or you can monitor the results (functions) that need to be computed, as long as they can be accessed as a property, or can be computed as a JavaScript function, and can be monitored by the $watch function. Its function signature is $watch (Watchfn,watchaction,deetwatch).

Where parameter description:

WATCHFN: This parameter is a string with a angular expression or function that returns the current value of the data model being monitored in. This expression is executed many times, so make sure it doesn't have other side effects. In other words, make sure it is called many times without regretting changing the state.

Watchaction: This is a function or expression that will be called when the WATCHFN is changed. In the form of a function, it receives the new and old two values of WATCHFN, as well as a reference to the scope object. Its function signature is functions (Newvalue,oldvalue,scope).

Deepwatch: If set to true, tells Angualr to check whether each value of the monitored object has changed. Then the computational burden will be heavier.

Example: When a user adds a value in the cart that is more than USD, a discount is given to the USD:

　　

1 <!DOCTYPE HTML>2 <HTMLNg-app= "MYAPP">3 <Head>4     <MetaCharSet= "UTF-8">5     <title></title>6     <Scriptsrc= "Static/js/angular.js"type= "Text/javascript"></Script>7     <Scriptsrc= "Static/app/controller/shopingcartcontroller.js"type= "Text/javascript"></Script>8 </Head>9 <BodyNg-controller= "Mycontroller">Ten     <Div> One         <H1>Your shoping Cart</H1> A         <Divng-repeat= "Item in Items"> -             <span>{{Item.title}}</span> -             <inputtype= "text"Ng-model= "Item.quantity"/> the             <span>{{item.quantity | currency}}</span> -             <span>{{Item.quantity * item.price | currency}}</span> -             <ButtonNg-click= "Remove ($index)">Remove</Button> -         </Div> +  -         <Div>Total:{{totalcart () | currency}}</Div> +         <Div>Discount:{{bill.discount | currency}}</Div> A         <Div>subtotal:{{Subtotal () | currency}}</Div> at     </Div> - </Body> - </HTML>

View Code

1 /**2 * Created by Administrator on 2015/6/12.3  */4 varApp=angular.module (' MyApp '),[]);5App.controller (' Mycontroller ',function($scope) {6$scope. bill={};7$scope. items=[8{title: "Badminton", quantity:8,price:3.99},9{title: "Basketball", quantity:17,price:1.99},Ten{title: "Football", quantity:5,price:3.99} One     ]; A  -$scope. remove=function(index) { -$scope. Items.splice (index,1); the     } -  -  -$scope. totalcart=function () { +         varTotal=0; -          for(varI= 0,len= $scope. items.length;i<len;i++){ +Total=total + $scope. Items[i].price *$scope. items[i].quantity; A         } at         returnTotal ; -     }; -  -$scope. subtotal=function () { -         return$scope. Totalcart ()-$scope. Discount; -     }; in  -  to     functionCalulateddiscount (newvalue,oldvalue,scope) { +$scope. bill.discount=newvalue > 100? 10:0; -     }; the  * $scope. $watch ($scope. totalcart,calulateddiscount); $});

View Code

：

Performance considerations in $watch ()

Cond......

　　

　　

ANGULARJS Application Skeleton (2)