基於requirejs和angular搭建spa應用

時間 2019-11-13

標籤基於 requirejs angular 搭建 spa 應用欄目 JavaScript 简体版

原文原文鏈接

　　接上篇，angular 實戰部分，angular比較適合spa項目，這裏不借助任何seed和構建工具，直接從零搭建，基本的angular項目結構大體包含以下幾個部分：
　　1）app.js 入口css

　　2）index.html html框架頁html

　　3）lib（vendor）第三方類庫webpack

　　4）components 業務組件web

　　5）styles／images 靜態資源部分bootstrap

一、常規實現

　　建立文件夾demo1，按照上述結構分別建立app.js ,index.html文件，建立lib、components、styles和images文件夾，最終以下圖所示：promise

在此基礎上，咱們增長三個業務組件home，about，contact，並初始化基本代碼以下：瀏覽器

核心代碼文件app

index.html框架

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="app">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>demo1</title>
 8     <script src="https://cdn.bootcss.com/angular.js/1.6.0/angular.js"></script>
 9     <script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.js"></script>
10 
11     <script src='./app.js'></script>
12     <script src='./components/home/home.controller.js'></script>
13     <script src='./components/about/about.controller.js'></script>
14     <script src='./components/contact/contact.controller.js'></script>
15 
16 </head>
17 <body>
18     <div class="nav">
19         <ul>
20             <li><a ui-sref="home">Home</a></li>
21             <li><a ui-sref="about">About</a></li>
22             <li><a ui-sref="contact">Contact</a></li>
23         </ul>
24     </div>
25     <div class="container">
26         <div ui-view></div>
27     </div>
28 </body>
29 </html>

app.jsdom

 1 angular.module('app', ['ui.router'])
 2     .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
 3         //默認指向
 4         $urlRouterProvider.otherwise('/home');
 5 
 6         $stateProvider.state('home', {
 7             url: '/home',
 8             templateUrl: './components/home/home.tpl.html',
 9             controller: 'HomeController',
10             controllerAs: 'vm'
11 
12         }).state('about', {
13             url: '/about',
14             templateUrl: './components/about/about.tpl.html',
15             controller: 'AboutController',
16             controllerAs: 'vm'
17         }).state('contact', {
18             url: '/contact',
19             templateUrl: './components/contact/contact.tpl.html',
20             controller: 'ContactController',
21             controllerAs: 'vm'
22         })
23 
24     }])

controller中文件格式一直，tpl爲view文件以home模塊爲例：

home.controller.js

1 angular.module('app')
2     .controller('HomeController', HomeController);
3 
4 HomeController.$inject = ['$scope'];
5 
6 function HomeController($scope) {
7     console.log("HomeController created successfully!!!");
8 }

home.tpl.html

<h2>Page Home</h2>

對命名作以下規定，全部文件夾都用小寫，多詞用點號隔開，全部文件都小寫，多詞用點號分割，控制器以.controller.js結尾，相似的有.service.js,.tpl.html,.directive.js,.filter.js等。

最終運行效果以下：

上述代碼能正常運行，可是咱們發現一個問題，當前js文件或者說模塊較少，咱們引入不會有很大的問題，可是當咱們的應用變得很大，文件幾十甚至上百個，如何處理呢，有人說固然使用構建工具了，一個一個引入多慢呢，構建工具固然能夠作到批量引入js文件，可是咱們還須要考慮按需加載的問題，舉例來講，咱們在打開home的時候，about和contact是不必加載的，可是按照咱們傳統的模式，全部腳本都完成了加載，這首先增長了http請求次數，腳本過多的加載解析也影響瀏覽器的渲染，用戶體驗並不友好，基於此，咱們有幾種方式來實現，一、基於requirejs來作，這也是本章內容要講的部分；二、使用webpack分塊打包，實現按需加載，後期看時間會加入對應的文章；三、使用oclazyload（可自行google）。本文就以requirejs來實現一下業務模塊的按需加載，在此以前首先引入requirejs。

二、引入Requirejs

　　RequireJS 是一個JavaScript模塊加載器。它很是適合在瀏覽器中使用，但它也能夠用在其餘腳本環境，就像 Rhino and Node。使用RequireJS加載模塊化腳本將提升代碼的加載速度和質量，實現的是AMD規範，固然相似的還有CMD規範的實現框架seajs。

　　Requirejs中，簡單的說一個文件一個模塊，便是單文件模塊，因此對模塊的加載其實本質上是對文件的加載。

　　假設讀者已經瞭解requirejs的基本使用方式。

　　上一節中，講到了提了一下controller的註冊方式，其中說到了動態註冊，固然除了controller以外，還有service、directive等均可以實現動態註冊，這也是咱們實現按需加載的基礎，如今對咱們的項目作一下修改，增長requirejs配置文件，main.js

 1 require.config({
 2     paths:{
 3         angular:'https://cdn.bootcss.com/angular.js/1.6.0/angular',
 4         ui_router:'https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router',
 5         app:'./app'
 6        
 7     },
 8     shim:{
 9         angular:{exports:'angular'}
10     }
11 });
12 
13 require(['angular','./app','ui_router'],function(angular,app){
14     angular.element(document).ready(function(){
15         angular.bootstrap(document,[app.name]);
16     })
17 })

app.js修改以下：

 1 define(['angular', 'ui_router'], function (angular) {
 2     var app = angular.module('app', ['ui.router'])
 3         .config(['$controllerProvider', '$provide', function ($controllerProvider, $provide) {
 4             app.register = {
 5                 controller: $controllerProvider.register,//動態註冊controller
 6                 factory: $provide.factory//動態註冊服務
 7             }
 8         }])
 9         .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
10             //默認指向
11             $urlRouterProvider.otherwise('/home');
12 
13             $stateProvider.state('home', {
14                 url: '/home',
15                 templateUrl: './components/home/home.tpl.html',
16                 controller: 'HomeController',
17                 controllerAs: 'vm',
18                 resolve: {
19                     deps: loadCtrl(['./components/home/home.controller'])
20                 }
21 
22             }).state('about', {
23                 url: '/about',
24                 templateUrl: './components/about/about.tpl.html',
25                 controller: 'AboutController',
26                 controllerAs: 'vm',
27                 resolve: {
28                     deps: loadCtrl(['./components/about/about.controller'])
29                 }
30             }).state('contact', {
31                 url: '/contact',
32                 templateUrl: './components/contact/contact.tpl.html',
33                 controller: 'ContactController',
34                 controllerAs: 'vm',
35                 resolve: {
36                     deps: loadCtrl(['./components/contact/contact.controller'])
37                 }
38             })
39 
40         }]);
41     return app;
42 
43 
44     function loadCtrl(path_arr) {
45         return ['$q','$rootScope', function ($q,$rootScope) {
46             var defered = $q.defer();
47             require(path_arr, function () {
　　　　　　　　　　　　$rootScope.$apply(function(){
　　　　　　　　　　　　
　　　　　　　　　　　　　　deffered.resolve();
　　　　　　　　　　　　})
48 49             });
50 
51             return defered.promise;
52 
53         }]
54     };
55 })

修改controller註冊方式以下：

1 define(['app'], function (app) {
2     app.register.controller('HomeController', HomeController);
3 
4     HomeController.$inject = ['$scope'];
5 
6     function HomeController($scope) {
7         console.log("HomeController created successfully!!!");
8     }
9 })

最後修改修改index.html中腳本引入方式，以及去掉ng-app指令啓動方式，angular應用啓動已在main.js中經過domready後使用腳本啓動。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo1</title>
    <script src="https://cdn.bootcss.com/require.js/2.3.3/require.js" data-main="./main"></script>

</head>
<body>
    <div class="nav">
        <ul>
            <li><a ui-sref="home">Home</a></li>
            <li><a ui-sref="about">About</a></li>
            <li><a ui-sref="contact">Contact</a></li>
        </ul>
    </div>
    <div class="container">
        <div ui-view></div>
    </div>
</body>
</html>

最終運行效果以下，能夠看到只有在點擊了對應的菜單時，才加載了對應的controller：

因爲代碼簡單，註釋不多，有疑問可直接提交。

本文到此結束。