angularJs在前端开发过程中是一件重器，它使得前端代码编辑简单，数据变化方便，尤其是可以让页面切换流畅。接下来我将在下面简单介绍在实战项目中如何使用angularJs。
首先，我们得在首页</body>上面引用它的js文件
<script src=".../plugins/angularJS/angular.js"></script>
<script src=".../plugins/angularJS/angular-ui-router-1.0.3.js"></script>
接下来，我们再在首页文件first.html中定义angular项目名称
<html lang="zh-CN" ng-app="viewApp">
再定义根controller的名称
<body ng-controller="appCtrl">
此时，我们就能在创建viewApp.js文件来操作整个页面了
<script src=".../js/viewApp.js"></script>
在viewApp.js里面我们必须在第一句写上
var viewApp = angular.module('viewApp', ['ui.router']);
在这一句的下方，我们就可以定义想要的模块了,我简单写了directive模块和controller模块，一下是示例
//directive模块
//angular中自定义标签
viewApp.directive('swapbox',function(){
return {
restrict: 'A',
replace: true,
template:
'<div class="swapbox">'+
'<div class="t_news">'+
'<b><i class="iconfont"></i>最新动态：</b>'+
'<ul class="news_li" style="top: 19px;">'+
'<li><a href="">【温馨提示】网站支付教程请点击这里</a></li><li><a href="">【13163296359】购买了两套猪哥靓！</a></li><li><a href="">【13163296359】购买了一套3G怀孕母猪智能饲喂器！</a></li><li><a href="">【最新消息】网站客服24小时在线！！！</a></li><li><a href="" >【公司动态】JYGA与中畜开展第一次交流会！</a></li></ul>'+
'<ul class="swap" style="top: -18.7924px;">'+
'<li><a href="">【温馨提示】网站支付教程请点击这里</a></li><li><a href="">【13163296359】购买了两套猪哥靓！</a></li><li><a href="">【13163296359】购买了一套3G怀孕母猪智能饲喂器！</a></li><li><a href="">【最新消息】网站客服24小时在线！！！</a></li><li><a href="" >【公司动态】中畜公司携手加拿大JYGA公司签订战略合作协议</a></li></ul>'+
'</div>'+
'</div>',
link: function () {
angular.element('.swap').html(angular.element('.news_li').html());
var x = angular.element('.news_li');
var y = angular.element('.swap');
var h = angular.element('.news_li li').length * 19;
setTimeout(b,3000);
function b(){
t = parseInt(x.css('top'));
y.css('top', '19px');
x.animate({top: t-19 +'px'},'slow');
if(Math.abs(t) == h-19 ){
y.animate({top:'0px'},'slow');
z = x;
x = y;
y = z;
}
setTimeout(b,3000);
};
}
}
});
//在angular中正确使用插件的简单方法
viewApp.directive('fancybox', function () {
return {
restrict: 'A',
controller: function($scope) {
$scope.openFancybox = function (url) {
$.fancybox.open({
href : url,
title : '李明'
});
};
}
};
});
//controller模块
viewApp.controller('NewsCtrl', function($scope ,$http) {
//amazeui的加载进度条
$.AMUI.progress.start();
//向后台传参数并返回值
$http.get('.../getNewsList.action').then(
function(success){
$scope.news = success.data;
$.AMUI.progress.done();
},
function(){
alert('获取新闻列表失败！');
}
)
});
angularJs还有factory、service模块，这里不介绍。
接下来划重点，angular-ui-router路由,不废话贴代码
viewApp.config(
[ '$locationProvider','$stateProvider', '$urlRouterProvider',
function ($locationProvider,$stateProvider, $urlRouterProvider ) {
//解决地址栏出现！#
$locationProvider.hashPrefix('');
$urlRouterProvider
.otherwise('/');
$stateProvider
.state('eliteTeam', {
url: '/eliteTeam',
templateUrl: 'static/frontPage/eliteTeam.html'
})
.state('knowZC', {
url: '/knowZC/:ord',
controller: 'knowZCCtrl',
templateUrl: 'static/frontPage/knowZC.html',
resolve : {
promiseObj : function($http,$stateParams){
return $http({
method : 'GET' ,
url : "static/frontPage/navigation/content/"+$stateParams.ord
});
}
}
})
.state('activitys', {
url: '/activitys/:id',
templateUrl: 'static/frontPage/activity.html',
controller: 'acContentCtrl',
resolve : {
promiseObj : function($http,$stateParams){
return $http({
method : 'GET' ,
url : "static/frontPage/activitys/content/"+$stateParams.id
});
}
}
});
}
]
);
angular验证完全不用写js
<form name="formBuy" class="am-form" data-am-validator>
<legend>{{x.pName}}</legend>
<fieldset>
<input type="hidden" name="proName" ng-model="buy.proName" value="{{x.pName}}"/>
<div class="am-form-group">
<label for="form-valid-cusUnit">购买单位：</label>
<input placeholder="请输入您的单位名称或无" type="text" name="cusUnit" id="form-valid-cusUnit"
ng-class="{'error': formBuy.cusUnit.$invalid && formBuy.cusUnit.$touched}"
ng-model="buy.cusUnit"/>
</div>
<div class="am-form-group">
<label for="form-valid-cusName">您的姓名：</label>
<input placeholder="请输入您的姓名" type="text" name="cusName" id="form-valid-cusName"
ng-class="{'error': formBuy.cusName.$invalid && formBuy.cusName.$touched}"
required
ng-model="buy.cusName"/>
<p class="error" ng-if="formBuy.cusName.$error.required && formBuy.cusName.$touched">姓名不能为空</p>
</div>
<div class="am-form-group">
<label for="form-valid-cusPhone">联系电话：</label>
<input placeholder="请输入您的联系电话" type="number" name="cusPhone" id="form-valid-cusPhone"
ng-class="{'error': formBuy.cusPhone.$invalid && formBuy.cusPhone.$touched}"
required
ng-pattern="/^1[3,4,5,7,8]\d{9}$/"
ng-model="buy.cusPhone"/>
<p class="error" ng-if="formBuy.cusPhone.$error.required && formBuy.cusPhone.$touched">联系电话不能为空</p>
<p class="error" ng-if="formBuy.cusPhone.$error.pattern && formBuy.cusPhone.$touched">电话格式错误</p>
</div>
<div class="am-form-group">
<label for="form-valid-cusEmail">邮箱地址：</label>
<input placeholder="请输入您的邮箱地址" type="email" name="cusEmail" id="form-valid-cusEmail"
ng-class="{'error': formBuy.cusEmail.$invalid && formBuy.cusEmail.$touched}"
required
ng-pattern="/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/"
ng-model="buy.cusEmail"/>
<p class="error" ng-if="formBuy.cusEmail.$error.required && formBuy.cusEmail.$touched">邮箱地址不能为空</p>
<p class="error" ng-if="formBuy.cusEmail.$error.pattern && formBuy.cusEmail.$touched">邮箱地址格式错误</p>
</div>
<div class="am-form-group">
<label for="form-valid-cusAddress">收货地址：</label>
<input placeholder="请输入您的收货地址" type="text" name="cusAddress" id="form-valid-cusAddress"
ng-class="{'error': formBuy.cusAddress.$invalid && formBuy.cusAddress.$touched}"
required
ng-model="buy.cusAddress"/>
<p class="error" ng-if="formBuy.cusAddress.$error.required && formBuy.cusAddress.$touched">收货地址不能为空</p>
</div>
<div class="am-form-group">
<label for="form-valid-proName">产品套数：</label>
<input placeholder="请输入您需要购买的产品套数" type="number" name="proNum" id="form-valid-proName"
ng-class="{'error': formBuy.proNum.$invalid && formBuy.proNum.$touched}"
required
ng-model="buy.proNum"/>
<p class="error" ng-if="formBuy.proNum.$error.required && formBuy.proNum.$touched">套数不能为空</p>
</div>
<div class="am-form-group">
<label for="form-valid-cusNote">备注信息：</label>
<textarea rows="5" ng-model="buy.cusNote" id="form-valid-cusNote"></textarea>
</div>
</fieldset>
<div class="am-u-lg-4 am-u-lg-centered am-margin-bottom">
<input type="submit" class="btn btn-primary"
value="确定"
ng-disabled="formBuy.$invalid"
ng-click="CusBuyProSubmit();"
/>
</div>
</form>
前端页面动态数据加载,十分方便
<div class="am-u-sm-12 am-u-md-4 am-u-lg-3" ng-repeat="x in recruits | limitTo : 4">
<div class="am-panel am-panel-primary">
<div class="am-panel-hd">{{x.rPosition}}</div>
<a href="#doc-oc-demo{{x.id}}{{x.id}}" data-am-offcanvas>
<div class="am-panel-bd"><pre style="color: #2aabd2">{{x.rContent}}</pre></div>
</a>
</div>
</div>
以上是非常简单的angular总结，用了实战中的代码，若有疑问和建议，请下方留言。
网友评论