总所周知，在前端开发中，大家用的比较多的框架就是angular，vue，react等，今天就为大家讲一下angular大家框架的原理及运用

1.本次所举的例子是以依赖require.js的，

  1. <script src="js/libs/require-2.3.3.min.js" data-main="main" charset="utf-8"></script>
  2.     <script>
  3.       document.documentElement.style.fontsize=innerWidth/3.75+"px";
  4.       window.onresize=function(){
  5.           document.documentElement.style.fontsize=innerWidth/3.75+"px";
  6.       }
  7.     </script>
  8. </head>
  9. <body>
  10.     <div id="content" ui-view></div>
  11.     <div id="tab">
  12.         <ul>
  13.             <li ui-sref="home"><a href=""><span></span><p>首页</p></a></li>
  14.             <li ui-sref="logistics"><a href=""><span></span><p>物流</p></a></li>
  15.             <li ui-sref="shopCar"><a href=""><span></span><p>购物车</p></a></li>
  16.             <li ui-sref="mine"><a href=""><span></span><p>我的淘宝</p></a></li>
  17.             <li ui-sref="more"><a href=""><span></span><p>更多</p></a></li>
  18.         </ul>
  19.     </div>
  20. </body>

2.首页里，require.js里面的data-main=“main”是 为了引入main.js,

  1. require.config({
  2. 	paths: {
  3. 		'angular': 'js/libs/angular-1.4.6.min',
  4.         'app': 'js/app',
  5. 		'uiRouter': 'js/libs/angular-ui-router-0.4.2.min',
  6. 		'home': 'component/home/home',
  7. 		'mine': 'component/mine/mine',
  8. 		'logistics': 'component/logistics/logistics',
  9. 		'search': 'component/search/search',
  10. 		'shopCar':'component/shopCar/shopCar',
  11. 		'more':'component/more/more'
  12. 	},
  13. 	shim: {
  14. 		'uiRouter': {
  15. 			deps: ['angular']
  16. 		},
  17. 		'lazyLoad':['angular'],
  18. 		'home':['uiRouter'],
  19. 		'more':['uiRouter'],
  20. 		'search':['uiRouter'],
  21. 		'shopCar':['uiRouter'],
  22. 		'mine':['uiRouter'],
  23. 		'logistics':['uiRouter'],
  24. 		'app': {
  25. 			deps: ['uiRouter','angular']
  26. 		}
  27. 	}
  28. });
  29. require(['app','angular'],function(){
  30. 		angular.bootstrap(document,['myModule']);
  31. });

　　3.上面的config就是配置一些路径什么的，下面的require就是手动启动angular；

  1. define(['uiRouter','home','mine','logistics','search','shopCar','more'],function(){
  2. 	var app=angular.module('myModule',['ui.router',"homeModule","mineModule",
  3. 	"logisticsModule","moreModule","searchModule","shopCarModule"])
  4. 			.config(function($stateProvider,$urlRouterProvider){
  5. 				$urlRouterProvider.otherwise("/home");
  6. 			})
  7. })

　　4.此处define里放在数组里的是在之前配置路径时候取得名字，记住一定要一样，var app=里面的是在各个页面js里设置的模块化的名称，一定要 书写进去的，不然会报错的

  1. define(['uiRouter'],function  () {
  2.     angular.module("mineModule",['ui.router'])
  3.         .config(function ($stateProvider,$urlRouterProvider) {
  4.             $stateProvider
  5.                 .state("mine",{
  6.                     url:"/mine",
  7.                     templateUrl:"component/mine/mine.html",
  8.                 })
  9.         })
  10. })

　　5.以上是在我的页面里的 js里配置的，一级路由到此就算是配置成功了

6.注意angular的 版本问题，如果使用其他的版本会报错的，可能是不稳定吧，我也不知道根本的原因！

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

angular前端框架的更多相关文章

  1. angular前端框架简单小案例

    一.angular表达式 <head> <meta charset="UTF-8"> <title>Title</title> &l ...

  2. 搭建angular前端框架 命令

    首先必备的工具都下下好. 然后现在开始输入命令行创建angular 项目 1.node cd .. 2.yo bower grunt 3.npm install -g generator-angula ...

  3. Twig---和vue或angular前端框架并存

    <h1> {% verbatim %} {{message}} {% endverbatim %} </h1> 上面这种方式虽然能够解决,前台渲染的问题,但是还是会报错: 第二 ...

  4. 如何选择前端框架：ANGULAR VS EMBER VS REACT

    最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发 ...

  5. 前端框架Angular、react、vue在github上的数据统计-2018-05

    2018年5月31日09:15:45 突然想看看几个前端框架的数量,然后就截图了如下数据: 分析: react关注.收藏.Fork都高vue一些, 但相差不大 angular比较奇葩,收藏只有二者一半 ...

  6. 【转】前端框架天下三分：Angular React 和 Vue的比较

    前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...

  7. 前端框架之争丨除了Vue、Angular和React还有谁与之争锋

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://www.sitepoint.com/most-popular-frontend-f ...

  8. React 还是 Vue: 你应该选择哪一个Web前端框架？

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  9. 2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com

    近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那 ...

随机推荐

  1. C# 给主程序签名及第三方dll强签名操作

    1.给主程序添加签名   添加完成后会自动生成一个*.pfx文件.     2.给第三方程序添加强签名方法:   本文以WAPIWrapperCSharp.dll为例,使用vs Tools下的工具命令 ...

  2. maven中pom文件中name字段的作用

  3. linux alternatives命令详解

    alternatives是Linux下的一个功能强大的命令.只能在root权限下执行.如系统中有几个命令功能十分类似,却又不能随意删除,那么可以用 alternatives 来指定一个全局的设置. a ...

  4. mrtg 和 rrdtools

    mrtg可能很多人都用过,但那已经是n久以前的事了,现在在国内很多IDC,ISP都还用这个,因为我们这有个Linux科学家,在Linux工作n 久,我也就沾点光,学了不少东西,现在给大家介绍一个rrd ...

  5. was cached in the local repository, resolution will not be reattempted until the update interval of localhost-repository has elapsed or updates are forced

    ailed to collect dependencies at com.eshore:common:jar:0.0.1-SNAPSHOT: Failed to read artifact descr ...

  6. Spark2 SQL configuration参数配置

    查看当前环境SQL参数的配置 spark.sql("SET -v") key value spark.sql.hive.version 1.2.1 spark.sql.source ...

  7. MySQL行列转换拼接

    mysql> select TBL_ID,CREATE_TIME,LAST_ACCESS_TIME,TBL_NAME,TBL_TYPE from TBLS; +--------+-------- ...

  8. Java与JS判断请求来是否来自移动端

    Java public boolean JudgeIsMoblie(HttpServletRequest request) { boolean isMoblie = false; //String[] ...

  9. java.exe和javaw.exe有什么区别

  10. 基于Solr和Zookeeper的分布式搜索方案的配置

    1.1 什么是SolrCloud SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud.当一个系统的索引数据量少的时候 ...