Angularjs环境搭建

时间：2017-01-05 14:24:25 阅读：393 评论：0 收藏：0 [点我收藏+]

标签：pull des 搭建架构 config 3.1 desc erp head

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>

<head>

<title>Angularjsdemo</title>

</head>

<body>

</div>

</body>

</html>

6)在项目模板页中加如下class，必须加，不加内部的文件找不到

<div>

</div>

7)其他内容就是在这个class下添加，如果添加多个模板页，请在class中添加class

Angularjs环境搭建

标签：pull des 搭建架构 config 3.1 desc erp head

原文地址：http://www.cnblogs.com/yiquweixuan/p/6252146.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行