angular前端框架

時間 2019-12-17

原文原文鏈接

　　總所周知，在前端開發中，你們用的比較多的框架就是angular，vue，react等，今天就爲你們講一下angular你們框架的原理及運用html

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,vue

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；react

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裏設置的模塊化的名稱，必定要書寫進去的，否則會報錯的bootstrap

define(['uiRouter'],function  () {
    angular.module("mineModule",['ui.router'])
        .config(function ($stateProvider,$urlRouterProvider) {
            $stateProvider
                .state("mine",{
                    url:"/mine",
                    templateUrl:"component/mine/mine.html",
                })
        })
})

　　5.以上是在個人頁面裏的 js裏配置的，一級路由到此就算是配置成功了數組