Блог

Я только что запустил веб-приложения и начинаю изучать использование библиотек и инструментов для веб-приложений.

Я пытаюсь понять реализацию MVC с использованием AngularJS.

Моя структура папок следующая.

 -Package
    |_app
         |_build
         |_home
               |_controllers(HomeCtrl.js)
               |_modules(HomeResources.js)
               |_views(home.html)
               |_module.js
         |_bower_components(all javascript libraries are here)
         |_app.scripts.json
         |_bower.json
         |_gulpfile.js
         |_index.html
  

app.scripts.json содержит все ссылки на скрипты внутри bower_components, такие как

 "paths": {
    "jquery": "bower_components/jquery/dist/jquery.min.js",
    "jquery-ui": "bower_components/jquery-ui/jquery-ui.min.js"
   }
  

Мой gulpfile.js заключается в следующем.

 var es = require('event-stream');
var gulp = require('gulp');
var concat = require('gulp-concat');
var connect = require('gulp-connect');
var templateCache = require('gulp-angular-templatecache');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync'),
    reload = browserSync.reload;
var fs = require('fs');
var _ = require('lodash');


var scripts = require('./app.scripts.json');

var source = {
    js: {
        // module files
            'app/**/module.js'        
    }
};

var destinations = {
    js: 'build'
};

gulp.task('html',function(){
    gulp.src(['app/**/*.html','index.html'])//app/**/*.html
        .pipe(reload({stream:true}));
});
gulp.task('build', function(){
    return es.merge(gulp.src(source.js.src) , getTemplateStream())
         .pipe(ngAnnotate())
         .pipe(uglify())
         .pipe(concat('app.js'))
         .pipe(gulp.dest(destinations.js));
});

gulp.task('js', function(){
    return es.merge(gulp.src(source.js.src) , getTemplateStream())
        .pipe(concat('app.js'))
        .pipe(gulp.dest(destinations.js));
});

gulp.task('watch', function(){
    gulp.watch(source.js.src, ['js']);
    gulp.watch(source.js.tpl, ['js']);
    gulp.watch(['app/**/*.html','index.html'], ['html']);
});

gulp.task('connect', function() {
    connect.server({
        port: 8888
    });
});
//////////////////////////////////////////////
//sync task
//////////////////////////////////////////////
gulp.task('browser-sync',function(){
    browserSync({
        server:{
            baseDir: "./"
        }
    });
});

gulp.task('vendor', function(){
    _.forIn(scripts.chunks, function(chunkScripts, chunkName){
        var paths = [];
        chunkScripts.forEach(function(script){
            var scriptFileName = scripts.paths[script];

            if (!fs.existsSync(__dirname   '/'   scriptFileName)) {

                throw console.error('Required path doesn't exist: '   __dirname   '/'   scriptFileName, script)
            }
            paths.push(scriptFileName);
        });
        gulp.src(paths)
            .pipe(concat(chunkName   '.js'))
            //.on('error', swallowError)
            .pipe(gulp.dest(destinations.js))
    })

});

gulp.task('prod', ['vendor', 'build']);
gulp.task('dev', ['html','vendor', 'js','browser-sync', 'watch', 'connect']);
gulp.task('default', ['dev']);

var swallowError = function(error){
    console.log(error.toString());
    this.emit('end')
};

var getTemplateStream = function () {
    return gulp.src(source.js.tpl)
        .pipe(templateCache({
            root: 'app/',
            module: 'app'
        }))
};
  

module.js внутри домашней папки

 "use strict";


angular.module('app.home', ['ui.router'])
    .config(function ($stateProvider) {

        $stateProvider
            .state('app.home', {
                url: '/home',
                data: {
                    title: 'Blank'
                },
                views: {
                    "content@app": {
                        templateUrl: 'app/home/views/home.html',
                        controller: 'HomeCtrl'
                    }
                }
            }) 
    });
  

HomeResoruces.js

 'use strict';

angular.module('app.home').controller('HomeCtrl', function ($scope, APP_CONFIG, HomeResources, $state) {

    var loadCategories = function () {
        var categotyRequest = HomeResources.getCategories();
        categotyRequest.success(function (categoryResponse) {
            if (categoryResponse.success) {
                $scope.categories = categoryResponse.categories;
                loadBannersList();
            }
            else {
                // $state.go('app.admin');
            }
        })
    }
    loadCategories();

    var loadBannersList = function () {
        console.log("API to bring banner list");
        var bannersRequest = HomeResources.banners();
        bannersRequest.success(function (bannersResponse) {

            $scope.bannerList = bannersResponse.result;
            angular.forEach($scope.bannerList, function (key, val) {
                key.url = '../api' key.url.split('api').pop();
                key.url = key.url.replace(/\/g, "/");
            });
            $scope.homeImg = $scope.bannerList[0].url;
            $scope.bussinessImg = $scope.bannerList[1].url;

        })
    }

    $scope.getCurrentTime = function () {
        var d = new Date();
        return d.getTime();
    }

    $scope.view = function (category) {

        var categoryId = category.id;
        $state.go('app.advertisements', { obj1: categoryId })
    }

});
  

HomeControl.js

 'use strict';

angular.module('app.home').controller('HomeCtrl', function ($scope, APP_CONFIG, HomeResources, $state) {

    var loadCategories = function () {
        var categotyRequest = HomeResources.getCategories();
        categotyRequest.success(function (categoryResponse) {
            if (categoryResponse.success) {
                $scope.categories = categoryResponse.categories;
                loadBannersList();
            }
            else {
                // $state.go('app.admin');
            }
        })
    }
    loadCategories();

    var loadBannersList = function () {
        console.log("API to bring banner list");
        var bannersRequest = HomeResources.banners();
        bannersRequest.success(function (bannersResponse) {

            $scope.bannerList = bannersResponse.result;
            angular.forEach($scope.bannerList, function (key, val) {
                key.url = '../api' key.url.split('api').pop();
                key.url = key.url.replace(/\/g, "/");
            });
            $scope.homeImg = $scope.bannerList[0].url;
            $scope.bussinessImg = $scope.bannerList[1].url;

        })
    }

    $scope.getCurrentTime = function () {
        var d = new Date();
        return d.getTime();
    }

    $scope.view = function (category) {

        var categoryId = category.id;
        $state.go('app.advertisements', { obj1: categoryId })
    }

});
  

home.html

 <div>test</div>
  

index.html

 <!DOCTYPE html>
<html lang="en-us" class="no-js">
    <head>  
        <meta charset="utf-8">
        <title>BnLMyanmar</title>
        <meta name="description" content="">
        <meta name="author" content="">


    </head>


    <body data-smart-device-detect
        data-smart-fast-click
        data-smart-layout>

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


    </body>

</html>
  

Проблема сейчас в том, что я могу создавать app.js находиться внутри папки сборки. Но содержимое внутри home.html никогда не загружается при запуске приложения. В чем может быть проблема?