angularJs项目初建

最新推荐文章于 2024-08-13 22:07:58 发布

weixin_30807677

最新推荐文章于 2024-08-13 22:07:58 发布

阅读量77

点赞数

文章标签： javascript webpack ui ViewUI

原文链接：http://www.cnblogs.com/zhangzhicheng/p/8232676.html

版权

在不使用构建工具的前提下，多人开发使用一个js或css文件开发是很不好的，对性能也不太好，

因为有可能文件太大而所需的内容又占比很小，每个页面要用到的内容少，但全部页面的内容合在一起

这样就不太好的，有点冗余，所以按需加载是最好的，每个文件的功能也明确。

而angularJs有指令，过滤器，服务，控制器，路由，这些明确分配的功能。

使用requireJs、oclazyload、angular-ui-router配合使用，构建一个按需加载的项目。

以这个目录为基础。

当然网上还有很多关于angular目录。

如果可以使用webpack，可以直接脚手架，angular-cli。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>webapp</title>
    <link rel="stylesheet" href="./style/index.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div ui-view></div>
<script>
    document.querySelector("html").style.fontStyle = window.screen.width / 10 + "px";
</script>
<script src="./vendor/require.js" data-main="./script/main.js" charset="utf-8"></script>
</body>
</html>

main.js

require.config({
    paths: {
        "angular": "../vendor/angular/angular.min",
        "router": "../vendor/angular-ui-router/release/angular-ui-router.min",
        "cookies": "../vendor/angular-cookies/angular-cookies.min",
        "validation": "../vendor/angular-validation/dist/angular-validation",
        "animate": "../vendor/angular-animate/angular-animate.min",
        "ocLazyLoad": "../vendor/ocLazyLoad.require",
        "app": "./app",
        "config-router": "./config/router"
    },
    shim: {
        "router": ["angular"],
        "cookies": ["angular"],
        "validation": ["angular"],
        "animate": ["angular"],
        "ocLazyLoad": ["angular"],
        "app": ["ocLazyLoad","router","cookies","validation","animate"],
        "config-router": ["app"]
    }
});

require(["config-router"],function(){
    angular.bootstrap(document.body, ['app']);
});

app.js

'use strict';
var app = angular.module("app",["ui.router","oc.lazyLoad","ngCookies","validation","ngAnimate"]);

router.js

/*
如果要配置公共的指令和过滤器或者服务要到main.js配置依赖，直接加载
 */

/*
配置动态加载文件的配置对象，这里加载都是去缓存的
 */

var routerConfigObj = [
    {
        'name': 'main',
        'controller：''mainCtrl',
        'templateUrl': 'view/main.html',
        'files': ["./style/main.css","./script/controller/mainCtrl.js","./script/directive/head.js","./script/directive/foot.js","./script/service/cache.js"]
    },
    {
        'name': 'login',
        'controller：''loginCtrl',
        'templateUrl': 'view/main.html',
        'files': ["./style/main.css","./script/controller/loginCtrl.js","./script/directive/head.js","./script/directive/foot.js","./script/service/cache.js"]
    }
];


//config里面注入的都是服务带Provider后缀

app.config(['$stateProvider', '$urlRouterProvider','$controllerProvider','$compileProvider','$filterProvider','$provide','$ocLazyLoadProvider',
    function($stateProvider,$urlRouterProvider,$controllerProvider,$compileProvider,$filterProvider,$provide,$ocLazyLoadProvider){
    /*
    controller需要在config重新注册后才能使用resolve生效按需加载
    其他的按需加载以一样，如指令directive
     */
    app = {
        controller: $controllerProvider.register,
        directive: $compileProvider.directive,
        filter: $filterProvider.register,
        factory: $provide.factory,
        service: $provide.service
    };

    $ocLazyLoadProvider.config({
        debug: true
      });

    routerRegsiter($stateProvider,routerConfigObj);

    
    // 默认重定向路径
    $urlRouterProvider.otherwise('main');
}]);

/*$ocLazyLoad 的require版本使用的是require加载js，所以cache去除缓存不生效，要在require里去除缓存*/

/*resolve 会先加载后注入到controller里,所它的键值对的键就是注入名*/

function routerRegsiter($stateProvider,objArr){
    objArr.forEach(function(item){
        $stateProvider.state(item.name,{
            url: '/'+item.name,
               templateUrl: item.templateUrl,
               controller: item.controller,
            resolve: {
                deps: ["$ocLazyLoad",function($ocLazyLoad){
                    return $ocLazyLoad.load([{
                        files:item.files.map(function(t){return t+"?"+(new Date()).getTime();})
                    }]);
                }]
            }
        });
    });
}

routerConfigObj 变量是配置路由、控制器等按需加载的配置地方。

routerRegsiter会循环routerConfigObj 配置路由。

以上是所有的代码，剩下的就是按需加载文件的编写。

这只是初步的使用，具体的使用还是要按照项目的需求建构，比如子页面的加载，多页面的配置，多控制器等。

转载于:https://www.cnblogs.com/zhangzhicheng/p/8232676.html

weixin_30807677

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJs项目初建

在不使用构建工具的前提下，多人开发使用一个js或css文件开发是很不好的，对性能也不太好，因为有可能文件太大而所需的内容又占比很小，每个页面要用到的内容少，但全部页面的内容合在一起这样就不太好的，有点冗余，所以按需加载是最好的，每个文件的功能也明确。而angularJs有指令，过滤器，服务，控制器，路由，这些明确分配的功能。使用requireJs、oclazyload、angula...
复制链接

扫一扫