├── .babelrc ├── .eslintrc ├── .gitignore ├── mock ├── appInfo.js ├── citys.js ├── index.js └── photos.js ├── package.json ├── readme.md ├── server.js ├── src ├── app │ ├── album │ │ ├── AlbumCtrl.js │ │ ├── Routers.js │ │ ├── _album.scss │ │ ├── album.css │ │ ├── index.html │ │ ├── index.js │ │ └── photo │ │ │ ├── PhotoCtrl.js │ │ │ └── index.html │ ├── app.js │ ├── config.js │ ├── home │ │ ├── HomeCtrl.js │ │ ├── Routers.js │ │ ├── index.html │ │ └── index.js │ └── user │ │ ├── Routers.js │ │ ├── baseInfo │ │ ├── index.html │ │ └── index.js │ │ ├── footprint │ │ ├── detailList.html │ │ ├── footprintCtrl.js │ │ ├── index.html │ │ ├── index.js │ │ └── thumbList.html │ │ ├── index.html │ │ ├── index.js │ │ └── user.css ├── assert │ ├── css │ │ ├── base.css │ │ └── reset.css │ └── images │ │ ├── forecast.jpg │ │ ├── gameboard.jpg │ │ ├── icon_switch.png │ │ ├── img1.jpeg │ │ ├── img2.jpeg │ │ ├── img3.jpeg │ │ ├── move.jpg │ │ └── shutterbugg.jpg ├── common │ ├── data │ │ ├── appInfo.json │ │ ├── citys.json │ │ └── photos.json │ └── resources │ │ ├── appInfoResource.js │ │ ├── cityResource.js │ │ ├── index.js │ │ └── photoResource.js ├── components │ ├── appInfo │ │ ├── appInfo.html │ │ ├── appInfoDirective.js │ │ └── index.js │ ├── index.js │ ├── installApp │ │ ├── index.js │ │ ├── installApp.html │ │ └── installAppDirective.js │ └── styles │ │ ├── _global.scss │ │ ├── _layout.scss │ │ ├── _variables.scss │ │ └── index.scss └── index.html └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaFeatures": { 3 | "modules": true, 4 | "experimentalObjectRestSpread": true, 5 | "jsx": true 6 | }, 7 | 8 | "env": { 9 | "browser": false, 10 | "es6": true, 11 | "node": true 12 | }, 13 | 14 | "plugins": [ 15 | "standard" 16 | ], 17 | 18 | "globals": { 19 | "angular": true, 20 | "document": true, 21 | "navigator": true, 22 | "window": true, 23 | "$": true 24 | }, 25 | 26 | "parser": "babel-eslint", 27 | 28 | "rules": { 29 | //在定义对象的时候，getter/setter需要同时出现 30 | "accessor-pairs": 2, 31 | // 箭头函数中，在需要的时候，在参数外使用小括号（只有一个参数时，可以不适用括号，其它情况下都需要使用括号） 32 | "arrow-parens": [2, "as-needed"], 33 | //箭头函数中的箭头前后需要留空格 34 | "arrow-spacing": [2, { "before": true, "after": true }], 35 | //如果代码块是单行的时候，代码块内部前后需要留一个空格 36 | "block-spacing": [2, "always"], 37 | //大括号语法采用『1tbs』,允许单行样式 38 | "brace-style": [2, "1tbs", { "allowSingleLine": true }], 39 | //在定义对象或数组时，最后一项不能加逗号 40 | "comma-dangle": [2, "never"], 41 | //在写逗号时，逗号前面不需要加空格，而逗号后面需要添加空格 42 | "comma-spacing": [2, { "before": false, "after": true }], 43 | //如果逗号可以放在行首或行尾时，那么请放在行尾 44 | "comma-style": [2, "last"], 45 | //在constructor函数中，如果classes是继承其他class，那么请使用super。否者不使用super 46 | "constructor-super": 2, 47 | //在if-else语句中，如果if或else语句后面是多行，那么必须加大括号。如果是单行就应该省略大括号。 48 | "curly": [2, "multi-line"], 49 | //该规则规定了.应该放置的位置， 50 | "dot-location": [2, "property"], 51 | //该规则要求代码最后面需要留一空行，（仅需要留一空行） 52 | "eol-last": 2, 53 | //使用=== !== 代替== != . 54 | "eqeqeq": [2, "allow-null"], 55 | //该规则规定了generator函数中星号两边的空白。 56 | "generator-star-spacing": [2, { "before": true, "after": true }], 57 | // 规定callback 如果有err参数，只能写出err 或者 error . 58 | "handle-callback-err": [2, "^(err|error)$" ], 59 | //这个就是关于用什么来缩进了，规定使用tab 来进行缩进，switch中case也需要一个tab . 60 | // "indent": [2, "tab", { "SwitchCase": 1 }], 61 | // keyword 前后需要空格 62 | "keyword-spacing": [2, {"before": true, "after": true, "overrides": {}}], 63 | //该规则规定了在对象字面量语法中，key和value之间的空白，冒号前不要空格，冒号后面需要一个空格 64 | "key-spacing": [2, { "beforeColon": false, "afterColon": true }], 65 | //构造函数首字母大写 66 | "new-cap": [2, { "newIsCap": true, "capIsNew": false }], 67 | //在使用构造函数时候，函数调用的圆括号不能够省略 68 | "new-parens": 2, 69 | //禁止使用Array构造函数 70 | "no-array-constructor": 2, 71 | //禁止使用arguments.caller和arguments.callee 72 | "no-caller": 2, 73 | //禁止覆盖class命名，也就是说变量名不要和class名重名 74 | "no-class-assign": 2, 75 | //在条件语句中不要使用赋值语句 76 | "no-cond-assign": 2, 77 | //const申明的变量禁止修改 78 | "no-const-assign": 2, 79 | //在正则表达式中禁止使用控制符（详见官网） 80 | "no-control-regex": 2, 81 | //禁止使用debugger语句 82 | "no-debugger": 2, 83 | //禁止使用delete删除var申明的变量 84 | "no-delete-var": 2, 85 | //函数参数禁止重名 86 | "no-dupe-args": 2, 87 | //class中的成员禁止重名 88 | "no-dupe-class-members": 2, 89 | //在对象字面量中，禁止使用重复的key 90 | "no-dupe-keys": 2, 91 | //在switch语句中禁止重复的case 92 | "no-duplicate-case": 2, 93 | //禁止使用不匹配任何字符串的正则表达式 94 | "no-empty-character-class": 2, 95 | //禁止使用eval函数 96 | "no-eval": 2, 97 | //禁止对catch语句中的参数进行赋值 98 | "no-ex-assign": 2, 99 | //禁止扩展原生对象 100 | "no-extend-native": 2, 101 | //禁止在不必要的时候使用bind函数 102 | "no-extra-bind": 2, 103 | //在一个本来就会自动转化为布尔值的上下文中就没必要再使用!! 进行强制转化了。 104 | "no-extra-boolean-cast": 2, 105 | //禁止使用多余的圆括号 106 | "no-extra-parens": [2, "functions"], 107 | //这条规则，简单来说就是在case语句中尽量加break，避免不必要的fallthrough错误，如果需要fall through，那么看官网。 108 | "no-fallthrough": 2, 109 | //简单来说不要写这样的数字.2 2.。应该写全，2.2 2.0 . 110 | "no-floating-decimal": 2, 111 | //禁止对函数名重新赋值 112 | "no-func-assign": 2, 113 | //禁止使用类eval的函数。 114 | "no-implied-eval": 2, 115 | //禁止在代码块中定义函数（下面的规则仅限制函数） 116 | "no-inner-declarations": [2, "functions"], 117 | //RegExp构造函数中禁止使用非法正则语句 118 | "no-invalid-regexp": 2, 119 | //禁止使用不规则的空白符 120 | "no-irregular-whitespace": 2, 121 | //禁止使用__iterator__属性 122 | "no-iterator": 2, 123 | //label和var申明的变量不能重名 124 | "no-label-var": 2, 125 | //禁止使用label语句 126 | "no-labels": [2, {"allowLoop": false, "allowSwitch": false}], 127 | //禁止使用没有必要的嵌套代码块 128 | "no-lone-blocks": 2, 129 | //不要把空格和tab混用 130 | "no-mixed-spaces-and-tabs": 2, 131 | //顾名思义，该规则保证了在逻辑表达式、条件表达式、 132 | //申明语句、数组元素、对象属性、sequences、函数参数中不使用超过一个的空白符。 133 | "no-multi-spaces": 2, 134 | //该规则保证了字符串不分两行书写。 135 | "no-multi-str": 2, 136 | //空行不能够超过2行 137 | "no-multiple-empty-lines": [2, { "max": 2 }], 138 | //该规则保证了不重写原生对象。 139 | "no-native-reassign": 2, 140 | //在in操作符左边的操作项不能用! 例如这样写不对的：if ( !a in b) { //dosomething } 141 | "no-negated-in-lhs": 2, 142 | //当我们使用new操作符去调用构造函数时，需要把调用结果赋值给一个变量。 143 | "no-new": 2, 144 | //该规则保证了不使用new Function(); 语句。 145 | "no-new-func": 2, 146 | //不要通过new Object（），来定义对象 147 | "no-new-object": 2, 148 | //禁止把require方法和new操作符一起使用。 149 | "no-new-require": 2, 150 | //当定义字符串、数字、布尔值就不要使用构造函数了，String、Number、Boolean 151 | "no-new-wrappers": 2, 152 | //禁止无意得把全局对象当函数调用了，比如下面写法错误的：Math(), JSON() 153 | "no-obj-calls": 2, 154 | //不要使用八进制的语法。 155 | "no-octal": 2, 156 | //用的少，见官网。http://eslint.org/docs/rules/ 157 | "no-octal-escape": 2, 158 | //不要使用__proto__ 159 | "no-proto": 2, 160 | //不要重复申明一个变量 161 | "no-redeclare": 2, 162 | //正则表达式中不要使用空格 163 | "no-regex-spaces": 2, 164 | //return语句中不要写赋值语句 165 | "no-return-assign": 2, 166 | //不要和自身作比较 167 | "no-self-compare": 2, 168 | //不要使用逗号操作符，详见官网 169 | "no-sequences": 2, 170 | //禁止对一些关键字或者保留字进行赋值操作，比如NaN、Infinity、undefined、eval、arguments等。 171 | "no-shadow-restricted-names": 2, 172 | //函数调用时，圆括号前面不能有空格 173 | "no-spaced-func": 2, 174 | //禁止使用稀疏数组 175 | "no-sparse-arrays": 2, 176 | //在调用super之前不能使用this对象 177 | "no-this-before-super": 2, 178 | //严格限制了抛出错误的类型，简单来说只能够抛出Error生成的错误。但是这条规则并不能够保证你只能够 179 | //抛出Error错误。详细见官网 180 | "no-throw-literal": 2, 181 | //行末禁止加空格 182 | "no-trailing-spaces": 2, 183 | //禁止使用没有定义的变量，除非在／＊global＊／已经申明 184 | "no-undef": 2, 185 | //禁止把undefined赋值给一个变量 186 | "no-undef-init": 2, 187 | //禁止在不需要分行的时候使用了分行 188 | "no-unexpected-multiline": 2, 189 | //禁止使用没有必要的三元操作符，因为用些三元操作符可以使用其他语句替换 190 | "no-unneeded-ternary": [2, { "defaultAssignment": false }], 191 | //没有执行不到的代码 192 | "no-unreachable": 2, 193 | //没有定义了没有被使用到的变量 194 | "no-unused-vars": [2, { "vars": "all", "args": "none" }], 195 | //禁止在不需要使用call（）或者apply（）的时候使用了这两个方法 196 | "no-useless-call": 2, 197 | //不要使用with语句 198 | "no-with": 2, 199 | //在某些场景只能使用一个var来申明变量 200 | // "one-var": [2, { "initialized": "never" }], 201 | //在进行断行时，操作符应该放在行首还是行尾。并且还可以对某些操作符进行重写。 202 | "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }], 203 | //使用单引号 204 | "quotes": [2, "single", "avoid-escape"], 205 | //在使用parseInt() 方法时，需要传递第二个参数，来帮助解析，告诉方法解析成多少进制。 206 | "radix": 2, 207 | //这就是分号党和非分号党关心的了，我们还是选择加分号 208 | "semi": [2, "always"], 209 | //该规则规定了分号前后的空格，具体规定如下。 210 | "semi-spacing": [2, { "before": false, "after": true }], 211 | //代码块前面需要加空格 212 | "space-before-blocks": [2, "always"], 213 | //函数圆括号前面需要加空格 214 | "space-before-function-paren": [2, "never"], 215 | //圆括号内部不需要加空格 216 | "space-in-parens": [2, "never"], 217 | //操作符前后需要加空格 218 | "space-infix-ops": 2, 219 | //一元操作符前后是否需要加空格，单词类操作符需要加，而非单词类操作符不用加 220 | "space-unary-ops": [2, { "words": true, "nonwords": false }], 221 | //评论符号｀／*｀ ｀／／｀，后面需要留一个空格 222 | "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] }], 223 | //推荐使用isNaN方法，而不要直接和NaN作比较 224 | "use-isnan": 2, 225 | //在使用typeof操作符时，作比较的字符串必须是合法字符串eg:'string' 'object' 226 | "valid-typeof": 2, 227 | //立即执行函数需要用圆括号包围 228 | "wrap-iife": [2, "any"], 229 | //yoda条件语句就是字面量应该写在比较操作符的左边，而变量应该写在比较操作符的右边。 230 | //而下面的规则要求，变量写在前面，字面量写在右边 231 | "yoda": [2, "never"] 232 | } 233 | } 234 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .eslintrc 3 | .DS_Store 4 | node_modules 5 | build 6 | npm-debug.log -------------------------------------------------------------------------------- /mock/appInfo.js: -------------------------------------------------------------------------------- 1 | module.exports = function (app) { 2 | 3 | app.get('/apps' , function (req , res) { 4 | res.json([ 5 | { 6 | "icon": "assert/images/move.jpg" , 7 | "title": "KEEP" 8 | } , 9 | { 10 | "icon": "assert/images/shutterbugg.jpg" , 11 | "title": "小米运动" 12 | } , 13 | { 14 | "icon": "assert/images/gameboard.jpg" , 15 | "title": "咕咚" 16 | } , 17 | { 18 | "icon": "assert/images/forecast.jpg" , 19 | "title": "nike running" 20 | } 21 | ]); 22 | }); 23 | }; -------------------------------------------------------------------------------- /mock/citys.js: -------------------------------------------------------------------------------- 1 | module.exports = function (app) { 2 | 3 | app.get('/citys' , function (req , res) { 4 | res.json([ 5 | { 6 | "src": "../../../assert/images/img1.jpeg", 7 | "name": "大草原打滚", 8 | "address": "中国.内蒙古", 9 | "time": "2015.08.13 10:22:56", 10 | "desc": "内蒙的大草原其实和想象中的差异比较大..." 11 | }, 12 | { 13 | "src": "../../../assert/images/img2.jpeg", 14 | "name": "人妖表演", 15 | "address": "泰国.普吉岛", 16 | "time": "2015.07.05 20:00:00", 17 | "desc": "走在泰国轻易不要按照外表来判断性别,说不好就是人妖啊..." 18 | }, 19 | { 20 | "src": "../../../assert/images/img3.jpeg", 21 | "name": "玉龙雪山", 22 | "address": "中国.云南", 23 | "time": "2013.10.05 12:30:56", 24 | "desc": "远看玉龙雪山的雪其实不是真的雪,它可能是分化掉的石头..." 25 | } 26 | ]); 27 | }); 28 | }; -------------------------------------------------------------------------------- /mock/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author [silence_yfang@126.com] 3 | * @since 2016-06-16 4 | */ 5 | var fs = require('fs'), 6 | express = require ('express'), 7 | router = express.Router(); 8 | 9 | fs.readdirSync('mock').forEach(function (route) { 10 | if (route.indexOf('index') === -1) { 11 | require('./' + route)(router); 12 | } 13 | }); 14 | 15 | module.exports = router; -------------------------------------------------------------------------------- /mock/photos.js: -------------------------------------------------------------------------------- 1 | module.exports = function (app) { 2 | 3 | app.get('/photos' , function (req , res) { 4 | res.json([ 5 | { 6 | "title": "Canada" , 7 | "author": "Tim Gage" , 8 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/canada.jpg" , 9 | "pubdate": 1412208000000 , 10 | "upvotes": 60 , 11 | "views": 1195 12 | } , 13 | { 14 | "title": "Alps" , 15 | "author": "Didier Baertshiger" , 16 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/alps.jpg" , 17 | "pubdate": 1413590400000 , 18 | "upvotes": 67 , 19 | "views": 1266 20 | } , 21 | { 22 | "title": "Elk" , 23 | "author": "Thomas Lefebvre" , 24 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/elk.jpg" , 25 | "pubdate": 1415145600000 , 26 | "upvotes": 83 , 27 | "views": 3048 28 | } , 29 | { 30 | "title": "France" , 31 | "author": "Didier Baertshiger" , 32 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/france.jpg" , 33 | "pubdate": 1413590400000 , 34 | "upvotes": 55 , 35 | "views": 1193 36 | } , 37 | { 38 | "title": "Gray Fields" , 39 | "author": "Jeff Sheldon" , 40 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/gray-fields.jpg" , 41 | "pubdate": 1418342400000 , 42 | "upvotes": 130 , 43 | "views": 1283 44 | } , 45 | { 46 | "title": "Lake" , 47 | "author": "Didier Baertshiger" , 48 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/lake.jpg" , 49 | "pubdate": 1416009600000 , 50 | "upvotes": 2345 , 51 | "views": 139 52 | } 53 | ]); 54 | }); 55 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-webpack-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "start": "node server.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/silenceFang/angular-webpack-demo.git" 12 | }, 13 | "author": "silence", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/silence717/angular-webpack-demo/issues" 17 | }, 18 | "homepage": "https://github.com/silence717", 19 | "devDependencies": { 20 | "babel-core": "^6.7.7", 21 | "babel-eslint": "^6.0.4", 22 | "babel-loader": "^6.2.4", 23 | "babel-preset-es2015": "^6.6.0", 24 | "body-parser": "^1.15.1", 25 | "chokidar": "^1.5.2", 26 | "css-loader": "^0.23.1", 27 | "eslint": "^2.12.0", 28 | "eslint-config-angular": "^0.5.0", 29 | "eslint-friendly-formatter": "^2.0.5", 30 | "eslint-loader": "^1.3.0", 31 | "eslint-plugin-angular": "^1.1.1", 32 | "eslint-plugin-standard": "^1.3.2", 33 | "express": "^4.13.4", 34 | "file-loader": "^0.8.5", 35 | "html-loader": "^0.4.3", 36 | "html-webpack-plugin": "^2.17.0", 37 | "image-webpack-loader": "^1.8.0", 38 | "node-sass": "^3.5.2", 39 | "sass-loader": "^3.2.0", 40 | "style-loader": "^0.13.1", 41 | "webpack": "^1.13.0", 42 | "webpack-dev-middleware": "^1.6.1", 43 | "webpack-hot-middleware": "^2.10.0" 44 | }, 45 | "dependencies": { 46 | "angular": "^1.5.5", 47 | "angular-resource": "^1.5.6", 48 | "angular-ui-router": "^0.2.18", 49 | "ccms-components": "^1.0.4", 50 | "normalize.css": "^4.1.1" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ### 使用 angular1.x + es2015 + webpack 练习demo 2 | 第一步: 克隆项目 3 | ```bash 4 | git clone https://github.com/silence717/angular-webpack-demo.git 5 | ``` 6 | 第二步: 安装依赖 7 | ```javascript 8 | npm install 9 | ``` 10 | 第三步: 运行项目 11 | ```javascript 12 | npm start 13 | ``` 14 | 第四步: 访问项目 15 | ```javascript 16 | http://127.0.0.1:3000 17 | ``` 18 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [启动文件] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-09 5 | */ 6 | var express = require('express'), 7 | app = express(), 8 | webpack = require('webpack'), 9 | webpackDevMiddleware = require('webpack-dev-middleware'), 10 | webpackHotMiddleware = require('webpack-hot-middleware'), 11 | config = require('./webpack.config'), 12 | bodyParser = require('body-parser'), 13 | chokidar = require('chokidar').watch('./mock'), 14 | compile = webpack(config), 15 | router = express.Router(); 16 | 17 | app.use(webpackDevMiddleware(compile, { 18 | publicPath: config.output.publicPath, 19 | stats: {colors: true} 20 | })); 21 | 22 | app.use(webpackHotMiddleware(compile, { 23 | log: console.log 24 | })); 25 | 26 | app.use(bodyParser.json()); 27 | app.use(bodyParser.urlencoded({ 28 | extended: false 29 | })); 30 | 31 | app.use(function(res, req, next) { 32 | require('./mock')(res, req, next); 33 | }); 34 | 35 | // https://github.com/paulmillr/chokidar 36 | chokidar.on('ready', function() { 37 | chokidar.on('all', function() { 38 | console.log('Server restarting...'); 39 | 40 | Object.keys(require.cache).forEach(function(id) { 41 | if (/[\/\\]mock[\/\\]/.test(id)) { 42 | delete require.cache[id]; 43 | } 44 | }); 45 | }); 46 | }); 47 | 48 | router.all('*', function(req, res) { 49 | res.sendfile(__dirname + '/src/' + req.url); 50 | }); 51 | 52 | app.use('/', router); 53 | 54 | 55 | app.listen(3000, '127.0.0.1', function(err) { 56 | if (err) { 57 | console.log(err); 58 | return; 59 | } 60 | console.log('God bless me no bug! listening at http://127.0.0.1:3000'); 61 | }); 62 | -------------------------------------------------------------------------------- /src/app/album/AlbumCtrl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-19 5 | */ 6 | export default class AlbumController { 7 | 8 | constructor(photoResource) { 9 | 10 | let vm = this; 11 | vm.photos = photoResource.query(); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/album/Routers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [相册路由管理] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-23 5 | */ 6 | import albumListTpl from './index.html'; 7 | import albumDetailTpl from './photo/index.html'; 8 | 9 | export const AlbumListRouter = { 10 | state: 'album', 11 | config: { 12 | url: '/album', 13 | views: { 14 | '@': { 15 | template: albumListTpl, 16 | controller: 'AlbumController', 17 | controllerAs: 'vm' 18 | } 19 | }, 20 | title: '好玩的相册' 21 | } 22 | }; 23 | 24 | export const AlbumDetailRouter = { 25 | state: 'album.detail', 26 | config: { 27 | url: '/:id', 28 | views: { 29 | '@': { 30 | template: albumDetailTpl, 31 | controller: 'PhotoController', 32 | controllerAs: 'vm' 33 | } 34 | }, 35 | title: '单张照片show' 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /src/app/album/_album.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/silence717/AngularJS1.x-webpack-seed/1e4e36774afae8e8a6ff8cfd0a99f792c60ccf8b/src/app/album/_album.scss -------------------------------------------------------------------------------- /src/app/album/album.css: -------------------------------------------------------------------------------- 1 | .photos .item { 2 | cursor: pointer; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | .photos .item:hover { 7 | background: #000; 8 | text-decoration: none; 9 | transition: background 500ms; 10 | } 11 | .photos p.author { 12 | color: #000; 13 | padding: 10px; 14 | text-align: left; 15 | } 16 | .photos .item:hover p.author, .item:hover a { 17 | color: #fff; 18 | text-decoration: none; 19 | } 20 | .photo { 21 | margin: 0 0 80px; 22 | } 23 | .photo img { 24 | width: 100%; 25 | } 26 | .photo h2 { 27 | color: #000; 28 | padding: 20px 108px; 29 | } 30 | .photo p { 31 | color: #6f6f6f; 32 | margin: 0; 33 | padding: 0 108px 0; 34 | } -------------------------------------------------------------------------------- /src/app/album/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |

by {{ photo.author }}

6 | 7 |
8 |
-------------------------------------------------------------------------------- /src/app/album/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [相册入口] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-22 5 | */ 6 | import './album.css'; 7 | 8 | import angular from 'angular'; 9 | import AlbumController from './AlbumCtrl'; 10 | import PhotoController from './photo/PhotoCtrl'; 11 | import {AlbumListRouter, AlbumDetailRouter} from './Routers'; 12 | 13 | export default angular 14 | .module('app.album', []) 15 | .config(config) 16 | .controller('AlbumController', AlbumController) 17 | .controller('PhotoController', PhotoController) 18 | .name; 19 | 20 | 21 | function config($stateProvider) { 22 | 'ngInject'; 23 | $stateProvider.state(AlbumListRouter.state, AlbumListRouter.config); 24 | $stateProvider.state(AlbumDetailRouter.state, AlbumDetailRouter.config); 25 | } 26 | -------------------------------------------------------------------------------- /src/app/album/photo/PhotoCtrl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-23 5 | */ 6 | export default class PhotoController { 7 | 8 | constructor(photoResource, $stateParams) { 9 | 10 | let vm = this; 11 | vm.detail = photoResource.query(); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/album/photo/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |

{{ vm.detail.title }}

5 |

{{ vm.detail.author }}

6 |

{{ vm.detail.views | number }}

7 |

{{ vm.detail.upvotes | number }}

8 |

{{ vm.detail.pubdate | date}}

9 |
10 |
-------------------------------------------------------------------------------- /src/app/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [主入口文件] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-22 5 | */ 6 | import angular from 'angular'; 7 | import uiRouter from 'angular-ui-router'; 8 | import ngResource from 'angular-resource'; 9 | import components from '../components'; 10 | 11 | import home from './home'; 12 | import user from './user'; 13 | import album from './album'; 14 | import resource from '../common/resources'; 15 | 16 | import {routerConfig} from './config'; 17 | 18 | 19 | // 定义模块 20 | angular 21 | .module('app', [ 22 | uiRouter, 23 | ngResource, 24 | components, 25 | home, 26 | album, 27 | user, 28 | resource 29 | ]) 30 | .config(routerConfig) 31 | .run(runBlock); 32 | 33 | function runBlock($rootScope, $state, $stateParams) { 34 | 'ngInject'; 35 | 36 | $rootScope.$state = $state; 37 | $rootScope.$stateParams = $stateParams; 38 | // stateChangeStart($rootScope); 39 | // stateChangeError($rootScope); 40 | // stateChangeSuccess($rootScope); 41 | } 42 | // stateChangeStart 43 | // function stateChangeStart($rootScope) { 44 | // $rootScope.$on('$stateChangeStart', 45 | // (event, toState, toParams, fromState, fromParams) => { 46 | // // event.preventDefault(); 47 | // console.log('开始改变====='); 48 | // console.log(toState); 49 | // console.log(toParams); 50 | // console.log(fromState); 51 | // console.log(fromParams); 52 | // }); 53 | // } 54 | // stateChangeError 55 | // function stateChangeError($rootScope) { 56 | // $rootScope.$on('$stateChangeError', 57 | // (event, toState, toParams, fromState, fromParams, error) => { 58 | // // event.preventDefault(); 59 | // console.log('出错了====='); 60 | // console.log(toState); 61 | // console.log(toParams); 62 | // console.log(fromState); 63 | // console.log(fromParams); 64 | // console.log(error); 65 | // }); 66 | // } 67 | // stateChangeError 68 | // function stateChangeSuccess($rootScope) { 69 | // $rootScope.$on('$stateChangeSuccess', 70 | // (event, toState, toParams, fromState, fromParams) => { 71 | // // event.preventDefault(); 72 | // console.log('成功了====='); 73 | // console.log(toState); 74 | // console.log(toParams); 75 | // console.log(fromState); 76 | // console.log(fromParams); 77 | // }); 78 | // } 79 | -------------------------------------------------------------------------------- /src/app/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author [silence_yfang@126.com] 3 | * @date 2016-05-24 4 | */ 5 | 6 | export function routerConfig($urlRouterProvider) { 7 | 8 | 'ngInject'; 9 | 10 | // 默认路由设置 11 | $urlRouterProvider.otherwise('/home'); 12 | 13 | // 无视浏览器中 url末尾的"/" 14 | // 设置时 url, 末尾不要添加 "/" 15 | $urlRouterProvider.rule(($injector, $location) => { 16 | 17 | const path = $location.path(); 18 | 19 | const hashTrailingSlash = path[path.length - 1] === '/'; 20 | 21 | if (hashTrailingSlash) { 22 | return path.slice(0, path.length - 1); 23 | } 24 | }); 25 | } 26 | -------------------------------------------------------------------------------- /src/app/home/HomeCtrl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-19 5 | */ 6 | export default class HomeController { 7 | 8 | constructor(appInfoResource, $state) { 9 | 10 | let vm = this; 11 | vm.apps = appInfoResource.query(); 12 | vm.state = $state; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/home/Routers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [首页路由设置] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-24 5 | */ 6 | import homeTpl from './index.html'; 7 | 8 | export const HomeRouter = { 9 | state: 'home', 10 | config: { 11 | url: '/home', 12 | views: { 13 | '@': { 14 | template: homeTpl, 15 | controller: 'HomeController', 16 | controllerAs: 'vm' 17 | } 18 | }, 19 | title: '好玩的app' 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/app/home/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |
6 |
-------------------------------------------------------------------------------- /src/app/home/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [home入口] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-22 5 | */ 6 | 7 | import angular from 'angular'; 8 | import HomeController from './HomeCtrl'; 9 | import {HomeRouter} from './Routers'; 10 | 11 | export default angular 12 | .module('app.home', []) 13 | .config(config) 14 | .controller('HomeController', HomeController) 15 | .name; 16 | 17 | function config($stateProvider) { 18 | 'ngInject'; 19 | $stateProvider.state(HomeRouter.state, HomeRouter.config); 20 | } 21 | -------------------------------------------------------------------------------- /src/app/user/Routers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [个人中心路由] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-24 5 | */ 6 | import indexTpl from './index.html'; 7 | import baseInfoTpl from './baseInfo/index.html'; 8 | import footPrintTpl from './footprint/index.html'; 9 | import thumbListTpl from './footprint/thumbList.html'; 10 | import detailListTpl from './footprint/detailList.html'; 11 | 12 | export const UserRouter = { 13 | state: 'user', 14 | config: { 15 | url: '/user', 16 | views: { 17 | '@': { 18 | template: indexTpl 19 | } 20 | }, 21 | title: '个人中心' 22 | } 23 | }; 24 | 25 | export const UserBaseInfoRouter = { 26 | state: 'user.baseInfo', 27 | config: { 28 | url: '/baseInfo', 29 | views: { 30 | 'content@user': { 31 | template: baseInfoTpl 32 | } 33 | } 34 | } 35 | }; 36 | // https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views 37 | // viewname@statename 38 | export const UserFootprintRouter = { 39 | state: 'user.footprint', 40 | config: { 41 | url: '/footprint', 42 | views: { 43 | 'content@user': { 44 | template: footPrintTpl, 45 | controller: 'FootprintController', 46 | controllerAs: 'vm' 47 | }, 48 | 'thumbList@user.footprint': { 49 | template: thumbListTpl 50 | }, 51 | 'detailList@user.footprint': { 52 | template: detailListTpl 53 | } 54 | }, 55 | title: '我的足迹' 56 | } 57 | }; 58 | -------------------------------------------------------------------------------- /src/app/user/baseInfo/index.html: -------------------------------------------------------------------------------- 1 |

中文名: 杨芳

2 |

英文名: silence

3 |

我的爱好: 摄影,旅行

4 |

我的偶像: 郭跃

-------------------------------------------------------------------------------- /src/app/user/baseInfo/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [个人基本信息] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-22 5 | */ 6 | import angular from 'angular'; 7 | 8 | export default angular 9 | .module('app.user.baseInfo', []) 10 | .name; 11 | -------------------------------------------------------------------------------- /src/app/user/footprint/detailList.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 19 | 22 | 25 | 26 | 27 |
名称时间地点描述
14 |
{{item.name}}
15 | 		17 |
{{item.time}}
18 | 		20 |
{{item.address}}
21 | 		23 |
{{item.desc}}
24 |
28 |
29 | -------------------------------------------------------------------------------- /src/app/user/footprint/footprintCtrl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [我的足迹controller] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-19 5 | */ 6 | export default class FootprintController { 7 | 8 | constructor(cityResource) { 9 | let vm = this; 10 | 11 | vm.citys = cityResource.query(); 12 | 13 | vm.isShowThumb = true; 14 | vm.isShowDetail = false; 15 | } 16 | // 切换为缩略图展示 17 | // showThumbListClick() { 18 | // this.isShowThumb = true; 19 | // this.isShowDetail = false; 20 | // } 21 | // // 切换为详细列表 22 | // showDetailListClick() { 23 | // this.isShowThumb = false; 24 | // this.isShowDetail = true; 25 | // } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/user/footprint/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 共3个资源 5 |
6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
-------------------------------------------------------------------------------- /src/app/user/footprint/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [我的足迹入口] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-22 5 | */ 6 | import angular from 'angular'; 7 | import FootprintController from './FootprintCtrl'; 8 | 9 | export default angular 10 | .module('app.user.footprint', []) 11 | .controller('FootprintController', FootprintController) 12 | .name; 13 | -------------------------------------------------------------------------------- /src/app/user/footprint/thumbList.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 16 |
17 | -------------------------------------------------------------------------------- /src/app/user/index.html: -------------------------------------------------------------------------------- 1 |
2 | 8 |
9 | 10 |
11 |
12 | 13 |
14 |
-------------------------------------------------------------------------------- /src/app/user/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [资源模块入口] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-22 5 | */ 6 | import './user.css'; 7 | 8 | import angular from 'angular'; 9 | import footprint from './footprint'; 10 | import baseInfo from './baseInfo'; 11 | import {UserRouter, UserBaseInfoRouter, UserFootprintRouter} from './Routers'; 12 | 13 | 14 | export default angular 15 | .module('app.user', [ 16 | footprint, 17 | baseInfo 18 | ]) 19 | .config(config) 20 | .name; 21 | 22 | function config($stateProvider) { 23 | 'ngInject'; 24 | 25 | $stateProvider.state(UserRouter.state, UserRouter.config); 26 | $stateProvider.state(UserBaseInfoRouter.state, UserBaseInfoRouter.config); 27 | $stateProvider.state(UserFootprintRouter.state, UserFootprintRouter.config); 28 | } 29 | -------------------------------------------------------------------------------- /src/app/user/user.css: -------------------------------------------------------------------------------- 1 | .side-bar { 2 | height: 560px; 3 | background: #fff; 4 | } 5 | .side-bar li a { 6 | display: block; 7 | color: #000; 8 | padding: 8px 0 8px 16px; 9 | } 10 | .side-bar li a:hover { 11 | background-color: #eee; 12 | color:#444; 13 | } 14 | .side-bar li .selected { 15 | background-color: #eee; 16 | } 17 | .user .top{ 18 | height: 40px; 19 | margin: 15px 0; 20 | border: 1px solid #ddd; 21 | } 22 | .user .tabs { 23 | background-color: #fff; 24 | } 25 | .user .tabs li { 26 | float: left; 27 | text-align: center; 28 | border-right: 1px solid #ddd; 29 | } 30 | .user .tab { 31 | display: inline-block; 32 | min-width: 80px; 33 | line-height: 40px; 34 | padding: 0 20px; 35 | color: #666; 36 | } 37 | .user .tab:hover { 38 | background-color: #f4f4f4; 39 | color: #0088cc; 40 | } 41 | .user .tab.selected { 42 | color: #fff; 43 | background-color: #00a1f2; 44 | } 45 | .user .wrapper-list { 46 | background-color: #fff; 47 | box-shadow: 0 0 1px 1px rgba(0, 0, 0, .05); 48 | padding-bottom: 10px; 49 | } 50 | .user .wrapper-header { 51 | height: 42px; 52 | line-height: 42px; 53 | padding-left: 18px; 54 | background-color: #f9f9f9; 55 | border-bottom: 1px solid #d3d3d3; 56 | } 57 | .user .module-content { 58 | padding: 0 18px; 59 | } 60 | .user .number { 61 | color: #ff9833; 62 | } 63 | .user .icon-switch { 64 | display: inline-block; 65 | float: right; 66 | } 67 | .user .icon-switch .thumb-view, 68 | .user .icon-switch .info-view { 69 | display: inline-block; 70 | width: 40px; 71 | height: 42px; 72 | text-align: center; 73 | } 74 | .user icon { 75 | display: inline-block; 76 | width: 14px; 77 | height: 15px; 78 | background: url("../../assert/images/icon_switch.png") no-repeat; 79 | } 80 | .user .icon-thumb { 81 | background-position: -42px 0; 82 | } 83 | .user .icon-info { 84 | background-position: -56px 0px; 85 | } 86 | .user .icon-switch .thumb-view.active, 87 | .user .icon-switch .info-view.active { 88 | background-color: #fff; 89 | border-left: 1px solid #d3d3d3; 90 | border-right: 1px solid #d3d3d3; 91 | } 92 | .user .icon-switch .thumb-view.active .icon-thumb { 93 | background-position: -42px -20px; 94 | } 95 | .user .icon-switch .info-view.active .icon-info { 96 | background-position: -56px -20px; 97 | } 98 | .module { 99 | margin: 10px 0; 100 | padding: 10px 18px 1px; 101 | background-color: #fff; 102 | box-shadow: 0 0 1px 1px rgba(0, 0, 0, .05); 103 | } 104 | .module .module-name { 105 | height: 40px; 106 | line-height: 40px; 107 | border-bottom: 1px solid #ddd; 108 | } 109 | .module .title { 110 | font-size: 14px; 111 | font-weight: bold; 112 | color: #444; 113 | padding: 0 20px; 114 | float: left; 115 | border-bottom: 2px solid #00a1f2; 116 | } 117 | .module .more { 118 | float: right; 119 | color: #666; 120 | } 121 | /* 全部tab e*/ 122 | .thumb-list { 123 | height: 488px; 124 | } 125 | .detail-list { 126 | height: 508px; 127 | } 128 | .thumb-list .items { 129 | overflow: hidden; 130 | margin: 20px 0; 131 | } 132 | .thumb-list .item { 133 | width: 180px; 134 | height: 276px; 135 | margin-right: 17px; 136 | float: left; 137 | border: 1px solid #ddd; 138 | } 139 | .thumb-list .item img { 140 | width: 178px; 141 | height: 135px; 142 | padding-left: 1px; 143 | } 144 | .thumb-list .item-info { 145 | padding: 10px 5px; 146 | line-height: 24px; 147 | } 148 | .thumb-list .name { 149 | font-size: 14px; 150 | color: #0088cc; 151 | white-space: nowrap; 152 | overflow: hidden; 153 | text-overflow: ellipsis; 154 | } 155 | .thumb-list .address { 156 | font-size: 12px; 157 | color: #666; 158 | } 159 | .thumb-list .item-info .time, 160 | .thumb-list .item-info .desc { 161 | font-size: 12px; 162 | color: #999; 163 | } 164 | .detail-list table { 165 | width: 100%; 166 | } 167 | .detail-list thead { 168 | background-color: #f3f3f3; 169 | } 170 | .detail-list thead th { 171 | text-align: center; 172 | } 173 | .detail-list tr{ 174 | height: 40px; 175 | line-height: 40px; 176 | text-align: center; 177 | border-bottom: 1px solid #d3d3d3; 178 | } 179 | .detail-list tr a{ 180 | color: #666; 181 | } 182 | .detail-list tbody .name { 183 | text-align: left; 184 | padding-left: 10px; 185 | } 186 | .detail-list tbody tr:hover { 187 | color: #0088cc; 188 | background-color: #f9f9f9; 189 | } -------------------------------------------------------------------------------- /src/assert/css/base.css: -------------------------------------------------------------------------------- 1 | @import "reset.css"; 2 | main { 3 | background-color: #f4f4f4 ; 4 | padding: 10px 0; 5 | min-height: 600px; 6 | } 7 | .navbar { 8 | margin-bottom: 0; 9 | } 10 | header li.active a { 11 | font-weight: bold; 12 | } 13 | .title { 14 | color: #000; 15 | font-size: 15px; 16 | font-weight: bold; 17 | margin-bottom: 5px; 18 | } 19 | 20 | .btn:hover { 21 | color: rgb(255,80,80); 22 | background: rgba(255,80,80,0.25); 23 | transition: background 500ms; 24 | border: 1px solid rgb(255,80,80); 25 | } 26 | footer { 27 | height: 50px; 28 | border-top: 1px solid #e5e5e5; 29 | } 30 | footer a { 31 | font-weight: 500; 32 | color: #00a1f2; 33 | } 34 | footer a:hover { 35 | color: #00a1f2; 36 | } -------------------------------------------------------------------------------- /src/assert/css/reset.css: -------------------------------------------------------------------------------- 1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p, blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 2 | margin:0; 3 | padding:0; 4 | border: 0; 5 | font: inherit; 6 | vertical-align: baseline; 7 | outline: none; 8 | } 9 | body { 10 | font: 12px/2 Microsoft YaHei,Arial; 11 | color: #444; 12 | } 13 | article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 14 | display:block; 15 | } 16 | audio,canvas,video { 17 | display: inline-block; 18 | *display: inline; 19 | *zoom: 1; 20 | } 21 | input,select,textarea { 22 | font-size:100%; 23 | outline: none; 24 | } 25 | table { 26 | border-collapse:collapse;border-spacing:0; 27 | } 28 | th { 29 | text-align:inherit; 30 | } 31 | fieldset,img { 32 | border:0; 33 | } 34 | iframe { 35 | display:block; 36 | } 37 | abbr,acronym { 38 | border:0;font-variant:normal; 39 | } 40 | address,caption,cite,code,dfn,em,th,var { 41 | font-style:normal; 42 | font-weight:500; 43 | } 44 | ol,ul { 45 | list-style:none; 46 | } 47 | i { 48 | font-style: normal; 49 | } 50 | caption,th { 51 | text-align:left; 52 | } 53 | h1,h2,h3,h4,h5,h6 { 54 | font-size:100%; 55 | font-weight:500; 56 | } 57 | a { 58 | text-decoration:none; 59 | cursor: pointer; 60 | color: #444; 61 | } 62 | a:hover { 63 | color: #444; 64 | } 65 | .fn-clear:after { 66 | visibility:hidden; 67 | display:block; 68 | font-size:0; 69 | content:" "; 70 | clear:both; 71 | height:0; 72 | } 73 | .fn-clear { 74 | zoom:1; 75 | } 76 | .fn-text-overflow { 77 | overflow: hidden; 78 | text-overflow: ellipsis; 79 | white-space: nowrap; 80 | } 81 | .fn-tal{ text-align:left;} 82 | .fn-tar{ text-align:right;} 83 | .fn-tac{ text-align:center;} -------------------------------------------------------------------------------- /src/assert/images/forecast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/silence717/AngularJS1.x-webpack-seed/1e4e36774afae8e8a6ff8cfd0a99f792c60ccf8b/src/assert/images/forecast.jpg -------------------------------------------------------------------------------- /src/assert/images/gameboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/silence717/AngularJS1.x-webpack-seed/1e4e36774afae8e8a6ff8cfd0a99f792c60ccf8b/src/assert/images/gameboard.jpg -------------------------------------------------------------------------------- /src/assert/images/icon_switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/silence717/AngularJS1.x-webpack-seed/1e4e36774afae8e8a6ff8cfd0a99f792c60ccf8b/src/assert/images/icon_switch.png -------------------------------------------------------------------------------- /src/assert/images/img1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/silence717/AngularJS1.x-webpack-seed/1e4e36774afae8e8a6ff8cfd0a99f792c60ccf8b/src/assert/images/img1.jpeg -------------------------------------------------------------------------------- /src/assert/images/img2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/silence717/AngularJS1.x-webpack-seed/1e4e36774afae8e8a6ff8cfd0a99f792c60ccf8b/src/assert/images/img2.jpeg -------------------------------------------------------------------------------- /src/assert/images/img3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/silence717/AngularJS1.x-webpack-seed/1e4e36774afae8e8a6ff8cfd0a99f792c60ccf8b/src/assert/images/img3.jpeg -------------------------------------------------------------------------------- /src/assert/images/move.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/silence717/AngularJS1.x-webpack-seed/1e4e36774afae8e8a6ff8cfd0a99f792c60ccf8b/src/assert/images/move.jpg -------------------------------------------------------------------------------- /src/assert/images/shutterbugg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/silence717/AngularJS1.x-webpack-seed/1e4e36774afae8e8a6ff8cfd0a99f792c60ccf8b/src/assert/images/shutterbugg.jpg -------------------------------------------------------------------------------- /src/common/data/appInfo.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "icon": "assert/images/move.jpg", 4 | "title": "KEEP" 5 | }, 6 | { 7 | "icon": "assert/images/shutterbugg.jpg", 8 | "title": "小米运动" 9 | }, 10 | { 11 | "icon": "assert/images/gameboard.jpg", 12 | "title": "咕咚" 13 | }, 14 | { 15 | "icon": "assert/images/forecast.jpg", 16 | "title": "nike running" 17 | } 18 | ] -------------------------------------------------------------------------------- /src/common/data/citys.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "src": "../../../assert/images/img1.jpeg", 4 | "name": "大草原打滚", 5 | "address": "中国.内蒙古", 6 | "time": "2015.08.13 10:22:56", 7 | "desc": "内蒙的大草原其实和想象中的差异比较大..." 8 | }, 9 | { 10 | "src": "../../../assert/images/img2.jpeg", 11 | "name": "人妖表演", 12 | "address": "泰国.普吉岛", 13 | "time": "2015.07.05 20:00:00", 14 | "desc": "走在泰国轻易不要按照外表来判断性别,说不好就是人妖啊..." 15 | }, 16 | { 17 | "src": "../../../assert/images/img3.jpeg", 18 | "name": "玉龙雪山", 19 | "address": "中国.云南", 20 | "time": "2013.10.05 12:30:56", 21 | "desc": "远看玉龙雪山的雪其实不是真的雪,它可能是分化掉的石头..." 22 | } 23 | ] -------------------------------------------------------------------------------- /src/common/data/photos.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Canada", 4 | "author": "Tim Gage", 5 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/canada.jpg", 6 | "pubdate": 1412208000000, 7 | "upvotes": 60, 8 | "views": 1195 9 | }, 10 | { 11 | "title": "Alps", 12 | "author": "Didier Baertshiger", 13 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/alps.jpg", 14 | "pubdate": 1413590400000, 15 | "upvotes": 67, 16 | "views": 1266 17 | }, 18 | { 19 | "title": "Elk", 20 | "author": "Thomas Lefebvre", 21 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/elk.jpg", 22 | "pubdate": 1415145600000, 23 | "upvotes": 83, 24 | "views": 3048 25 | }, 26 | { 27 | "title": "France", 28 | "author": "Didier Baertshiger", 29 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/france.jpg", 30 | "pubdate": 1413590400000, 31 | "upvotes": 55, 32 | "views": 1193 33 | }, 34 | { 35 | "title": "Gray Fields", 36 | "author": "Jeff Sheldon", 37 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/gray-fields.jpg", 38 | "pubdate": 1418342400000, 39 | "upvotes": 130, 40 | "views": 1283 41 | }, 42 | { 43 | "title": "Lake", 44 | "author": "Didier Baertshiger", 45 | "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/lake.jpg", 46 | "pubdate": 1416009600000, 47 | "upvotes": 2345, 48 | "views": 139 49 | } 50 | ] -------------------------------------------------------------------------------- /src/common/resources/appInfoResource.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [几款运动app] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-08 5 | */ 6 | 7 | export default function appInfoResource($resource) { 8 | 'ngInject'; 9 | // return $resource('/common/data/appInfo.json'); 10 | return $resource('/apps'); 11 | } -------------------------------------------------------------------------------- /src/common/resources/cityResource.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-24 5 | */ 6 | export default function cityResource($resource) { 7 | 'ngInject'; 8 | // return $resource('/common/data/citys.json'); 9 | return $resource('/citys'); 10 | } 11 | -------------------------------------------------------------------------------- /src/common/resources/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [resource入口] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-22 5 | */ 6 | import appInfoResource from './appInfoResource'; 7 | import photoResource from './photoResource'; 8 | import cityResource from './cityResource'; 9 | 10 | export default angular 11 | .module('app.resources', []) 12 | .factory('photoResource', photoResource) 13 | .factory('appInfoResource', appInfoResource) 14 | .factory('cityResource', cityResource) 15 | .name; 16 | -------------------------------------------------------------------------------- /src/common/resources/photoResource.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [请求照片数据] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-08 5 | */ 6 | 7 | export default function photoResource($resource) { 8 | 'ngInject'; 9 | return $resource('/photos'); 10 | } -------------------------------------------------------------------------------- /src/components/appInfo/appInfo.html: -------------------------------------------------------------------------------- 1 | 2 |

{{ info.title }}

-------------------------------------------------------------------------------- /src/components/appInfo/appInfoDirective.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [appInfo指令] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-08 5 | */ 6 | 7 | export default function appInfo() { 8 | 9 | return { 10 | restrict: 'E' , 11 | scope: { 12 | info: '=' 13 | } , 14 | templateUrl: './components/appInfo/appInfo.html' 15 | }; 16 | } -------------------------------------------------------------------------------- /src/components/appInfo/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-23 5 | */ 6 | 7 | import angular from 'angular'; 8 | import appInfoDirective from './appInfoDirective'; 9 | 10 | export default angular 11 | .module('app.appInfo', []) 12 | .directive('appInfo', appInfoDirective) 13 | .name; 14 | 15 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [组件入口] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-23 5 | */ 6 | import angular from 'angular'; 7 | 8 | import appInfo from './appInfo'; 9 | import installApp from './installApp'; 10 | 11 | export default angular 12 | .module('app.components', [ 13 | appInfo, 14 | installApp 15 | ]) 16 | .name; -------------------------------------------------------------------------------- /src/components/installApp/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-23 5 | */ 6 | 7 | import angular from 'angular'; 8 | import installAppDirective from './installAppDirective'; 9 | 10 | export default angular 11 | .module('app.installApp', []) 12 | .directive('installApp', installAppDirective) 13 | .name; -------------------------------------------------------------------------------- /src/components/installApp/installApp.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/installApp/installAppDirective.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [按钮指令] 3 | * @author [silence_yfang@126.com] 4 | * @date 2016-05-08 5 | */ 6 | 7 | export default function installApp() { 8 | 9 | return { 10 | restrict: 'E', 11 | scope: {}, 12 | templateUrl: './components/installApp/installApp.html', 13 | link: function(scope, element) { 14 | scope.buttonText = '安装', 15 | scope.installed = false, 16 | scope.download = function() { 17 | element.addClass('btn-active'); 18 | if(scope.installed) { 19 | scope.buttonText = '安装'; 20 | scope.installed = false; 21 | } else { 22 | scope.buttonText = '卸载'; 23 | scope.installed = true 24 | } 25 | } 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /src/components/styles/_global.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | font: inherit; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | %clear-fix { 11 | zoom: 1; 12 | 13 | &:after { 14 | content: ""; 15 | display: table; 16 | clear: both; 17 | } 18 | } -------------------------------------------------------------------------------- /src/components/styles/_layout.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/silence717/AngularJS1.x-webpack-seed/1e4e36774afae8e8a6ff8cfd0a99f792c60ccf8b/src/components/styles/_layout.scss -------------------------------------------------------------------------------- /src/components/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | /* 配色 */ 2 | $color-bg: #fff; 3 | $color-bg-gray: #eee; 4 | 5 | $color-text: #3d3d3d; 6 | $color-text-light: #999; 7 | $color-border: #000; 8 | 9 | 10 | /* 字体 */ 11 | $font-family: Tahoma, "Microsoft Yahei", sans-serif; 12 | $font-base: 12px; 13 | $font-lg: 14px; 14 | 15 | $line-base: 1.5; 16 | 17 | $page-title-size: 18px; 18 | 19 | 20 | /* 布局 */ 21 | $gap: 10px; 22 | 23 | $top-bar-padding: $font-base; 24 | $top-bar-logo-size: 20px; 25 | 26 | $page-min-width: 1200px; 27 | $side-nav-width: 150px; 28 | 29 | 30 | /* 表单 */ 31 | $control-size: 200px; 32 | $control-height: 30px; 33 | -------------------------------------------------------------------------------- /src/components/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import '../../../node_modules/normalize.css'; 2 | 3 | @import "global"; 4 | @import "layout"; -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 17 |
18 |
19 |
20 |
21 |
22 |
23 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description [webpack配置] 3 | * @author [fang.yang@shuyun.com] 4 | * @date 2016-04-21 5 | */ 6 | 7 | var path = require('path'), 8 | webpack = require('webpack'), 9 | HTMLPlugin = require('html-webpack-plugin'), 10 | eslintFriendlyFormatter = require('eslint-friendly-formatter'), 11 | NODE_MODULE_PATH = /node_modules/, 12 | SRC_PATH = path.resolve(__dirname, 'src'), 13 | ASSETS_PATH = /SRC\\assets/; 14 | 15 | module.exports = { 16 | devtool: 'source-map', 17 | entry: { 18 | app: ['webpack-hot-middleware/client?reload=true', './src/app/app.js'] 19 | }, 20 | output: { 21 | path: path.join(__dirname, 'build'), 22 | filename: 'bundle.js', 23 | publicPath: '/' 24 | }, 25 | 26 | resolve: { 27 | extensions: ['', '.js'] 28 | }, 29 | 30 | eslint: { 31 | configFile: '.eslintrc', 32 | emitError: true, 33 | emitWarning: true, 34 | formatter: eslintFriendlyFormatter 35 | }, 36 | 37 | 38 | plugins: [ 39 | new HTMLPlugin({ 40 | template: './src/index.html', 41 | fileName: 'index.html', 42 | excludeChunks: ['app'] 43 | }), 44 | new webpack.optimize.OccurenceOrderPlugin(), 45 | new webpack.HotModuleReplacementPlugin(), 46 | new webpack.NoErrorsPlugin() 47 | ], 48 | 49 | preLoaders: [ 50 | { 51 | test: '\.js$', 52 | loader: 'eslint-loader', 53 | exclude: [/node_modules/, ASSETS_PATH], 54 | include: SRC_PATH 55 | } 56 | ], 57 | 58 | module: { 59 | loaders: [ 60 | { 61 | test: /\.js?$/, 62 | loaders: ['babel'], 63 | exclude: /(node_modules|bower_components)/, 64 | include: SRC_PATH 65 | }, 66 | // { 67 | // test: /^((?!\.tpl|index).)*\.html$/, 68 | // loader: 'file', 69 | // exclude: NODE_MODULE_PATH, 70 | // include: SRC_PATH 71 | // }, 72 | { 73 | // test: /\.tpl\.html$/, 74 | test: /\.html$/, 75 | loaders: ['html?interpolate=true'], 76 | exclude: NODE_MODULE_PATH, 77 | include: SRC_PATH 78 | }, 79 | { 80 | test: /\.css$/, 81 | loaders: ['style', 'css'], 82 | includes: path.resolve(__dirname, 'node_modules/normalize.css') 83 | }, 84 | { 85 | test: /\.(jpe?g|png|gif|svg)$/i, 86 | loaders: [ 87 | 'file?hash=sha512&digest=hex&name=[hash:8].[ext]', 88 | 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 89 | ], 90 | exclude: NODE_MODULE_PATH 91 | } 92 | ] 93 | } 94 | }; 95 | --------------------------------------------------------------------------------