angular前端框架

　　总所周知，在前端开发中，大家用的比较多的框架就是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的版本问题，如果使用其他的版本会报错的，可能是不稳定吧，我也不知道根本的原因！

总结：我自己写出来也是方便自己复习巩固，学习就是这么一个过程，努力了就会有回报，不努力何谈回报，希望有志于成为前端人员里的一员的你，好好学习！