Angularjs环境搭建
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angularjs环境搭建相关的知识，希望对你有一定的参考价值。
Angularjs架构搭建
1、搭建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
以上是关于Angularjs环境搭建的主要内容，如果未能解决你的问题，请参考以下文章