zoukankan      html  css  js  c++  java
  • angularjs+requirejs整合

    通过requirejs的配置让angularJS可以正常运行。以下是配置的步骤:

    环境需求

    • require.js
    • angular.js

    有了这两文件,就可以进行下一步了,具体将文件放到哪个目录,可以跟项目的目录结构走,无所谓。

    配置步骤

    首先要配置require.js的入口文件main.js

    require.config({
        //配置angular的路径
        paths:{
            "angular":"js/angular", 
        },
        //这个配置是你在引入依赖的时候的包名
        shim:{
            "angular":{
                exports:"angular"
            }
        }
    })

    配置地址的时候容易出错,这里需要些耐心。
    下一步是最关键的一步了,我在弄的时候被绕懵了好几次,英文网站上的教程用的名词容易分不清,英文不好是硬伤。。。
    我们平常在写angular的时候是这样写的:

    var app = angular.module("模块名",[]);
    
    app.controller("foo",function($scope){});
    app.directive(...)

    可以看到,几乎所有的操作都是在app上进行的。那么,在使用requirejs的时候,我们通常是这样写模块的:

    define(["jquery"],function($){})

    而两者结合起来理想中应该是这样的:

    //ctrl.js
    
    define(['app'],function(app){
        app.controller("mainController",function($scope){
            ...
        })
    })
    
    //dirct.js
    
    define(['app'],function(app){
       app.directive("xxx",function(scope){
            ...
        })
    })

    可以看到,我们在编写controller和directive(或者service等等)的时候,都需要将方法作用在app上,那么这个app是什么的呢,其实可以想到,

    就是angular.module("模块名",[])
    那么,如何让所有的模块都能引入angular.module("模块名",[])呢,我们新建一个app.js

    define(["angular","angular-route"],function(angular){
        return angular.module("模块名",[]);
    })

    这样,我们在引入app.js的时候,就可以拿到这个angular module了。

    当这些步骤都做完之后,你会发现,这个程序还是跑步起来。所以我们还有最后一步。在启动一个angular程序的时候,需要把所有使用angularjs编写的模块都加载到页面中,要不然肯定会报错。。所以,我们需要一个angular的加载模块,这里我们可以在main.js里面添加

    //main.js完整版
    require.config({
      //配置angular的路径
        paths:{
            "angular":"js/angular", 
    "ctrl:"js/ctrl",
    "dirct":"js/dirct",
    "app":"js/app" }, //这个配置是你在引入依赖的时候的包名 shim:{ "angular":{ exports:"angular" } }
     }); 
    require([
    "angular","ctrl","dirct","app"], function(angular) { angular.bootstrap(document,["app"]); });
    
    
    angular.bootstrap方法是angular自带的,顾名思义,如果手工去调用,就是启动一个angular app的意思。具体看文档

    这样,在你的页面中引入<script src="js/require.js" data-main="js/main.js"></script>,就可以运行angular程序了!

    index.html

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>My AngularJS AngularJS + RequireJS App</title>
      <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
      <ul class="menu">
        <li><a href="#/view1">view1</a></li>
        <li><a href="#/view2">view2</a></li>
      </ul>
    
    <div data-ng-view></div>
    
    <div>Angular Require seed app: v<span app-version></span></div>
    
    <script src="js/require.js" data-main="js/main.js"></script>
    </body>
    </html>

    以上需要注意的地方:

    1、index.html页面不要添加ng-app指令,否则会报错,详情请参考angularjs的加载流程,使用require.js时推荐使用angularjs手动加载方式

    angular.bootstrap(document,["app"],不用使用自动加载;


    2、如上配置完之后,页面的加载会有闪烁,于是将模板中的{{xxx}}都改成了ng-bind的形式。改完了之后从页面渲染完到angular将数据填充完毕的那几百毫秒还是会闪一下。于是我想出了个hack,就是现在body或者某父标签上加一个class这个class是负责visibility:hidden的。等到angular把数据填充完毕,再用jQuery把那个class remove掉,这样就不会有闪烁了,进来先是空白的,然后一下子出来,也比较符合平常的用户习惯。

    参考文档:http://www.startersquad.com/blog/angularjs-requirejs/

  • 相关阅读:
    DLink无线路由器做交换机配置
    解决超过两小时的问题记录
    SIP学习之旅【资料收集篇】

    从google code里面获取代码的方法
    NSString表示的时间转为time_t
    C语言中 时间日期格式化符号 详解
    (转)time_t的定义
    (分享)简单圆角UITextView
    viewDidUnload释疑
  • 原文地址:https://www.cnblogs.com/yinliang/p/4761538.html
Copyright © 2011-2022 走看看