首页 > 代码库 > angular前端框架

angular前端框架

2024-10-19 15:48:02   213人阅读

　　总所周知，在前端开发中，大家用的比较多的框架就是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前端框架


联系
我们