首页 > 代码库 > angular前端框架
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的 版本问题,如果使用其他的版本会报错的,可能是不稳定吧,我也不知道根本的原因!
总结:我自己写出来也是方便自己复习巩固,学习 就是 这么一个过程,努力了就会有回报,不努力何谈回报,希望有志于成为前端人员里的一员的你,好好学习!
angular前端框架
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。