AngularJS
उत्पादन के लिए तैयार - ग्रंट

प्रीलोडिंग देखें

जब पहली बार दृश्य का अनुरोध किया जाता है, तो सामान्य रूप से कोणीय XHR अनुरोध करता है कि वह दृश्य प्राप्त कर सके। मध्य-आकार की परियोजनाओं के लिए, दृश्य गणना महत्वपूर्ण हो सकती है और यह अनुप्रयोग की प्रतिक्रिया को धीमा कर सकती है।

छोटी और मध्यम आकार की परियोजनाओं के लिए एक बार में सभी विचारों को पूर्व-लोड करने के लिए अच्छा अभ्यास है । बड़ी परियोजनाओं के लिए उन्हें कुछ सार्थक bulks में भी एकत्र करना अच्छा है, लेकिन कुछ अन्य तरीकों से लोड को विभाजित करना आसान हो सकता है। इस कार्य को स्वचालित करने के लिए ग्रन्ट या गुलप कार्यों का उपयोग करना आसान है।

विचारों को पूर्व-लोड करने के लिए, हम $templateCache ऑब्जेक्ट का उपयोग कर सकते हैं। यह एक वस्तु है, जहां कोणीय भंडार हर सर्वर से दृश्य प्राप्त करता है।

html2js मॉड्यूल का उपयोग करना संभव है, जो हमारे सभी विचारों को एक मॉड्यूल - जेएस फ़ाइल में बदल देगा। फिर हमें उस मॉड्यूल को अपने एप्लिकेशन में इंजेक्ट करना होगा और यही वह है।

सभी विचारों की संक्षिप्त फ़ाइल बनाने के लिए हम इस कार्य का उपयोग कर सकते हैं

module.exports = function (grunt) {
 //set up the location of your views here
 var viewLocation = ['app/views/**.html'];
 
 grunt.initConfig({
        pkg: require('./package.json'),
            //section that sets up the settings for concatenation of the html files into one file
            html2js: {
                        options: {
                            base: '',
                            module: 'app.templates', //new module name
                            singleModule: true,
                            useStrict: true,
                            htmlmin: {
                                collapseBooleanAttributes: true,
                                collapseWhitespace: true
                            }
                        },
                        main: {
                            src: viewLocation,
                            dest: 'build/app.templates.js'
                        }
                    },
            //this section is watching for changes in view files, and if there was a change, it will regenerate the production file. This task can be handy during development.
            watch: {
                views:{
                    files: viewLocation,
                    tasks: ['buildHTML']
                },
            }
        });
        
        //to automatically generate one view file
        grunt.loadNpmTasks('grunt-html2js');
        
        //to watch for changes and if the file has been changed, regenerate the file
        grunt.loadNpmTasks('grunt-contrib-watch');
        
        //just a task with friendly name to reference in watch
        grunt.registerTask('buildHTML', ['html2js']);
};

इस तरीके का उपयोग करने के लिए, आपको 2 बदलाव करने की आवश्यकता है: अपनी index.html फ़ाइल में आपको संक्षिप्त फ़ाइल फ़ाइल को संदर्भित करने की आवश्यकता है

<script src="build/app.templates.js"></script>

फ़ाइल में, जहाँ आप अपना ऐप घोषित कर रहे हैं, आपको निर्भरता को इंजेक्ट करने की आवश्यकता है

angular.module('app', ['app.templates'])

यदि आप ui-router जैसे लोकप्रिय राउटर का उपयोग कर रहे हैं, तो रास्ते में कोई बदलाव नहीं हैं, आप कैसे टेम्प्लेट कर रहे हैं

    .state('home', {
        url: '/home',
        views: {
            "@": {
                controller: 'homeController',
                //this will be picked up from $templateCache
                templateUrl: 'app/views/home.html'
            },
        }

    })

स्क्रिप्ट अनुकूलन

जेएस फ़ाइलों को एक साथ जोड़ना और उन्हें छोटा करना अच्छा अभ्यास है । बड़ी परियोजना के लिए सैकड़ों जेएस फाइलें हो सकती हैं और यह प्रत्येक फाइल को सर्वर से अलग लोड करने के लिए अनावश्यक विलंबता जोड़ता है।

कोणीय माइनिफिकेशन के लिए सभी कार्यों को एनोटेट करना आवश्यक है। कोणीय निर्भरता इंजेक्शन उचित minificaiton के लिए आवश्यक है। (मिनिमाइज़ेशन के दौरान, फ़ंक्शन नाम और चर का नाम बदल दिया जाएगा और अगर कोई अतिरिक्त कार्रवाई नहीं की जाएगी तो यह निर्भरता इंजेक्शन को तोड़ देगा।)

मिनिएकटैटन के दौरान $scope और myService चर कुछ अन्य मूल्यों द्वारा प्रतिस्थापित किए जाएंगे। नाम के आधार पर कोणीय निर्भरता इंजेक्शन काम करता है, परिणामस्वरूप, इन नामों को बदलना नहीं चाहिए

.controller('myController', function($scope, myService){
})

कोणीय अंकन को कोणीय रूप से समझेगा, क्योंकि न्यूनतमकरण स्ट्रिंग शाब्दिक को प्रतिस्थापित नहीं करेगा।

.controller('myController', ['$scope','myService', function($scope, myService){
}])

• सबसे पहले हम समाप्‍त होने वाली सभी फाइलों को समाप्‍त करेंगे।
• दूसरे हम ng-annotate मॉड्यूल ng-annotate उपयोग करेंगे, जो कि मिनिफिकेशन के लिए कोड तैयार करेगा
• अंत में हम uglify मॉड्यूल लागू करेंगे।

mod.exports = function (grunt) {// कोड वार स्क्रिप्ट लिकेशन में इसका पुन: उपयोग करने के लिए अपनी स्क्रिप्ट का स्थान यहां सेट करें = ['ऐप / स्क्रिप्ट / *। js'];

 grunt.initConfig({
        pkg: require('./package.json'),
            //add necessary annotations for safe minification
         ngAnnotate: {
            angular: {
                src: ['staging/concatenated.js'],
                dest: 'staging/anotated.js'
            }
        },
        //combines all the files into one file
        concat: {
                js: {
                    src: scriptLocation,
                    dest: 'staging/concatenated.js'
                }
            },
        //final uglifying
        uglify: {
            options: {
                report: 'min',
                mangle: false,
                sourceMap:true
            },
            my_target: {
                files: {
                    'build/app.min.js': ['staging/anotated.js']
                }
            }
        },
        
        //this section is watching for changes in JS files, and if there was a change, it will regenerate the production file. You can choose not to do it, but I like to keep concatenated version up to date
        watch: {
            scripts: {
                files: scriptLocation,
                tasks: ['buildJS']
            }
        }
            
});

    //module to make files less readable
    grunt.loadNpmTasks('grunt-contrib-uglify');
    
    //mdule to concatenate files together
    grunt.loadNpmTasks('grunt-contrib-concat');
    
    //module to make angularJS files ready for minification
    grunt.loadNpmTasks('grunt-ng-annotate');
    
    //to watch for changes and if the file has been changed, regenerate the file
    grunt.loadNpmTasks('grunt-contrib-watch');
    
    //task that sequentially executes all steps to prepare JS file for production
    //concatinate all JS files
    //annotate JS file (prepare for minification
    //uglify file
     grunt.registerTask('buildJS', ['concat:js', 'ngAnnotate', 'uglify']);
};