Angular Learning (1): Dynamic template summary, angular Template

Angular Learning (1): Dynamic template summary, angular Template

Angular has recently been used in the project, and this js lib library has never been used before. As the project is also in a hurry, I have learned a little bit about it. So far, I have only learned what I have learned. The knowledge I have learned is summarized as follows:

Note 1:

Version: 1.2.2

NOTE 2:

In this article, angular is combined with bootstrap for front-end pages and logic processing. Here, ng's route, repeat, and ng-option are used for some simple ng knowledge, such as drop-down boxes.

Start angular programming:

1. Import files

<script src="lib/angular-1.2.2/angular-1.2.2/angular.min.js"></script><script src="lib/angular-1.2.2/angular-1.2.2/angular-route.min.js"></script>

2. Application of ng template:

Note:

In the background maintenance platformMenu on the left and operations on the rightIf angular is used here, ng template knowledge will be used.

Implementation Method (index. jsp)

1. The dynamic menu div declares that ng-view tells angular that the content is dynamic. Remember to introduce angular-route.

<span style="white-space:pre"></span><div id="right" style="width:1024px;height:600px;margin-left:210px;" ng-view></div>

2. The controller application, in ng's application, is the html file corresponding to the controller template, and the index file is no exception.

Case:

<span style="white-space:pre"></span><!-- route --><script type="text/javascript" src="js/controller/IndexController.js"></script><!-- controller --><script type="text/javascript" src="js/controller/AdvManageController.js"></script><script type="text/javascript" src="js/controller/RankManageController.js"></script>

Corresponding controller:

IndexController. js: Set var indexModule = angular for the route filter url. module ('index', ['ngroup']); indexModule. config (['$ routeProvider', function ($ routeProvider) {$ routeProvider. when ('/advmanage', {templateUrl :'. /subhtml/adv_manage.html '}); $ routeProvider. when ('/advmodifymanage', {templateUrl :'. /subhtml/adv_modify_manage.html '});}]);

NOTE 3:

After the above code is compiled, the dynamic menu operation is basically implemented. The when setting filters the corresponding html file through the url.

Note 4:

Precautions for template file controller and html are as follows (for example, adv_manage ):

A. Check the html file corresponding to the corresponding path based on the filter set in indexController.

B. Declare the corresponding controller name in the Html template file:

<div style="margin-top:20px;margin-left:40px;"ng-controller="AdvManageController">

C. AdvManageController. js

var module = angular.module('index');module.controller('AdvManageController',function($scope,$rootScope,$http){                              //somecode})

Summary:

Ng-view in ng is basically like this. To sum up, take the following steps:

1. Introduce ng lib, including ng-route

2. Define the corresponding indexController settings for filtering and define the corresponding Template File

3. Code the corresponding route to the corresponding html file