美文网首页我爱编程
require+angular+angular-ui-route

require+angular+angular-ui-route

作者: 幸福幸福幸福 | 来源:发表于2017-03-09 10:47 被阅读80次
  • 主页面不加app,通过angular.bootstrap自行启动

  • 在index页面引入require.js,和入口js文件main.js(main后面不要加.js)。

    <script data-main="src/js/main" src="src/js/lib/require/require.min.js" defer async></script>
    
  • 在main.js里面做配置和依赖表明

      require.config({
          baseUrl: "http://resource.k2o.me/kz/measure/cconsole/1.1/src/jjs",
          paths: {
              "domReady":"lib/require/domReady.min",
              "angular":'lib/angular/angular.min',
              "ui-router":'lib/angular/angular-ui-router.min',
              "tool": 'app/tool'
          },
          shim:{
              "angular":{
                  exports:"angular"
              },
              "ui-router":{
                  deps:["angular"]
              }
          },
          deps:['tool']
      });
    

main.js内只写配置,不写逻辑。

  • 关于配置参数说明:
    baseUrl即其他路径的相对地址,如果不做baseUrl配置则默认路径为main.js目录,因为在index.html页面引入require哪里做了data-main=js/main的配置
    paths:来配置其他文件的名称
    shim:对于未用define()定义的框架来暴露一个变量供外部调用,并标明依赖
    deps:相当于异步加载数组里配置的所有文件,意思类似于require(['tool']),我们的代码可以从tool.js内开始
    具体require.config内的配置这里总结的非常全面
  • 下面是tool.js。展现了如何来自行启动angular
    define(["require", "angular", "ui-router"], function(require, angular) {
    var app = angular.module('app',[]);
    require(['domReady!'], function(domReady) { //domReady依赖的!前缀来强制require()回调函数在执行之前等待DOM Ready。
    angular.bootstrap(document, ["app"]); /手工启动angular/
    });
    app.controller('cons_ctrl',function($scope){
    $scope.hello='aaa'
    })
    });
    注意里面依赖到的domReady!在main.js里已有配置。
    可以看到页面内的{{ hello }}已经被渲染为aaa了。

相关文章

网友评论

    本文标题:require+angular+angular-ui-route

    本文链接:https://www.haomeiwen.com/subject/wslwgttx.html