Angularjs在工作中的使用

前端之家收集整理的这篇文章主要介绍了Angularjs在工作中的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Angularjs校验插件ngMessages使用方法

1. 引入angular-messages.js插件

2. 在模块中引入ngMessages

Var homePageApp = angular.module('homePageApp',['ui.router','pager','ngDialog','daterangepicker','ngMessages']);

3. 在模板文件中使用它进行验证

@H_301_51@<div class="form-inline form-group"

ng-class="{'has-error':keywordForm.host.$touched && keywordForm.host.$invalid}">

@H_301_51@<label@H_301_51@><font style="color: red"@H_301_51@>*@H_301_51@</font@H_301_51@>&nbsp;域名:@H_301_51@</label@H_301_51@>

@H_301_51@<input "form-control" type="text" id="host"

name="host"

ng-model="host"

ng-maxlength="255"

ng-pattern="/^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/"

required

@H_301_51@/>

<div class="help-block" ng-messages="keywordForm.host.$error" ng-if="keywordForm.host.$touched">

<p ng-message="maxlength">域名最大长度255</p>

<p ng-message="required">域名必填</p>

<p ng-message="pattern">域名输入不正确</p>

@H_301_51@</div@H_301_51@>

@H_301_51@</div@H_301_51@>

Angularjs开源弹框插件ngDialog使用方法

1. 引入ngDialog.js插件以及相关的样式;

2. 在模块中引入ngDialog

'pager','ngDialog',255)">'daterangepicker',255)">'ngMessages']);

3. 在Controller相关方法中操作ngDialog

homePageApp.controller('KeywordsController',255)">'$scope',255)">'keywordsService',255)">'ngDialog',function($scope,keywordsService,ngDialog){

$scope.clickToDelete = function(host,chooseType){

var del_flag = false;

ngDialog.open({

template: '../../templates/keywords_deleteOne_popup.html',

className:'ngdialog-theme-default',

width:350,

height:200,

preCloseCallback:function(){

//方法用来在关闭对话框的时候触发相关操作

$scope.getKeywordListByCondition();

},

controller:function($scope){

$scope.deleteOne = function(delflag){

del_flag = delflag;

if(del_flag){

if(chooseType == '1'){

keywordsService.deleteUrlKeyword({

params : {

"host":host

},

callback : function(result) {

}

});

}else{

keywordsService.deleteUrlKeywordNoPrefix({

params : {

function(result) {

}

});

}

}

$scope.closeThisDialog(); //关闭对话框

}

}

});

}

}]);

Angulajs使用$scope中的变量赋值赋值问题

//var chooseArr = $scope.chooseArr; //这种方式会改变$scope.chooseArr的值(angularjs数据双向绑定机制)

//var removeArr = $scope.removeArr;

var chooseArr = angular.copy($scope.chooseArr); //正确的操作方式,只是对值进行拷贝

var removeArr = angular.copy($scope.removeArr);

for(var i = 0; i <chooseArr.length ; i++){

var j = 0; j < removeArr.length ; j++){

if(chooseArr[i].host == removeArr[j].host){

chooseArr.splice(i,1);

removeArr.splice(j,1);

i--;

break;

}

}

}

Angulajs动态修改模板中样式(即class)

1.在模板class中设置变量

@H_301_51@<"form-inline form-group"@H_301_51@>

@H_301_51@<button "btn {{kBtn}}" ng-click="changeContent(false)"@H_301_51@>关键字型@H_301_51@</button@H_301_51@>

@H_301_51@<"btn {{nPBtn}}"changeContent(true)"@H_301_51@>截取@H_301_51@</button@H_301_51@>

@H_301_51@</div@H_301_51@>

2.controller中的代码

$scope.flag = false;

$scope.chooseType = "1";

$scope.changeContent = function(flag){

$scope.flag = flag;

if($scope.flag){

$scope.chooseType = "2";

//动态设置按钮样式。。。。

$scope.kBtn = "search-btn1";

$scope.nPBtn = "search-btn";

}else{

$scope.chooseType = "1";

"search-btn";

$scope.nPBtn = "search-btn1";

}

}

Angulajs路由插件ui-router使用

1. 引入angularjs-ui-router.js文件

<script type="text/javascript" src="${ctx}/plugins/angular/angular-ui-router.js"></script>

2. 模块中引入ui.router

var homePageApp = angular.module('homePageApp',['ui.router','pager','ngDialog','daterangepicker','ngMessages']);

3. 在homePageApp中配置路由

homePageApp.config(function($stateProvider,$urlRouterProvider) {

$urlRouterProvider.otherwise('/index/keywords'); //默认执行的URL

$stateProvider

.state('index',{ //主页用于显示左侧的导航栏,加载/index/keywords之前会先展示它

url: '/index',

views: {

'': {

templateUrl:'../../templates/index.html'

}

}

})

.state('index.keywords',{

url: '/keywords',

templateUrl: '../../templates/keywords.html'

})

.state('index.entrance',255)">'/entrance',255)">'../../templates/entrance.html'

})

});

Angularjs中factory使用

//定义baseService

homePageApp.factory('baseService',255)">'$http',255)">'$q',85)">function($http,$q){

var BaseService = {};

通用ajax提交&查询

BaseService.saveOrQueryParameter=function(option){

var defaults={

url:"",

params:{}

};

var options = angular.extend(defaults,option);

var defered = $q.defer();

$http.post(options.url,options.params).success(function(data,status,headers,config) {

defered.resolve(data);

}).error( defered.reject(data);

});

return defered.promise;

};

return BaseService;

}]);

//将baseService注入到servicesService中

homePageApp.service('servicesService',85)">function(baseService,$http,$q){

this.getServiceListByCondition = var defaults={

params:{},

callback:function(){}

};

baseService.saveOrQueryParameter({

url:$.ctx+'/services/getServiceListByCondition',

params:options.params

}).then(function(data) {

options.callback(data);

},85)">function(reason) {

console.log('Failed: ' + reason);

});

}

}]);

猜你在找的Angularjs相关文章