Angularjs--nganimate Module

Use of 1.ngRoute modules

Steps to use:

(1) Create index.html, introduce CSS/JS, declare Ngview

(2) Create a template page

(3) Create the module, configure the routing dictionary

Module.config (function ($routeProvider) {

$routeProvider.

When ('/start ', {templateurl: ' xxx.html '})

})

(4) Test: Http://IP/index.html#/start

Use of 2.ngAnimate modules

Angular itself does not provide any animation effects, but the Nganimate module provides some "animated hooks" (hooks) that can hook user-defined JS (jquery.animate ()), Transition, Keyframes Animation effects.

The Nganimate module provides animation hooks for the following instructions: Ngrepeat, nginclude, Ngif, Ngswitch, Ngshow, Nghide, Ngview and Ngclass.

Demo: Use the animated hooks provided by Nganimate to invoke the custom transition animation effect.

(1) Introduction of Angular.js, Angular-animate.js

(2) Custom module declaration relies on the Nganimate module, the relevant instructions will automatically generate animation hooks

(3) Writing transition animations for animated hooks

/* The element to leave the animation at the beginning of the style */

. page.ng-leave {

left:0;

Opacity:1;

}

/* style of the element to leave at the end of the animation */

. page.ng-leave.ng-leave-active {

Left:-100%;

opacity:0;

}

/* Style to enter the beginning of the element animation */

. page.ng-enter {

left:100%;

opacity:0;

}

/* style of the element to enter at the end of the animation */

. page.ng-enter.ng-enter-active {

left:0;

Opacity:1;

}

3.AngularJS Phase Project

DAY01:

am: Complete the basic page transition effect

PM: Static content for each template page

Improve: Imitation "hungry" style to achieve bootstrap customization

DAY02:

am: Complete the background PHP page

PM: Initiating AJAX requests, rendering dynamic Data

4. Supplement: How to Implement page inclusion

Project, the habit of multiple pages of the exact same content, extracted separately as a separate file (such as header.html, footer.html), the need for this file page, the introduction of the page. The page contains a variety of scenarios that can be used:

(1) Using the Web server's SSI command: The client requests a page, the server returns multiple pages at one time-the Web server configuration file needs to be modified.

(2) Use the server-side dynamic language to provide page contains functions: such as PHP:

Include (' header.php ');

.... Echo ' body ';

Include (' footer.php ');

The client requests a page, and the server returns a page with multiple PHP page combinations.

(3) In the client using AJAX technology: First load the main content of a page, after loading, then request header.html, footer.html into the empty container

<div id= "Header" ></div>

<main>XXXXXXXX</main>

<div id= "Footer" ></div>

-----------------------------------------

$.ready (function () {

$ (' #header '). Load (' header.html ');

$ (' #footer '). Load (' footer.html ');

})

Tip: The Angularjs in NG module provides a directive: Nginclude, Method 3 has been implemented.

<div ng-include= "' tpl/header.html '" ></div>

Interview questions: Say the following code after running the effect:
view:       <p>{{count}}</p> Controller:     $scope. count=0;     setinterval (function () {       $scope. count++;    },	view:        <p>{{count}}</p> Controller:     $scope. count=0;     $interval (function () {       $scope. count++;     }, +)
view:       <p>{{count}}</p> Controller:     $scope. count=0;     setinterval (function () {       $scope. count++;       $scope. $digest ();    },	view:        <p>{{count}}</p> Controller:     $scope. count=0;     setinterval (function () {        $scope. count++;       $scope. $apply ();    },
view:       <p>count1: {{count1}}< /p>     <p>count2: {{count2}}</p> Controller:     $scope. count1=0;     $scope. count2=0;       setinterval (function () {       $scope. count1++;    },     $interval (function () {        $scope. count2++;    }, +)	View: <p>count1: {{count1}}</p> <p>count2: {{count2}}</p> Controller: $scope. count1=0; $scope. count2=0; SetInterval (function () { $scope. count1++; }, 1000) $interval (function () { $scope. count2++; }, 1000)

Angularjs--nganimate Module