angular.js+require.js如何构建模块化单页面应用-古蔺大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

angular.js+require.js如何构建模块化单页面应用

这篇文章给大家分享的是有关angular.js+require.js如何构建模块化单页面应用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

10年的息县网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整息县建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“息县网站设计”,“息县网站推广”以来，每个客户项目都认真落实执行。

AngularJS描述:

angularjs是可以用来构建WEB应用的，WEB应用中的一种端对端的完整解决方案。通过开发者呈现一个更高层次的抽象来简化应用的开发。最适合的就是用它来构建一个CRUD应用，它提供了非常方便的且统一高效的解决方案，其数据绑定、基本模版标识符、表单验证、路由、深度链接、组件重用、依赖注入、以及HTML标记等，最受欢迎的莫过于它的双向数据绑定。

requireJS描述:

requireJS是来解决传统的页面加载script标记操作，通过其初始化配置实现按需、并行、延时的载入js库，声明不同js文件之间的依赖关系，它是遵循前端AMD规范(异步模块加载)。js代码可以以模块化的方式进行组织(模块化编程)。模块化的意义就是通过代码逻辑表明模块之间的依赖关系和执行顺序，按照模块逻辑来分解代码，起到配合mvc框架架构项目的作用。

整合：

使用requireJS模块化定义模块质检的依赖关系，打包不需要文件挨个对照，很方便。将script脚本从模版页面中抽离出来，通过js当前模块加载需要依赖的js模块。按需加载。路由更加方便。

实践—–目录结构

这里文件目录可以根据项目需求自由调整

angular.js+require.js如何构建模块化单页面应用

实践—–index.html

和正常的html写法一样，这里要注意引入js时只要引用main和require.js，由require.js去动态加载所需要的js


 
  
   当前用户：...  注销

//只要引用main和require.js

实践—–入口文件main.js

实例化require.js并配置各种js的路径以及依赖关系，初始化整个项目

/**
 * 入口文件
 */
require.config({
 baseUrl: "js/",
 paths: {
  "jquery": "libs/jquery203",
  "angular" : "libs/angular.min",
  "angular-route" : "libs/angular-route.min",
  "angular-sanitize" : "libs/angular-sanitize.min",


  "app" : "controllers/app",
  "loadingInterceptor" : "controllers/loadingInterceptor",
  "run_stateCtrl" : "controllers/run_stateCtrl",

  "route" : "routes/appRoute"
 },
 shim: {
  'angular': {
   exports: 'angular'
  },
  'angular-route':{
   deps: ["angular"],
   exports: 'angular-route'
  },
  'angular-sanitize':{
   deps: ["angular"],
   exports: 'angular-sanitize'
  }
 }
});
require(['jquery','angular','angular-route','angular-sanitize','app','loadingInterceptor','route','run_stateCtrl'],function ($,angular){

  $(function () {

   angular.bootstrap(document,["myApp"]);//初始化整app

  })

});

实践—–建立angular.module 即app.js

建立angular.module，所有的操作都是在angular.module的基础上进行的

/**
 * 建立angular.module
 */
define(['angular'], function (angular) {
 var app = angular.module('myApp', ['ngRoute','ngSanitize','ajaxLoading']);//引入需要以来的模块
 return app;
});

实践—–建立路由

不同的模块被加载进主视图，并绑定控制器

/**
 * 路由
 */
define(['app'], function(app){
 return app.config(['$routeProvider',function($routeProvider) {
   $routeProvider
    .when('/', {
    templateUrl: 'js/views/run_state.html',
    controller: 'run_stateCtrl'
    })
    .when('/xq', {
    templateUrl: 'js/views/xq.html',
    controller: 'xqCtrl'
    })
    .otherwise({ redirectTo: '/' });
 }])
});

实践—–模块控制器

被路由绑定的模块控制器，控制着当前模块的业务流程

define(['app'], function(app){  
 return app.controller('run_stateCtrl', ['$scope','$rootScope','$http', function ($scope,$rootScope,$http) {

   $rootScope.headTitle = $rootScope.title = "hello,angular!";
   $rootScope.appName = $rootScope.span = "angular侧导航";
   $scope.getMore = function(){
    angular.element('.state').text('正在运行')
   };
   $http.get('./json/215145.json').
    success(function(data) {
    $scope.branchs = data.branchs;    
    });
  }])
});

感谢各位的阅读！关于“angular.js+require.js如何构建模块化单页面应用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

本文题目：angular.js+require.js如何构建模块化单页面应用
链接URL：http://scgulin.cn/article/ieojop.html

新闻中心

其他资讯