实战录 | AngularJS入坑记

《实战录》导语

云端卫士《实战录》栏目定期会向粉丝朋友们分享一些在开发运维中的经验和技巧，希望对于关注我们的朋友有所裨益。本期分享人为云端卫士工程师张雨，分享 AngularJS相关内容。

1、使用ui-view嵌套视图

DOM结构如下：

<bodyng-controller="AppCtrl">

<divui-view></div>

</body>

<!-- BEGIN HEADER -->

<divng-include="'module/header/view/header.html'"></div>

<!-- END HEADER -->

<divclass="main-container" id="main-container">

<divclass="main-container-inner">

<!-- BEGIN SIDEBAR -->

<divng-include="'module/sidebar/view/sidebar.html'"></div>

<!-- END SIDEBAR -->

<divui-view></div>

</div>

</div>

在页面入口文件中，使用ng-include指令将页面头部导航和左侧菜单栏文件引入，再通过ui-view嵌套页面正文。

1. 使用ui-router切换视图

varApp = angular.module("App", [

"ui.router"

]);

/* 全局页面路由 */

angular.module("App")

.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',

function($stateProvider, $urlRouterProvider, $locationProvider) {

$stateProvider

.state('index', {

url: "/index",

templateUrl: "module/index/view/index.html" ,

data: {},

controller: "IndexCtrl",

resolve: {

deps: ['$ocLazyLoad', function($ocLazyLoad) {

return$ocLazyLoad.load({

name: 'App',

files: [

'module/index/js/IndexService.js' ,

'module/header/js/HeaderService.js' ,

'module/sidebar/js/SidebarService.js' ,

'module/index/js/IndexCtrl.js',

'module/header/js/HeaderCtrl.js',

'module/sidebar/js/SidebarCtrl.js' ,

'module/index/less/index.css',

'module/header/less/header.css',

'module/sidebar/less/sidebar.css'

]

});

}]

}

})

.state('index.account', {

url: "/account",

templateUrl: "module/account/view/account.html",

data: {},

controller: "AccountCtrl",

resolve: {

deps: ['$ocLazyLoad', function($ocLazyLoad) {

return$ocLazyLoad.load({

name: 'App',

files: [

'module/account/js/AccountService.js' ,

'module/account/js/AccountCtrl.js',

'module/account/less/account.css'

]

});

}]

}

})

}]);

<aui-sref=".account">

<spanclass="menu-text"> 账户信息 </span>

</a>

index这一路由是整个项目的入口，加载了其本身的html、css、js文件以及公用组件header和sidebar的相关文件。Index.account是子路由，一般给<a>标签设置ui-sref值，点击后路由变更时解析其本身及其父路由呈现完整的包括头部和菜单栏的视图。初始可执行state.go(“index”)载入相关视图。

ui-router中,通过$stateChangeStart、$stateChangeSuccess、$stateChangeError、$stateNotFound、$viewContentLoading和$viewContentLoaded监听路由变更事件。

$stateChangeStart: 模板解析前触发该事件。可以通过event.preventDefault()阻止模板的解析。

$rootScope.$on('$stateChangeStart',

function(event, toState, toParams, fromState, fromParams) {

event.preventDefault();

});

$stateChangeSuccess: 模板解析成功触发该事件。

$stateChangeError: 模板解析过程中发生错误触发该事件。

$stateNotFound: 在 transition 时通过状态名查找状态，当状态无法找到时发生。该事件在 scope 链上广播，只允许一次处理错误的机会。unfoundState将作为参数传入事件监听函数。

$rootScope.$on("$stateNotFound",

function(event, unfoundState, fromState, fromParams) {

if(unfoundState.to == '-') {

event.preventDefault();

}

});

$viewContentLoading: 当视图开始加载，DOM渲染完成之前触发，该事件将在$scope链上广播此事件。

$viewContentLoaded: 当视图加载完成，DOM渲染完成之后触发，视图所在的$scope发出该事件。

1. 自定义指令

<divtoggle-hover></div>

.directive('toggleHover', function() {

return{

restrict: 'AE',

scope: {

option: '='

},

link: function(scope, element, attrs) {

element.bind('click', function() {

//do something

});

}

};

})

restrict共四个值：E：标签指令，C：class指令，M：注释指令，A：属性指令

<toggle-hover></toggle-hover> //标签指令

<divclass="toggle-hover"></div> //class指令

<divtoggle-hover></div> //属性指令

<!-- directive:toggle-hover --> //注释属性

1：scope默认是false，为true表示独立作用域。

2：scope给予一个对象时，表示执行绑定策略，在template上调用这些数据。a)：使用@符号，表示解析普通字符串，说白了就是你写什么就是什么。b)：使用=符号，表示解析数据。c)：使用&符号，表示这绑定一个函数。

1. 拦截器

App.config(['$httpProvider',

function($httpProvider) {

$httpProvider.interceptors.push('UserInterceptor');

}]);

angular.module("App").factory('UserInterceptor', ['$q', function($q) {

return{

request: function(config) {

config.headers['X-Requested-With'] = 'XMLHttpRequest';

returnconfig || $q.when(config);

},

requestError: function(rejection) {

returnrejection;

},

response: function(response) {

returnresponse || $q.when(response);

},

responseError: function(response) {

console.log('responseError:' + response);

return$q.reject(response);

}

};

}]);

---

关于云端卫士

“云端卫士”是中盈优创资讯科技有限公司旗下的系列安全产品的主品牌，为客户提供全系列、一体化、可运营的安全产品，包括网络攻击追踪溯源系统、网络攻击检测分析系统、网络流量态势感知系统、安全威胁态势感知系统、安全运营支撑系统、分布式抗拒绝服务攻击系统等。