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学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma
1.下载angularjs 进入其官网下载:https://angularjs.org/,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angular ...
- windows下angularJs环境搭建和遇到的问题解决
搭建本地开发环境 angular官网社区上说:你应该在自己的电脑上本地开发... 你也应该在本地环境学习 Angular. 本人也认为在本地搭建学习环境--靠谱.所以决定尝试一下. 安照中文社区给的步 ...
- angularJS开发环境搭建和启动
本文目录:1.angularJS框架简介 2.angularJS环境搭建 3.启动一个项目 1.angularJS框架简介 AngularJS是一个开发动态Web应用的框架.它让你可以使用HTML作为 ...
- AngularJS2 环境搭建:
AngularJS2 基础学习: 参考 mybase 3-26 文件 angular 环境的构建:( 由于 Angular 编写的代码不是 浏览器可以直接运行的,需要经过编译,所以需要构建一个环境) ...
- Cordova环境搭建 & HelloWorld
目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...
- 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP
这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://gi ...
- Cordova+ionic 开发hybird App --- 开发环境搭建
Cordova 开发hybird App 开发环境搭建 一．一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...
- spring+springMVC+mybatis的框架项目基础环境搭建
上一个项目在后台用到spring+springMVC+mybatis的框架,先新项目初步需求也已经下来,不出意外的话,应该也是用这个框架组合. 虽然在之前activiti相关的学习中所用到的框架也是这 ...
- [ionic开源项目教程] - 第1讲 前言,技术储备,环境搭建,常用命令
前言 这是一个系列文章,将持续更新到项目完结,从环境搭建开始讲解,包括实战开发中遇到的各种问题的解决方案,都将毫无保留的分享给大家. 技术储备 开始本项目之前,请确保自己对以下技术点都有所了解. ht ...
随机推荐
- CRL快速开发框架系列教程十(导出对象结构)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
- 【Machine Learning】机器学习及其基础概念简介
机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...
- Java实现Excel中的NORMSDIST函数和NORMSINV函数
由于工作中需要将Excel中的此两种函数转换成java函数,从而计算内部评级的资本占用率和资本占用金额.经过多方查阅资料和整理,总结出如下两个转换方法 标准正态分布累计函数NORMSDIST: pub ...
- 设计模式C#合集--工厂方法模式
简单工厂,代码: public interface ISpeak { public void Say(); } public class Hello : ISpeak { public void Sa ...
- [AlwaysOn Availability Groups] 健康模型 Part 2 ——扩展
健康模型扩展 第一部分已经介绍了AlwayOn健康模型的概述.现在是创建一个自己的PBM策略,然后设置为制定的归类.创建这些策略,创建之后修改一下配置,dashboard就会自动评估这些策略. 场景, ...
- github入门到上传本地项目【网上资源整合】
[在原文章的基础上,修改了描述的不够详细的地方,对内容进行了扩充,整合了网上的一些资料] [内容主要来自http://www.cnblogs.com/specter45/p/github.html#g ...
- 兼容Mono的下一代云环境Web开发框架ASP.NET vNext
微软在2014年5月12日的TechEd大会上宣布将会发布下一代ASP.NET框架ASP.NET vNext的预览.此次发布的ASP.NET框架与以前相比发生了根本性的变化,凸显了微软“云优先”(cl ...
- Linux学习日记-使用EF6 Code First(四)
一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是 请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...
- 不要听吹牛逼什么前端MVVM框架就是好，其实都是一帮没学好分层设计的搞出来的，让你彻底看清前端MVVM的本质
最近前端圈子里面,发现大家都在热炒概念,什么knockout,angularJs,都被捧成神了,鄙人不才,最近心情也不好,特地写这篇文章来找骂 写代码的码农都知道,Java社区虽然不是一个提出分层思想 ...
