angular前端框架
阿新 • • 發佈：2017-07-08
script -1 round col cnblogs ide scrip onf -s
總所周知，在前端開發中，大家用的比較多的框架就是angular，vue，react等，今天就為大家講一下angular大家框架的原理及運用
1.本次所舉的例子是以依賴require.js的，
<script src="js/libs/require-2.3.3.min.js" data-main="main" charset="utf-8"></script> <script> document.documentElement.style.fontsize=innerWidth/3.75+"px"; window.onresize=function(){ document.documentElement.style.fontsize=innerWidth/3.75+"px"; } </script> </head> <body> <div id="content" ui-view></div> <div id="tab"> <ul> <li ui-sref="home"><a href=""><span></span><p>首頁</p></a></li> <li ui-sref="logistics"><a href=""><span></span><p>物流</p></a></li> <li ui-sref="shopCar"><a href=""><span></span><p>購物車</p></a></li><li ui-sref="mine"><a href=""><span></span><p>我的淘寶</p></a></li> <li ui-sref="more"><a href=""><span></span><p>更多</p></a></li> </ul> </div> </body>
2.首頁裏，require.js裏面的data-main=“main”是 為了引入main.js,
require.config({
paths: {
‘angular‘: ‘js/libs/angular-1.4.6.min‘,
‘app‘: ‘js/app‘,
‘uiRouter‘: ‘js/libs/angular-ui-router-0.4.2.min‘,
‘home‘: ‘component/home/home‘,
‘mine‘: ‘component/mine/mine‘,
‘logistics‘: ‘component/logistics/logistics‘,
‘search‘: ‘component/search/search‘,
‘shopCar‘:‘component/shopCar/shopCar‘,
‘more‘:‘component/more/more‘
},
shim: {
‘uiRouter‘: {
deps: [‘angular‘]
},
‘lazyLoad‘:[‘angular‘],
‘home‘:[‘uiRouter‘],
‘more‘:[‘uiRouter‘],
‘search‘:[‘uiRouter‘],
‘shopCar‘:[‘uiRouter‘],
‘mine‘:[‘uiRouter‘],
‘logistics‘:[‘uiRouter‘],
‘app‘: {
deps: [‘uiRouter‘,‘angular‘]
}
}
});
require([‘app‘,‘angular‘],function(){
angular.bootstrap(document,[‘myModule‘]);
});
3.上面的config就是配置一些路徑什麽的，下面的require就是手動啟動angular；
define([‘uiRouter‘,‘home‘,‘mine‘,‘logistics‘,‘search‘,‘shopCar‘,‘more‘],function(){
var app=angular.module(‘myModule‘,[‘ui.router‘,"homeModule","mineModule",
"logisticsModule","moreModule","searchModule","shopCarModule"])
.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/home");
})
})
4.此處define裏放在數組裏的是在之前配置路徑時候取得名字，記住一定要一樣，var app=裏面的是在各個頁面js裏設置的模塊化的名稱，一定要 書寫進去的，不然會報錯的
define([‘uiRouter‘],function () {
angular.module("mineModule",[‘ui.router‘])
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state("mine",{
url:"/mine",
templateUrl:"component/mine/mine.html",
})
})
})
5.以上是在我的頁面裏的 js裏配置的，一級路由到此就算是配置成功了
6.註意angular的 版本問題，如果使用其他的版本會報錯的，可能是不穩定吧，我也不知道根本的原因！
總結：我自己寫出來也是方便自己復習鞏固，學習 就是 這麽一個過程，努力了就會有回報，不努力何談回報，希望有誌於成為前端人員裏的一員的你，好好學習！
angular前端框架