Angularjs環境搭建

時間 2019-11-10

原文原文鏈接

Angularjs架構搭建

一、搭建Angularjs項目

1）在package.json中配置以下，而後 npm install下載包

{
  "name": "angularjst",
  "version": "1.0.0",
  "description": "輪子",
  "author": "Dengwh",
  "private": true,
  "dependencies": {
    "angular": "^1.6.0",
    "angular-ui-router": "0.3.2",
    "bootstrap": "3.3.7",
    "es5-shim": "4.5.9",
    "html5shiv": "3.7.3",
    "jquery": "3.1.1",
    "requirejs": "2.3.2",
    "text": "2.0.15",
    "urijs": "1.18.4",
    "webuploader": "0.1.8",
    "angular-ui-tree": "2.22.2",
    "angular-async-loader": "1.3.2"
  }
}

2)添加bootstrap.js文件，內容以下

require.config({
    map: {
        '*': {
            'ie8css': './node_modules/requirecss-branch-seagull2/ie8css.min',
            'css': './node_modules/requirecss-branch-seagull2/css.min'
        }
    },
    waitSeconds: 0,
    //配置angular的路徑
    paths: {
        'angular': './node_modules/angular/angular',
        'angular-ui-router': './node_modules/angular-ui-router/release/angular-ui-router.min',
        'angular-ui-tree': './node_modules/angular-ui-tree/dist/angular-ui-tree.min',
        'angular-async-loader': './node_modules/angular-async-loader/angular-async-loader',
 
        'jquery': './node_modules/jquery/dist/jquery.min',
        'webuploader': './node_modules/webuploader/dist/webuploader',
        'urijs': './node_modules/urijs/src',
    },
    //配置引入依賴的包名
    shim: {
        'angular': { exports: 'angular' },
        'angular-ui-router': { deps: ['angular'] },
        'angular-ui-tree': { deps: ['angular', 'css!./node_modules/angular-ui-tree/dist/angular-ui-tree.min'] },
    }
});
 
require(['angular', 'webuploader','./javascript/app-routes'],
    function (angular, webuploader) {
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['app']);
            angular.element(document).find('html').addClass('ng-app');
        });
        window.WebUploader = webuploader;
    });

3)添加app.js文件，內容以下

  define(function (require, exports, module) {
    var angular = require('angular');
    var asyncLoader = require('angular-async-loader');
 
    require('angular-ui-router');
 
    var app = angular.module('app', ['ui.router']);
 
    asyncLoader.configure(app);
    module.exports = app;
});

4)添加app-routes.js文件，內容以下，注意一個頁面對應一個路由

define(function (require) {
    var app = require('javascript/app');
 
    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默認跳轉首頁
        $urlRouterProvider.otherwise('/');
 
        //首頁
        $stateProvider.state('Login', {
            url: '/',
            templateUrl: './Views/Login.html',
            controller: 'Login_controller',
            controllerUrl: './controller/Login-controller.js'
        });
 
        //我的信息頁
        $stateProvider.state('Login.Information', {
            url: 'Information/:ID',
            templateUrl: './Views/Info/Information.html',
            controller: 'Information_controller',
            controllerUrl: './controller/Info/Information-controller.js'
        });
 
    }]);
});

5)在總的模板頁中加入data-ui-view,內容以下\

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Angularjsdemo</title>
    <!-- Bootstrap -->
    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
 
<body>
    <div data-ui-view style="margin-left:auto;margin-right:auto;width:80%;min-width:768px;">
 
    </div>
 
    <script src="./node_modules/requirejs/require.js"></script>
    <script src="./javascript/bootstrap.js"></script>
</body>
 
</html>

6)在項目模板頁中加以下class，必須加，不加內部的文件找不到

　　　<div>
        <div class="content-main-right pull-left data-ui-view" style="padding:0;float:left;width:80%;min-width:768px;">
 
        </div>
     </div>

7)其餘內容就是在這個class下添加，若是添加多個模板頁，請在class中添加class

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。