>

美洲杯在线投注_2019美洲杯外围投注[投注官网]

热门关键词: 美洲杯在线投注,2019美洲杯外围投注[投注官网]

【实例分解一】angular require ngroute bootstrap

- 编辑:美洲杯在线投注 -

【实例分解一】angular require ngroute bootstrap

之前项目中实现过这样的一套前端框架,但angular版本还是1.0.X的,bootstrap是2.0的。当时项目时间较紧,加上研究不够深入,对angular理解不够透彻,虽然功能实现,但也确实存在一些bug,很多地方可以优化。所以项目准备升级到angular1.3.X、bootstrap3。

1、搭建项目框架

下面是调研时做得一个简单的框架demo,angularJS1.3.15,bootstrap3,requireJS2.1.16,ngroute1.3.15.模拟对话框使用了ngDialog,实现了动态template和controller文件,下面会有介绍。

npm初始化项目

文件结构参考网上各种大神的建议,将各个页面和对应的controller放到了同一个文件目录下,这样子确实方便了查找,不用再翻到controller的文件夹中查找页面对应的controller,结构如下:

npm init -y   //按默认配置初始化项目

[img]data/attachment/album/201506/04/164151hpimplpsw41gpp4a.gif[/img]

安装需要的第三方库

首先我们来说一说bootstrap3,bootstrap3和bootsrtap2相比,不同的地方也是蛮多的,但对我们项目而言,升级起来,改动量最大的就是页面的布局这一方面,bootstrap2中span*在bootstrap3中已经不复存在 ,变成了col-**-*,这个好处是多多的,移动优先嘛。麻烦的就是我们这些程序员了,苦逼的改代码吧。

npm install bootstrap angular angular-route --save

其它的不多说,官网上面都有详细说明,送上中文网地址:http://www.bootcss.com/

新建一个index.html页面 引用 这三个依赖库

 1 <!DOCTYPE html>   2 <html>   3    4 <head>   5 <meta charset="utf-8">   6 <title>fish.UI.index</title>   7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">   8 <link rel="stylesheet"   />   9 <link rel="stylesheet"   />  10 <link rel="stylesheet"   />  11 <link rel="stylesheet"   />  12 </head>  13   14 <body ng-controller='mainctrl'>  15 <div >  16 <div >  17 <div >  18 <mymenu></mymenu>  19 </div>  20 <div  ng-view>  21 </div>  22 </div>  23 </div>  24 <script src="../../resources/plugin/require/require.js" defer async="true" data-main="../../resources/main"></script>  25 </body>  26   27 </html>

图片 1

 

新建两个文件夹coming_soon in_theaters

requireJS的用法这边不做过多说明,网上说明很多,没有额外扩展的操作,附上配置信息:

然后在这两个文件夹里分别创建一个controller.js 文件和view.html文件

 1 (function() {   2 require.config({   3 baseUrl: '../../resources/',   4 paths: {   5 jquery: 'js/jquery.min',   6 bootstrap: 'plugin/bootstrap/js/bootstrap.min',   7 angular: 'plugin/angular/js/angular.min',   8 ngRoute: 'plugin/angular/js/angular-route',   9 routeConfig: 'plugin/utils/route-config',  10 ngDialog: 'plugin/angular/js/ngDialog.min',  11 //text:'plugin/require/text',//用于require加载html,css等非js文件  12 app: 'app',  13 directives: 'js/directive',  14 services: 'js/service',  15 route: 'routes',  16 mainCtrl: '../items/index/indexCtrl'  17 },  18 shim: {  19 bootstrap: {  20 deps: ['jquery'],  21 exports: 'bootstrap'  22 },  23 angular: {  24 deps: ['jquery'],  25 exports: 'angular'  26 },  27 ngDialog: {  28 deps: ['angular']  29 },  30 ngRoute: {  31 deps: ['angular']  32 },  33 routeConfig: {  34 deps: ['angular']  35 },  36 app: {  37 deps: ['ngRoute']  38 },  39 directives: {  40 deps: ['angular']  41 },  42 services: {  43 deps: ['app']  44 },  45 route: {  46 deps: ['app']  47 },  48 mainCtrl: {  49 deps: ['angular']  50 }  51 },  52 urlArgs: 'v='   (new Date()).getTime()  53 });  54 require(['angular', 'bootstrap', 'app', 'ngRoute', 'ngDialog', 'routeConfig', 'directives', 'services', 'route', 'mainCtrl'], function(angular) {  55 angular.bootstrap(document, ['myapp']);  56 });  57 })(this);

最后项目文件的结构是这样

 

 图片 2

初始化angularJS,在这边给document绑定module.

2、搭建首页样式

1 angular.bootstrap(document, ['myapp']);

采用bootstrap

 

http://v3.bootcss.com/examples/dashboard/

这里先对几个引入的文件说明下,后面会有具体的介绍。

该页面的样式

ngRoute:angularJS路由模块,angularJS从1.2.X开始就把路由模块分离出来了,所以这边需要引用;
routeConfig:这个模块是为了实现根据当前路由,动态加载template和controller文件,项目越大,文件越来越多,是肯定是要实现按需加载的。所以这一步是肯定要做的。
services:里面封装了一个模拟对话框的服务,使dialog在不同的页面可以重复调用。后面会有介绍。

然后还需要引用这一个css文件

app.js代码如下:

http://v3.bootcss.com/examples/dashboard/dashboard.css

1 define(['angular', 'routeConfig'], function(angular, routeConfig) {  2 var app = angular.module('myapp', ['ngRoute','ngDialog',  3 function($compileProvider, $controllerProvider) {  4 routeConfig.setCompileProvider($compileProvider);  5 routeConfig.setControllerProvider($controllerProvider);  6 }  7 ]);  8 return app;  9 })

然后删掉一些不需要的标签

 

最后形成的界面

app中定义angular模块,加载了一些模块。

图片 3 

下一篇会对route按需加载controller进行介绍..

到这边后,项目的基本结构与样式搭建完成


3、配置angular路由

到in_theaters下的controller.js文件中 写上

(function(angular){
  'use strict';
  var module = angular.module('movie.in_theaters',['ngRoute']);
  module.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/in_theaters',{
      controller: 'inTheatersController',
      templateUrl: '/in_theaters/view.html'
    });
  }]);
  module.controller('inTheatersController',['$scope',function($scope){

  }]);
})(angular);

在view.html写上

<h1 class="page-header">正在热映</h1>

到coming_soon下的controller.js 写上

(function(angular){
  'use strict';
  var module = angular.module('movie.coming_soon',['ngRoute']);
  module.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/coming_soon',{
      controller: 'comingSoonController',
      templateUrl: '/coming_soon/view.html'
    });
  }]);
  module.controller('comingSoonController',['$scope',function($scope){

  }]);
})(angular);

在view.html写上

<h1 class="page-header">即将上映</h1>

然后在js文件夹中新建一个app.js 写上

(function (angular) {
  'use strict';
  var module = angular.module('movie', ['ngRoute', 'movie.in_theaters','movie.coming_soon' ]);
  module.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.otherwise({
      redirectTo: '/in_theaters'
    });
  }]);
})(angular);

本文由计算机教程发布,转载请注明来源:【实例分解一】angular require ngroute bootstrap