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

  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. Sencha Touch 实战开发培训 视频教程 第二期 第一节

    经过忙碌的准备,终于在2014.4.7晚上8:10分开课. 本来预定在8点开课的,不过电脑出了点问题,推迟了. 本期培训一共八节,前两节免费,后面的课程需要付费才可以观看. 本节内容: 了解Sench ...

  2. sphinx配置文件详解

    sphinx的配置文件是在配置的时候最容易出错的了: 我们先要明白几个概念: source:数据源,数据是从什么地方来的. index:索引,当有数据源之后,从数据源处构建索引.索引实际上就是相当于一 ...

  3. 网卡bonding模式 - bond0、1、4配置

    网卡bonding模式 - bond0.1.4配置 网卡bonding简介 网卡绑定就是把多张物理网卡通过软件虚拟成一个虚拟的网卡,配置完毕后,所有的物理网卡的ip和mac将会变成相同的.多网卡同时工 ...

  4. 【CF887E】Little Brother 二分+几何

    [CF887E]Little Brother 题意:给你n个圆和一条线段,保证圆和圆.圆和线段所在直线不相交,不相切,不包含.求一个过线段两端点的圆,满足不和任何圆相交(可以相切.包含).问圆的最小半 ...

  5. 【笔记】javascript权威指南-第六章-对象

    对象 //本书是指:javascript权威指南    //以下内容摘记时间为:2013.7.28 对象的定义: 1.对象是一种复合值:将很多值(原始值或者对象)聚合在一起,可以通过名字访问这些值. ...

  6. wordpress---page页面数据调用

    在wordpress的开发中,会使用wordpress的的页面,那么页面数据该怎么调用呢? 拿到页面的 content: <?php if(have_posts()) : ?> <? ...

  7. Centos6.5 （或Linux） 安装Elasticsearch

    一.可以在网上下载对饮的版本:https://github.com/elastic/elasticsearch,本次安装的是5.5.3. 首先保证虚拟机上安装了jdk,jdk的版本只是是1.7或以上 ...

  8. 9.14.16 Django ORM进阶用法

    2018-9-14 14:26:45 ORM 练习题   : http://www.cnblogs.com/liwenzhou/articles/8337352.html 2018-9-14 21:1 ...

  9. ElasticSearch在linux上安装部署（转）

    一.安装准备工作安装参考文档: ELK官网:https://www.elastic.co/ ELK官网文档:https://www.elastic.co/guide/index.html ELK中文手 ...

  10. 关于webpy模板自动HTML转义的问题

    注意: web.py 将会转义任何任何用到的变量,所以当你将 name 的值设为是一段 HTML 时,它会被转义显示成纯文本.如果要关闭该选项,可以写成 $:name 来代替 $name. 如果我们想 ...