angularJs在前端開發(fā)過程中是一件重器墅茉，它使得前端代碼編輯簡單凡蜻，數(shù)據(jù)變化方便辣之，尤其是可以讓頁面切換流暢。接下來我將在下面簡單介紹在實(shí)戰(zhàn)項(xiàng)目中如何使用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項(xiàng)目名稱
<html lang="zh-CN" ng-app="viewApp">
再定義根controller的名稱
<body ng-controller="appCtrl">
此時(shí)，我們就能在創(chuàng)建viewApp.js文件來操作整個(gè)頁面了
<script src=".../js/viewApp.js"></script>
在viewApp.js里面我們必須在第一句寫上
var viewApp = angular.module('viewApp', ['ui.router']);
在這一句的下方牌柄，我們就可以定義想要的模塊了,我簡單寫了directive模塊和controller模塊畸悬，一下是示例
//directive模塊
//angular中自定義標(biāo)簽
viewApp.directive('swapbox',function(){
return {
restrict: 'A',
replace: true,
template:
'<div class="swapbox">'+
'<div class="t_news">'+
'<b><i class="iconfont"></i>最新動(dòng)態(tài)：</b>'+
'<ul class="news_li" style="top: 19px;">'+
'<li><a href="">【溫馨提示】網(wǎng)站支付教程請點(diǎn)擊這里</a></li><li><a href="">【13163296359】購買了兩套豬哥靚！</a></li><li><a href="">【13163296359】購買了一套3G懷孕母豬智能飼喂器珊佣！</a></li><li><a href="">【最新消息】網(wǎng)站客服24小時(shí)在線Ｌ；隆！咒锻！</a></li><li><a href="" >【公司動(dòng)態(tài)】JYGA與中畜開展第一次交流會(huì)冷冗！</a></li></ul>'+
'<ul class="swap" style="top: -18.7924px;">'+
'<li><a href="">【溫馨提示】網(wǎng)站支付教程請點(diǎn)擊這里</a></li><li><a href="">【13163296359】購買了兩套豬哥靚！</a></li><li><a href="">【13163296359】購買了一套3G懷孕母豬智能飼喂器惑艇！</a></li><li><a href="">【最新消息】網(wǎng)站客服24小時(shí)在線］镎蕖！滨巴！</a></li><li><a href="" >【公司動(dòng)態(tài)】中畜公司攜手加拿大JYGA公司簽訂戰(zhàn)略合作協(xié)議</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的加載進(jìn)度條
$.AMUI.progress.start();
//向后臺傳參數(shù)并返回值
$http.get('.../getNewsList.action').then(
function(success){
$scope.news = success.data;
$.AMUI.progress.done();
},
function(){
alert('獲取新聞列表失斔脊唷！');
}
)
});
angularJs還有factory兢卵、service模塊习瑰，這里不介紹绪颖。
接下來劃重點(diǎn)秽荤，angular-ui-router路由,不廢話貼代碼
viewApp.config(
[ '$locationProvider','$stateProvider', '$urlRouterProvider',
function ($locationProvider,$stateProvider, $urlRouterProvider ) {
//解決地址欄出現(xiàn)！#
$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驗(yàn)證完全不用寫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">聯(lián)系電話：</label>
<input placeholder="請輸入您的聯(lián)系電話" 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">聯(lián)系電話不能為空</p>
<p class="error" ng-if="formBuy.cusPhone.$error.pattern && formBuy.cusPhone.$touched">電話格式錯(cuò)誤</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">郵箱地址格式錯(cuò)誤</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">產(chǎn)品套數(shù)：</label>
<input placeholder="請輸入您需要購買的產(chǎn)品套數(shù)" 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">套數(shù)不能為空</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>
前端頁面動(dòng)態(tài)數(shù)據(jù)加載,十分方便
<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總結(jié)柠横，用了實(shí)戰(zhàn)中的代碼窃款，若有疑問和建議，請下方留言牍氛。
