Each Angular "application" ng-app has an injector, is responsible for creating and look for a dependency, when the cache is not dependent key1, mind dependent objects as {key1: null, key2: value2 , ...}, and later when key1 the event, key1 modify dependency object {key1: value1, key2: value2 , ...}, after all the file is loaded, and executed config global configuration functions RUN, if all the file is loaded, key1 did not appear, it will error , does not perform global configuration functions.
First, the design ideas of Title element:
1, Reference Crossing the tag
(1) the content of the title
2, the template
(1) <IMG-ng the src = "{{ './ title.png'}}">
(2) < span> {{}} title </ span>
. 3, the controller (empty), Link (empty)
Second, the local loading assembly design ideas:
1, reference Crossing the tag
(1) image name
(2) is rotating
( 3) whether there
2, template
(. 1) <IMG-ng the src = "{{ '+ ./'+ name'. PNG '}}">
3, the controller (empty), there Link
(. 1) if the rotation, using ele.addClass ( ""), may be ele.css ({})
Third, the overall design concept of the loading assembly:
1, the transfer parameter tag attributes (none)
2, the template
(1) the root tag, is displayed (requested by the the results of the assignment), class (under the mask images and masks)
Label (2) sub-label, A, partial loading assembly, there is a reference picture Crossing the tag name, the rotation class, B, text prompts
3, the controller (empty), Link (empty)
design ideas four global prompt assembly tips and global service:
1, the tag attribute parameter passing (no)
2, the template
(1) root tag, class (under the picture masks and masks)
(2) sub-label, through the array, binding text prompts
3, controller
(1) receives a global alert services
4, a global alert services
(1) defines an empty array and tips objects
(2) defined setting function, parameter prompt content inside the prompt function prompts the content into objects, the prompt object discharge into the empty array, performing a single timer (iterate, the prompt object deletion array)
five design ideas switch assembly
1, reference Crossing the tag
(1) is a parameter data is controlled by another switch, this parameters defined in the control switch in
(2) parameter 2 is section data, including the control of this switch parameters may also have sent a request to the background callback function
2, the template
(1) can change the image file name, image name, and parameter 2 control properties phase switch Association, such as: ng-the src = "{{ './'+ config [data.value] +' PNG '}.}"
(2) click function performs
3, the controller
(1) arranged picture name, $ scope. = {0 config: 'switch-OFF'}
(2) click defined functions, there are scope.data.value = 0 $
. 4, when the click function is defined, the factors that should be considered
(1) is controlled by the other switch
(2) whether to send the request to the background, to control the switch according to the parameter assignment request result;
(3) the control switch to the parameter assignment
six, a complex logic page
1, page composition
(1) to jump to this page with parameters
( 2) filtering condition
(3) the radio page to be recorded, Select All Select all the pages
(4) comprising interaction and pop tab
(5) tab
(6) a data request, there are local and global circling circular motion
(7 ) when you refresh, refresh prompted the success or failure of
2, page logic
(1) in the paging services, the route except for the configuration of this page initialization,
(2) Select the service, paging service, a combination of both, on the a service, the injection of this page, the method scope of this page in the service of incoming and executed this page to configure the public properties and methods.
(3) when the page is initialized to normal rendering, and then decide based on whether there are parameters: whether to expand the filter condition, the default value filter condition, whether secondary rendering.
(4) the page associated with the present paging paging component attributes to attribute parameter passing by way paging component definition request function, the function can also be invoked in the present page and paging services.
(5) in the service request, let circling appear and disappear; when a request event twice, the results of the two requests are returned, circling let disappear.
3, following the relevant code
(function () {
Angular
.module ( 'Policy-Module1')
.controller ( 'policyWhiteOrderCtrl', function ($ scope, tradeApi, $ stateParams, clickCheckbox) {
$ scope.currentPageDatas new new clickCheckbox.init = ( 'whiteListId');
scope.broadcastToPagination = {$
filter_option is: {}, / * page filter conditions * /
start_filter: function (the callback) {
this.reload ()
}, / * filter function, utility * /
URL: 'seclity / wlist / The getinfo',
page: 'page_total', / * name of unified parameters * /
TotalPage: 'page_total', / * name of unified parameters * /
Total: 'datas_total', / * name of unified parameters * /
the callback: function (RES) {/ * paging request after the execution, calling the callback * /
$ scope [ 'List'] = res.wlists ;
$ scope [ 'toPaginationDatas'] [', CUST '] = [{/ * The following can be arranged in the page, available * / tab in Lane
txt:' enabled ',
Data: res.deployed_total,
Unit:' strips, '
}];
$ scope.currentPageDatas.page ($ scope [' List '], res.datas_total);
}
};
$ scope.init = function (type) {
request_param = {var
Method: 'POST',
the root: 'seclity',
URL: '/ wlist / The getinfo',
the params: {
pageNum:. 1
},
scope:{
scope: $ scope,
initload_key: 'initload'
},
Load: $ scope.broadcastToPagination.load (. 3)
};
IF (type === 'reload') Delete request_param.load;
tradeApi
.query (request_param)
.then (function (RES) {
$ = res.wlists scope.list ;
$ scope.toPaginationDatas = {/ * there is little data * /
, CUST: [{/ * the following can be arranged in the page, available * / tab in Lane
txt: 'enabled',
data: RES. deployed_total,
Unit: 'item,'
}],
/ * the following must be injected into the tab, the tab may be acquired in the in * /
Page: res.page_current,
TotalPage: res.page_total,
Total: res.datas_total
};
$ scope.pre_params_fun ();
});
tradeApi
.query({
method: 'get',
root: 'seclity',
url: '/wlist/get_protocol'
})
.then(function (res) {
$scope.select_option.protocol = [];
angular.forEach(res.protos, function (item) {
$scope.select_option.protocol.push({
v: item,
k: item
})
})
});
};
$scope.pre_params_fun = function () {
var target = $stateParams.target;
if (target === null) return;
$scope.broadcastToPagination.filter_option_toggle($scope.broadcastToPagination.reload);
$scope.broadcastToPagination.filter_option.protocolType = target;
$scope.broadcastToPagination.start_filter($scope.currentPageDatas.init)
};
});
})();
/*以下是：分页组件里的请求函数*/
$scope.query = function (page_index, type) {
tradeApi
.query({
method: $scope.emitToCurrentPageDatas.query_method,
root: $scope.emitToCurrentPageDatas.query_root,
url: $scope.emitToCurrentPageDatas.query_url,
data: $scope.set_query_params(page_index),
params: $scope.set_query_params(page_index),
load: {
table: function (boolen) {
$scope.emitToCurrentPageDatas.tableload = boolen;
}
}
})
.then(function (res) {
$scope.fromCurrentPageDatas.page = res[$scope.emitToCurrentPageDatas.page];
$scope.fromCurrentPageDatas.totalPage = res[$scope.emitToCurrentPageDatas.totalPage];
$scope.all_pages_add();
$scope.fromCurrentPageDatas.total = res[$scope.emitToCurrentPageDatas.total];
if (type === 'reload') {
dir_tip.set({
msg: '刷新成功！'
})
}
$scope.emitToCurrentPageDatas.callback(res);
})
};
$scope.emitToCurrentPageDatas.reload=function(){
$scope.query()
};
Seven, pop components and design ideas pop service:
Note: All popups, frames are the same, some content is not displayed because the value of each ng-show is set to false.
1, the code
(1) HTML
<div id="dir-alert">
<div class="dir-alert-model" ng-if="alert.isShowModel" ng-click="clickMask()"></div>
<div class="dir-alert-wrap" ng-show="alert.isShowModel" ng-style="alert.width">
<div class="dir-alert-title">
<span ng-bind="alert.title"></span>
<em ng-click="clickClose()" ng-show="alert.isShowIcon"></em>
</div>
<div class="dir-alert-content">
<div ng-bind="alert.tipText"></div>
<div id="dir-alert-html"></div>
</div>
<div class="dir-alert-button" ng-show="alert.isShowFooter">
<input ng-bind="alert.cancelText" style="margin-right:15%" ng-click="alert.clickCancel()"
ng-hide="alert.isCancelTextShow" type="button" class="btn btn-outline-primary"/>
<input ng-click="alert.clickConfirm()" ng-hide="alert.isShowConfirmText" type="button"
class="btn btn-outline-danger dir-alert-ok" value="{{alert.confirmText}}"/>
</div>
</div>
</div>
(2)js
angular.module('common-dir')
.directive('dirAlert', function () {
return {
restrict: 'E',
templateUrl: 'module/common-directive/dir-alert.html',
scope: {},
controller: function ($scope, dir_alert) {
$scope.alert = dir_alert;
$scope.clickMask = function () {
if ($scope.alert.isShowMask) {
$scope.alert.isShowModel = false;
}
};
$scope.clickClose = function () {
$scope.alert.isShowModel = false;
}
},
link: function (scope, ele) {
}
};
})
(3) Service
angular.module('common-dir')
.factory('dir_alert', function ($sce, $compile, $rootScope) {
return {
isShowModel: false,
width: {width: '300px'},
title: '系统消息',
isShowIcon: true,
tipText: '',
confirmText: '确定',
cancelText: '取消',
isShowConfirmText: false,
isShowMask: true,
isShowFooter: false,
isCancelTextShow: false,
clickCancel: function () {
this.isShowModel = false;
},
tipHtml: '',
tipHtmlAllMehtods: {},
alertSet: function (parameterObject) {
var that = this;
parameterObject.isShowModel = true;
that.tipText = '';
angular.element(document.getElementById('#dir-alert-tipHtml')).empty();
that.tipHtml = parameterObject.tipHtml || false;
that.tipHtmlAllMehtods = parameterObject.tipHtmlAllMehtods || '';
if (that.tipHtml && that.tipHtmlAllMehtods) {
that.tipHtmlScope = $rootScope.$new();
angular.extend(that.tipHtmlScope, that.tipHtmlAllMehtods);
angular.element(document.getElementById('#dir-alert-tipHtml')).empty().append($compile(angular.element(that.tipHtml))(that.tipHtmlScope));
}
parameterObject.clickConfirm = function () {
angular.isFunction(clickConfirmCallback) ? clickConfirmCallback() : angular.noop();
that.isShowModel = false;
};
parameterObject.clickCancel = function () {
angular.isFunction(clickCancelCallback) ? clickCancelCallback() : angular.noop();
that.isShowModel = false;
};
angular.isObject(parameterObject) ? angular.extend(that, parameterObject) : '';
}
};
});
(4) Application
$scope.detail_alert = function (single) {
dir_alert
.alertSet({
width: { width: '1000px'},
tipTitle: single.protocolType + '协议分析详情',
tipHtml:
'<table class="table table-bordered table-hover common-cust-table">' +
'<thead><tr><th ng-repeat="li in result.title track by $index"><button class="btn" ng-bind="li"></button></th></tr>' +
'</thead>' +
'<tbody><tr ng-repeat="lis in list2 track by $index"><td ng-repeat="li in lis track by $index" ng-bind="li"></td></tr>' +
'</tbody>' +
'</table>' +
'<dir-tableload show="detail_pagin_init.tableload"></dir-tableload>' +
'<dir-pagination config="detail_pagin_init" pagination-config="detail_pagin_config" ></dir-pagination>',
tipHtmlAllMehtods: {
init: function () {
var that = this;
tradeApi
.query({
method: 'post',
root: 'icaudit',
url: '/protsis/get_detail',
data: {
id: single.id,
}
})
.then(function (res) {
that.result = res;
that.list2 = res.data;
});
}
}
});
};
Eight checkbox service:
1, various initialization, such as initialization state radio, the current page select all state initialization, all pages Select initialization state, the selected item array initialization, the selected item unchecked array initialization;
2, each click kind of function, such as clicking a radio function, click on the current page select function, click select All pages function to get all of the selected item id function;
nine, request service design ideas (requestServer)
1, to obtain an asynchronous request object
(1) $ q.defer deferreds = var ();
2, before sending acknowledgment
(1) "cancel" only pop disappeared, no other operations
(2) click on "OK", continue to send the request, and arguments for the allParams deferreds
( 3) If there is no prior confirmed transmission, the transmission request directly that.sendServer (allParams, deferreds);
3, asynchronous request returns example
(. 1) return deferred.promise;
. 4, the function package sendServer
(1) this.http = function (allParams , deferred) {}
fixed parameters in (2) allParams: method, url , toServerParams, stayLocalParams
inner (3) allParams can have parameters: responseType, loading, there may be other parameters
(4) transfer With $ http service, to send a formal request to define a function that returns
5, the definition of $ http service return function
(1) the successful implantation is performed according to the function stayLocalParams
(2) according to the return value judgment expired, the pop-up error message with a pop after 2 seconds to jump to the login page
(3) according to the return value, if the request is successful, the pop success tips with pop, click, pop disappeared
(4 ) according to the return value, if the request fails, an implantation failure function
after (5) the above situation, and then performs the work function once implanted
6, the finally function cancel loading (3) 4
7 defined injection function, by a specific usage scenarios provided
Annex: The total context, index.html => main.js => common -dir module and the tag => = UI-View> Login
. 1, the application module defined angular.module ( 'App', [])
2, in the execution stage loading module, the module custom configuration angular.config (function ($ urlRouterProvider) { $ urlRouterProvider.otherwise ( '/ login');})
user information (1) after a successful login, the user = root return, sessionStorage.setItem (root, returns user information)
(2) based on the user information returned, the navigation bar to the left of assignment
(3) go to a state of the first column of a navigation bar tab
3, the first application execution Angular methods run only once, define a global data or logic startup
angular.run (function ($ rootScope) {
/ * global variables can be initialized here * /
$ rootScope. $ ON ( '$ stateChangeStart',
function (Event, the toState) {
time / * is about to change state, this function is performed
1, check user name if the user name is blank, then jump to the login page
2, click to jump the current page, if access to the state does not exist, to prevent the default event and give pop a reminder * /
}
);
$ rootScope. oN $ ( '$ stateChangeSuccess',
function (Event, the toState) {
time / * state change is completed, the implementation of this function is
1, the current state = target state, in the HTML page, if the click function (item) in item.state === current state, changing the style of item
2, the root tab = item.sub, HTML page, traversing root tab * /
}
);
})
4, top right there Log button
(1) to exit successfully, root = null, sessionStorage.removeItem (root)
(2) states go to log
5, and the navigation bar association card option
(1) to traverse the left navigation bar, binding text, click on the function (item), style;
(2) click (item) function, root tab = item.sub;
PS: click on an item in the table, then the details of table
1, the situation described in
( 1) "table" icon in the leftmost column to the right there, indicates that the item can be expanded
(2) click the icon to the right, the other icon turns down the right and drop down tables away, while the icon to the right changes to icon down, a request is sent to the background, the data returned if the array is empty prompted the bottom right, the empty array if not a drop-down table row
2, to achieve the case
(1) HTML: traversing each original data table based items by name = "li.id == id 'a.png ':? 'b.png'" decision image name, by ng-show = "li.isMaster === ' 1'" decide whether to display images
( 2) HTML: in the following each of the main table, the data is returned to traverse each of the pull-down form, by ng-show = "li.id == id " Determines which of the following table unfold the main table
(3) JS: define id
(. 4) the JS: custom click function, clear data are sequentially returned, if the blanking id === li.id id and block execution, id === li.id, and sends back a request to obtain return, if the return an empty array prompt (or return data)
3, total logical
(1) to the "line" of data passed itemData click function within the function, to obtain a background itemData.id transmission request, the acquired return value as itemData.itemDetail property value, so put the return value of the specific "line" is associated;
(2) traversing itemData.itemDetail details in the table;
Annex 2, the login page interactive ideas:
1, the login page has four elements: the login name, password, authentication code, login;
2, open the login page when the cursor is positioned in the login name;
3, any one of the preceding trigger "enter" key three elements, it is checked whether it is front and its entry is empty, if empty the prompt, and the cursor is in focus where, if the cursor is not empty then the next one focus, if the next one is "login", the function execution log;
4, click "Log" also perform a login function;
5, definition of the function log (1 ) before checking whether the available three four items, (2) if the empty entry prompt, the focus and the cursor, (3) If there is no empty entry, a request is sent to the background;
6, if the background returns 1, the user is prompted to name Presence, position the cursor to the user name; if the background returns 2, then prompt for password error, position the cursor to the password; if the background returns 3, you are prompted to verify the code error, position the cursor to the verification code; if it returns 4, the login is successful.